見出し画像

Shopifyカスタムピクセル+GTM+GA4(eコマース)

jizo

GTM(Google Tag Manager)を通してGA4(Google アナリティクス)のeコマース計測をShopifyストアで行う方法に関して、調査試作した際の情報と実装方法を記載します。

調査時に「ここをこうしたらどのような表示なるのか」という例もなく「今のこの作業には意味があるのか？」と悩むばかりでしたので、当記事ではなるべくその辺りの不満が解消されるように意図しています。

実現したいこと

  • ShopifyにてGTMを使用してGA4のeコマース計測を行いたい

  • 追加スクリプト廃止を前提に、カスタムピクセルでの実装を目指す

eコマース計測が不要で表示ページさえ計測できれば良い場合も、比較的簡易に対応できると思います。

カスタムピクセルに対する私見

調査施策を繰り返した結果以下のような状況だと考えており、思い通りに計測できないと認識しています。

  • 表示ページの計測は可能

  • eコマースに関してはドキュメントに従った完全な対応は困難か不可能

カスタムピクセルの問題点

サンドボックスのURLとは以下のような先頭にwpm@がつくURLを指しています。
この問題を解決する方法はあるので後ほど説明します。

/wpm@1a2b3c4d5e/custom/web-pixel-000000@00/sandbox/modern/products/商品名

//本来はブラウザに表示されるURLと同じ以下が期待される
/products/商品名

Shop Payは以下のようにテスト購入ができないため未確認です。

テストモードは、Shopify POSカードリーダー、Shop Pay、Shop Payの分割払い、またはPayPalウォレットのテスト決済では利用できません。

Shopify ペイメントのテスト

他にも以下のような複数の問題があります。

アプリでの対応が楽

手間を避けたい方は当記事を読まずアプリを利用することをお勧めします。
実際に計測テストは行なっていませんが下記などが検討できます。

不足する部分はあると思いますが、そこを改善しようとするとコストが相当にかかると思われるので割り切ることをお勧めします。

公式サンプル

https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

GTM用カスタムピクセルのサンプルコードが記載されていますので、知見があればこの情報で実装できるかもしれません。
GA4とカスタムピクセルのイベントの対応表も記載されてますが、こちらは表に従ってGTMのカスタムイベントで紐づければ概ねOKだと思います。

公式サンプルの問題点

  • 取得できる値の例示のような内容であり、GA4のeコマースに対応した書き方ではない

  • Google Consent Mode v2への対応に関して情報が不足している

公式サンプルコードをコピーペーストしただけでは役に立ちません。
ユーザーの個人情報を外部に送信するコードになっている点から考えても、あくまで参考資料と考えた方がよいです。

当記事サンプルの概要

対応しているGA4用eコマースイベント

上記ドキュメント内の以下に対応しています。

  • add_payment_info

  • add_shipping_info

  • add_to_cart

  • begin_checkout

  • page_view

  • remove_from_cart

  • view_cart

  • view_item

  • view_item_list

以下に関しては一応対応可能ですが、Shopify側が想定している形での実装方法ではないと思われます。
liquidを編集する必要もあるため、任意作業として分けて記載します。

  • select_item

未対応の問題点

  • 商品や送料から税を分離できない(=GTMの仕様に反する)

  • 「アイテムリスト→商品詳細→カート→購入」の流れが追えない

  • eコマース対応のイベントと値の全てに対応しているわけではない

税に関しては、税を含む価格設定の場合は以下のように、カスタムピクセルで税の把握は不可とのことです。

This means that tax amount is included into the line item price, and right now, there are no ways to track the tax amount in this situation inside web pixels.

Custom Web Pixel checkout_completed, can’t seem to get product value without tax

確認できていませんがこれらの問題はアプリでは解決できるかもしれず、より良い計測を行いたい場合はアプリによる対応をお勧めします。

その他の留意点

  • 商品と送料は税込設定を前提とし、越境ECと多通貨設定を視野に入れています

  • 当記事公開時点での調査試作に基づく一例であり、唯一の正解ではありません

  • サンプル使用に起因する問題が発生しても責任を負いかねますので、サンプルの使用は自己責任である点をご了承ください

  • 今後は誤字脱字などの簡易な修正以外は行わない予定です

  • 返金不可設定です


ここから先は

28,751字 / 16画像

¥ 1,000

この記事が気に入ったらチップで応援してみませんか？