🐼

ShopifyのGA4/GTMでpurchaceイベント

2022/10/07に公開

Google Analytics

2023年7月1日をもって、ユニバーサルアナリティクス（UA）が終了します。
まだまだ先じゃんと思いつつ、早めにGA4も設定しておきたいところです。

ところがShopifyがGA4対応してくれていません😢
（UAの場合、管理画面からGoogleアナリティクスアカウントを登録するとShopifyが自動でいい感じに設定してくれます）

そこで現状で出来ることをしておきたいと思います。

今回は下記を行いました。

GA4用コードの設置(GTM)
purchaceイベントの計測

GA4用コードの設置(GTM)

今回はGoogle Tag Manager(GTM)を使用して設置していきます。

ストア側はtheme.liqidに埋め込みます。

Plusじゃないと決済ページに埋め込めないので仕方なく、注文状況ページの追加スクリプトに設置します。

これで購入完了ページにGTMのコードが設置されます。

あとはGTM側でGA4タグを設置しましょう。

これで決済ページ途中を除きアクセスは計測できるようになりました。
あとはCV計測のためにpurchaseイベントくらいは取得しておきたいですね。

purchaceイベントの計測

注文状況ページの追加スクリプトではShopifyのオブジェクトがいくつか使用できます。

それを使いpurchaseイベントに必要な値をdataLayerに出力します。

コードはこちら

注文状況ページの追加スクリプト

<script>
var purchase_items = [];
{%- for item in checkout.line_items -%}
  var purchase_discount = 0;
  {% for discount_allocation in item.discount_allocations %}
  purchase_discount += {{ discount_allocation.amount | divided_by: 100.00 }};
  {% endfor %}
  var item = {
    'item_id': '{{ item.id }}',
    'item_name': '{{ item.title }}',
    'item_variant': '{{ item.variant.title }}',
    'price': {{ item.final_price | divided_by: 100.00}},
    'discount': purchase_discount,
    'quantity': {{ item.quantity }},
  }
  purchase_items.push(item);
{% endfor %}

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'purchase',
  'ecommerce': {
    'transaction_id': '{{ checkout.id }}',
    'currency': '{{ checkout.currency }}',
    'value': {{ checkout.total_price| divided_by: 100.00 }},
    'shipping': {{ checkout.shipping_price| divided_by: 100.00 }},
    'tax': {{ checkout.tax_price| divided_by: 100.00 }},
    'items': purchase_items
  }
});
</script>

あとはGTMでdataLayerを受け取りeventを発火すればOKです！

変数

まずは変数を定義

ecommerce.currency
ecommerce.items
ecommerce.shipping
ecommerce.tax
ecommerce.transaction_id
ecommerce.value

トリガー

そしてトリガーの設定