ピン留めされたアイテム

モチベーション

現在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側で勝手にトラッキングしてくれる。

koshi

Shopify がどんなイベントを送信しているか、を把握するために使ったもの

少し調べた程度では、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

商品詳細の表示があったときに送信。

analytics.js

ga("send", "event", {eventCategory: "商品タイプ", eventAction: "Viewed Product", eventLabel: undefined, nonInteraction: true})

gtag.js

gtag('event', 'Viewed Product', {
  event_category: "商品タイプ",
  event_label: undefined,
  non_interaction: true,
})

labelは合わせて undefined としたが、商品名くらい載っけてもいいかもしれない。

Added Product

商品がカートに追加されたら。

analytics.js

ga("send", "event", {eventCategory: "商品タイプ", eventAction: "Added Product", eventLabel: undefined, nonInteraction: true})

gtag.js

gtag('event', 'Added Product', {
  event_category: "商品タイプ",
  event_label: undefined,
  non_interaction: true,
})

koshi

設定イベント: 拡張eコマース

参考: https://developers.google.com/analytics/devguides/collection/gtagjs/enhanced-ecommerce?hl=ja

筆者が運営しているストアで観測されたら記載していくので、他のストアやテーマでは違うかもしれない。

view_item

商品詳細を表示したとき

analytics.js

ga('ec:addProduct', {
  'id': 'P12345',
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel',
  'brand': 'Google',
  'variant': 'black'
});

ga('ec:setAction', 'detail');

gtag.js

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

商品をカートに入れたとき

analytics.js

  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.js

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

ShopifyがGoogleAnalytics(UA)で送信している項目をメモする

モチベーション

前提

事前設定

ヘッドレス側の準備

手動設定しなくてよさそうなもの

Shopify がどんなイベントを送信しているか、を把握するために使ったもの

1. Google Analytics

2. (GoogleChrome拡張) Google Analytics Debugger

設定イベント: Shopify独自っぽいのイベント

Viewed Product

Added Product

設定イベント: 拡張eコマース

view_item

add_to_cart

参考文献