Shopifyの注文状況ページにデータレイヤー変数を出力する
-
Shopify管理画面の 設定＞チェックアウト をひらく
-
下にスクロールして 注文状況ページ という項目の 追加スクリプト を開く
-
追加スクリプト内のGTMタグより上部に、以下スクリプトをコピペする
- GTMタグより下になるとうまく情報を取得できないケースが出てくることもあるので注意
<script>
setTimeout(() => {
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
dataLayer.push({
event: "cc_purchase",
ecommerce: {
transaction_id:
document
.getElementsByClassName("os-order-number")[0]
?.getInnerHTML()
.match(/(\\d+)/g)[0] ?? window.Shopify?.checkout.order_id.toString(),
currency: window.Shopify?.checkout.currency,
value: Number(window.Shopify?.checkout.total_price),
tax: Number(window.Shopify?.checkout.total_tax),
shipping: Number(window.Shopify?.checkout.shipping_rate?.price),
coupon: window.Shopify?.checkout.discount?.code,
items: window.Shopify?.checkout.line_items.map((item) => ({
id: `shopify_JP_${item.product_id}_${item.variant_id}`,
name: item.title,
brand: item.vendor,
category:
document
.querySelectorAll("[data-product-type]")[0]
?.getAttribute("data-product-type") ?? "",
variant: item.variant_title,
price: Number(item.price),
quantity: item.quantity,
})),
},
});
}, 500);
</script>
GTMにてデータレイヤー変数の設定をする
-
GTM管理画面をひらく
-
変数 > ユーザー定義変数 ＞ 新規を選択
-
変数の設定 にカーソルを合わせて編集ボタンを押す
-
データレイヤーの変数 を選択
-
以下表を参照に、変数名とデータレイヤーの変数名を4つ設定して保存する
| No. | 変数名 ※任意で変更可 | データレイヤーの変数名 | 備考 | | --- | --- | --- | --- | | 1 | CC_currency | ecommerce.currency | 購入された通貨の種類 | | 2 | CC_items | ecommerce.items | 購入された商品情報 | | 3 | CC_transaction_id | ecommerce.transaction_id | 注文番号 | | 4 | CC_value | ecommerce.value | 購入金額 |
GTMにてトリガーの設定をする
-
トリガー > 新規 を選択
-
トリガーの設定 にカーソルを合わせて編集ボタンを押す
-
カスタムイベント を選択
-
以下表とキャプチャを参照のうえ設定して保存する
項目 値 トリガー名 cc_purchase ※任意で変更可能 イベント名 cc_purchase このトリガーの発生場所 一部のカスタムイベント 設定 Page URL に 含む 値 commchat_thank_you 備考 cc_purchaseというイベントが出力されており、かつURLに「commchat_thank_you」という文字列が含まれる という条件になる つまりCommChat経由でCVが発生した顧客ブラウザでの表示をトリガー条件としている
GTMの公開設定をする
-
必要に応じてプレビューで確認のうえ、公開を選択
