サイズレコメンドのタグをGTMから入れる

服や靴のECで「サイズが分からないから買わない」は大きな離脱理由です。そこで外部のサイズ提案ツールを入れる場面が出てきます。

導入自体はタグを貼るだけです。ただし購入完了ページのタグだけは手間がかかります。1回の注文で複数の商品が買われるため、そのまま値を入れても成立しません。ここを中心に書きます。

どのようなタグを入れるか

貼るのは3種類です。すべてGTMの「カスタムHTML」タグとして登録します。

①がユーザーの識別、②がレコメンドの材料、③が効果測定です。③がないと、入れた意味を数字で示せません。

① 共通タグで送る値

② 商品詳細タグで送る値

③ 購入完了タグで送る値

複数商品を買われたときの書き方

ここが本題です。1回の注文で4点買われた場合、購入点数・商品ID・売価・サイズの4項目は、区切り文字でつないで1つの値にします。

区切り文字は # を使う仕様が多いです。ただし # はURLの中で特別な意味を持つため、URLエンコードして %23 に変換して書きます。

例

次の注文があったとします。

タグに入れる値はこうなります。

注文ID   = "9999999"
購入点数 = "1%231%232%231"
商品ID   = "A1%23B1%23B1%23C1"
売価     = "1000%232000%232000%233000"
サイズ   = "S%23S%23M%23L"

絶対にやってはいけない書き方

4項目で順番がずれると、どの商品がいくらでどのサイズだったかが対応しなくなります。

商品ID = "A1%23B1%23B1%23C1"          ← A1, B1, B1, C1 の順
売価   = "3000%232000%232000%231000"  ← C1 の値段から始まっている

値としては正しく入るため、エラーにならないまま間違ったデータがたまります。これが最悪の形です。

実装の考え方

購入商品の配列を、1つのループで順に取り出し、4つの入れ物へ同時に入れていきます。

var sep = '%23';
var nums = [], ids = [], prices = [], sizes = [];

for (var i = 0; i < products.length; i++) {
  nums.push(encodeURIComponent(products[i].quantity));
  ids.push(encodeURIComponent(products[i].id));
  prices.push(encodeURIComponent(Math.floor(Number(products[i].price))));
  sizes.push(encodeURIComponent(products[i].variant || ''));
}

4項目を別々のループで作らないでください。1つのループで同時に入れていけば、順番は構造上ずれません。

入れるときの注意点

確認手順

1. GTMの管理画面で右上の「プレビュー」を押します
2. 表示された入力欄にサイトのURLを入れて「Connect」を押します
3. 別ウィンドウでサイトが開くので、実際に2種類以上の商品をカートに入れて購入します
4. プレビュー画面の左側で「Purchase」に相当するイベントを選びます
5. 「Tags Fired」に購入完了タグが入っていることを確認します
6. タグをクリックし、送信された値を開いて、4項目の並び順が一致しているかを目視します

1商品だけのテストで終わらせません。並び順の問題は、2商品以上でないと再現しません。

UA時代の eec.purchase では取得できない内容

GTM上で購入データを取るとき、UA（ユニバーサルアナリティクス）時代の拡張eコマースで作った eec.purchase のデータ層をそのまま流用しようとすることが多いです。

ここに含まれるのは、おおむね次の範囲です。

一方、含まれないか、当てにできないものが次の通りです。

特にサイズに注意します。variant という項目名があるだけで、そこにサイズが入っているとは限りません。「色／サイズ」が1つの文字列で入っている実装、空のままの実装、どちらもよくあります。

確認の順番は次の通りです。

1. GTMのプレビューで実際に購入し、variant の中身を目で見ます
2. 想定と違えば、サイト側の開発担当にデータ層への追加を依頼します
3. 追加されるまでは、その項目を空で送るか、公開自体を待つかを決めます

中身を見ないまま設計を進めません。項目名だけを信じて実装すると、公開後に空データがたまります。

失敗例

まとめ

• 貼るタグは3種類です。購入完了タグがないと効果を数字で示せません
• 複数商品は区切り文字で連結し、%23 にエンコードします
• 4項目の並び順を揃えます。ずれてもエラーにならないため気づけません
• 組み立ては1つのループで行います。別々に作ると必ずずれます
• UA時代の eec.purchase には、会員ID・会員ランクが入っていません。サイズも当てにできません
• 確認は必ず2商品以上で行います。1商品では並び順の問題が再現しません

先にやることは実装ではなく、送る項目の定義を1枚の表にまとめ、サイト側と合意することです。値の意味がずれたままでは、正しく動いても数字が合いません。