ShopifyにGTM経由でMixpanelを入れてイベントデータの計測をしてみた

ShopifyにGTM経由でMixpanelを入れてイベントデータの計測をしてみた

ShopifyにMixpanelを入れてみました!
Clock Icon2023.01.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ECサイトを簡単に開設できるShopifyに分析ツールのMixpanelをGTM経由で入れてイベントデータの計測をしてみました。
本記事では、その手順について紹介します。

Mixpanelについて

当記事はShopifyとMixpanelをすでにご存知の方向けの記事となります。
「Mixpanelとは何ぞや?」と疑問を持たれている方は以下記事をご覧ください。

この記事で学べること

本記事では以下のことをお伝えさせていただきます。

  • GTMでShopifyへのMixpanel組み込み
  • Mixpanelへのユーザー情報(IDと名前)の送信
  • Mixpanelへ訪問ページURLの送信

Mixpanelの組み込みはソース内に直接書き込むやり方ではなく、GTMを使った連携についての手順でお伝えします。

ShopifyにGTMタグの組み込み

GTM管理画面でGTMコードの発行

GTMでコンテナを作成するとGTMコードが発行されます。
以下のGTMタグマネージャーをインストールからGTMタグをコピーします。
mixgtm1

発行されたGTMの以下コードを指定の部分に書き込むためコピーします。
mixgtm2

Shopify管理画面でテーマのコードを編集

コピーしたGTMのタグをShopifyへペーストします。
Shopifyの管理画面から入りオンラインストア>テーマ>コードを編集に遷移します。
mixgtm3

Shopifyのtheme.liquidとpassword.liquidにGTMのコードをペーストします。
mixgtm4

今回はさらに、Shopifyのユーザー情報である個別IDと姓名をMixpanelに送信するため、datalayerの記述も追加します。
追加するのは以下の記述です。

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'ecommerce': '{{ customer.id }}',
  'firstname': '{{ customer.first_name }}',
  'lastname': '{{ customer.last_name }}'
});
</script>

追加する場合はhead内に加えたGTMのコードの上に追加します。

Shopifyの購買完了ページにも計測設定

テーマのコード編集ではShopify Plusの契約プランを除き、購買完了ページの計測ができません。
そのため、こちらではベーシックプランなどの方でもできるGTM組み込み手順をお伝えします。

Shopifyの管理画面>チェックアウトとアカウントの項目内にある追加スクリプトにGTMコードを貼り付けます。
mixgtm5

上記コードを貼り付け後、保存をすると購買完了ページでのGTM計測ができるようになります。

GTM画面での設定

GTMコードをShopifyサイトに組み込んだ後はGTMの管理画面でMixpanelタグの設定をします。

テンプレートの設定

テンプレートでMixpanelタグの作成を行います。
mixgtm6

テンプレートの作成については以下記事のインストール方法で詳細な手順が書いてありますので、ここでは割愛します。

変数の設定

datalayerで使うユーザー情報の変数を作成します。
作成する変数は以下3つです。

  • ecommerce…ユーザーを一意に識別するID
  • firstname…ユーザーの苗字
  • lastname…ユーザーの名前

作成手順は変数>新規をクリック。
mixgtm7

変数の設定でデータレイヤーの変数を選択します。
mixgtm8

選択後は変数名の設定を行います。
mixgtm9

タグの設定

変数を設定した後はタグの設定です。
今回計測するタグを以下3つ作成します。

  • mixpanel-identify…ユーザーIDの計測タグ
  • mixpanel-page…訪問ページの計測タグ
  • mixpanel-people…ユーザーの苗字と名前

mixpanel-identifyの作成例

タグ>新規をクリック。
mixgtm10

タグタイプでMixpanelを選択。
mixgtm11

タグの設定では各項目について以下を埋めます。

  • Project Token→Mixpanel設定画面にあるProject Token
  • Tag Type→identify
  • Unique ID (Optional)→データレイヤーの変数で決めたecommerceの変数名

トリガーの選択ではInitialization - All Pagesを選択します。

mixpanel-pageの作成例

タグ>新規をクリック。
mixgtm10

タグタイプでMixpanelを選択。
mixgtm11
タグの設定では各項目について以下を埋めます。

  • Project Token→Mixpanel設定画面にあるProject Token
  • Tag Type→-Track
  • Event Name→page_open
  • Parameter Name→page_url
  • Value→{{Page URL}}

トリガーの選択ではAll Pagesを選択します。

mixpanel-peopleの作成例

タグ>新規をクリック。
mixgtm10

タグタイプでMixpanelを選択。
mixgtm11

タグの設定では各項目について以下を埋めます。

  • Project Token→Mixpanel設定画面にあるProject Token
  • Tag Type→-People
  • Command→people.set
  • Property Name→$first_name
  • Value→データレイヤーの変数で決めたfirstnameの変数名
  • Property Name→$last_name
  • Value→データレイヤーの変数で決めたlastnameの変数名

トリガーの選択ではInitialization - All Pagesを選択します。

GTMの公開後はMixpanelをチェック

設定したGTMを公開後にMixpanelでデータの計測ができているか確認します。
Eventsを見るとpage_openとIdentifyの2つのイベントが計測されています。
mixgtm13

page_openをクリックするとユーザーの計測されたページやOS、国、デバイスなどが確認できます。
mixgtm14

さらに一意のIDであるDistinct IDをクリックするとユーザープロフィールの画面に遷移します。
こちらを見ると「masao kunisaki」という名前も計測できていることが確認できました。
mixgtm15

Reports>Insightsを見るとpage_openの日別推移グラフが見れます。
計測は設定後の日付から取得が可能になります。
mixgtm16

購買完了ページ訪問と全体ページ訪問の比較もできたりします。
mixgtm17

まとめ

以上、ShopifyとMixpanelのGTM連携の計測について紹介させていただきました。
ShopifyではIDや名前などすでに決められた変数があるので、それらをGTMで計測する際にデータレイヤーで変数化するのが少し手間かなと感じました。

今回計測できるようになった設定でどのような分析ができるかを次回以降お伝えできればと思います。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.