ShopifyがGoogleAnalytics(UA)で送信している項目をメモする
koshiモチベーション
現在ShopifyのLiquidで運営しているストアをHeadless(Storefront API) にリニューアルするにあたり、GoogleAnalyticsの項目もなるべくそのまま移行したい。
Shopify × GoogleAnalyticsでは管理画面にトラッキングコードを記載するとShopifyが勝手によしなにイベントを送信してくれるのだが、Headlessにするなら自分で設定しなければならない。
そこで、Shopifyがよしなにやっている部分、「どんなイベントを送信しているか」をメモし、移行の手助けとする。
(筆者はShopifyもGoogleAnalyticsもそこまで経験がないので、間違っていたらコメントをくれるとありがたいです...という保険)
koshi前提
- 2022年6月9日現在Shopifyは公式にはGA4には対応していない。
- ここで扱うのはGA4でなく、ユニバーサルアナリティクス(UA)
- 拡張eコマースも有効化しておく
(書いておいたほうがよさそうなことを思いついたら都度追記)
koshi事前設定
- GoogleAnalytics（UA, 拡張eコマースを有効化）
- Shopify管理画面でUAプロパティの入力、拡張eコマースを有効化
(書いておいたほうがよさそうなことを思いついたら都度追記)
koshiヘッドレス側の準備
今回、ユニバーサルアナリティクスイベントの送信には gtag.js を使うことにする。
ヘッドレスの環境で使うフレームワーク等にもよるが、例えば Next.js であれば gtag.js の設定方法は以下の記事などが参考になる。
koshi手動設定しなくてよさそうなもの
- チェックアウト画面
ヘッドレスとはいえ、チェックアウト画面はShopify側が用意したものを使う。
事前準備 ですでにUAプロパティは設定しているので、チェックアウト部分のイベントはShopify側で勝手にトラッキングしてくれる。
koshiShopify がどんなイベントを送信しているか、を把握するために使ったもの
少し調べた程度では、Shopifyがどんなイベントを送信してくれているか記載してあるドキュメントは見つからなかった。なので、自分で見つけるしかない。
その際に使ったツールは以下。
1. Google Analytics
まんまだが、Google Analyticsの [Behavior]→[Events]で記録されているイベントを参考にした。
2. (GoogleChrome拡張) Google Analytics Debugger
この拡張をオンにすることで、ConsoleでGTMやGAの振る舞いを観測できる。
ちなみに、この拡張でShopifyストアでのイベント送信を眺めると、どうやら analytics.js を使っているらしいことがわかる。つまり、今回は analytics.js から gtag.js に置き換える作業もしなければならない...面倒臭い...
koshi設定イベント: Shopify独自っぽいのイベント
GAのイベント欄を観ていると、Googleが推奨している拡張Eコマースイベントの他に、Shopifyが独自でイベントを送信しているように見える
これらのうち、チェックアウトやオーダーと記載されているものはShopifyチェックアウト画面にアクセスしているときに記録されるもの（と思う）ので、それ以外は手動で設定する。
Viewed Product
商品詳細の表示があったときに送信。
ga("send", "event", {eventCategory: "商品タイプ", eventAction: "Viewed Product", eventLabel: undefined, nonInteraction: true})
gtag('event', 'Viewed Product', {
event_category: "商品タイプ",
event_label: undefined,
non_interaction: true,
})
labelは合わせて undefined としたが、商品名くらい載っけてもいいかもしれない。
Added Product
商品がカートに追加されたら。
ga("send", "event", {eventCategory: "商品タイプ", eventAction: "Added Product", eventLabel: undefined, nonInteraction: true})
gtag('event', 'Added Product', {
event_category: "商品タイプ",
event_label: undefined,
non_interaction: true,
})
設定イベント: 拡張eコマース
参考: https://developers.google.com/analytics/devguides/collection/gtagjs/enhanced-ecommerce?hl=ja
筆者が運営しているストアで観測されたら記載していくので、他のストアやテーマでは違うかもしれない。
view_item
商品詳細を表示したとき
ga('ec:addProduct', {
'id': 'P12345',
'name': 'Android Warhol T-Shirt',
'category': 'Apparel',
'brand': 'Google',
'variant': 'black'
});
ga('ec:setAction', 'detail');
gtag('event', 'view_item', {
"items": [
{
"id": "P12345",
"name": "Android Warhol T-Shirt",
"list_name": "Search Results",
"brand": "Google",
"category": "Apparel/T-Shirts",
"variant": "Black",
"list_position": 1,
"quantity": 2,
"price": '2.0'
}
]
});
add_to_cart
商品をカートに入れたとき
ga('ec:addProduct', {
'id': product.id,
'name': product.name,
'category': product.category,
'brand': product.brand,
'variant': product.variant,
'price': product.price,
'quantity': product.qty
});
ga('ec:setAction', 'add');
gtag('event', 'add_to_cart', {
"items": [
{
"id": "P12345",
"name": "Android Warhol T-Shirt",
"list_name": "Search Results",
"brand": "Google",
"category": "Apparel/T-Shirts",
"variant": "Black",
"list_position": 1,
"quantity": 2,
"price": '2.0'
}
]
});
この２つは上記のShopify独自イベントと被っている気がするが、こちらは拡張EコマースなのでGAの[Behavior]→[Event]欄でなく[Conversions]→[Ecommerce]欄に表示されるものだと認識している。
(他のイベントも観測したら追記する。)
koshi参考文献