Shopifyでのデータレイヤー設定方法とは?

Shopifyでデータレイヤーを設定したいみなさんこんにちは!
「拡張Eコマースイベントを計測したいなー」って考えた場合に、データレイヤーの開発が必要になります。今回は、Shopifyでのデータレイヤーの実装について解説していきます。

まずは、データレイヤーとは?という部分から見ていきます。

そもそもデータレイヤーとは?

Shopifyにデータレイヤーを導入したいとはいえ、そもそも データレイヤー・データレイヤー変数とはなにか、を解説していきます。

データレイヤーとは?

データレイヤーとは?

データレイヤーとはウェブサイトからGoogleタグマネージャーなどにサイトやページ情報を共有するためのJavascriptオブジェクトです。分かりやすく言うと、GTMに情報を渡すためのデータの一時保存場所のようなものです。

例えば、商品IDやトランザクションIDなどをGoogleタグマネージャーなどのサービスに明確に渡したい時に利用されます。

データレイヤー変数とは?

データレイヤー変数とはGoogleタグマネージャーなどに情報を渡すための変数です。

データレイヤー変数の例

以下のようなコードがHTMLに記載されているとします。
その場合、「items」や「item_name」がデータレイヤー変数となります。
また、「T-Shirt」は「item_name」に紐づく文字列の値となります

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "view_item",
  ecommerce: {
    items: [{
      item_name: "T-Shirt"
    }]}});

今回の例では、Googleタグマネージャーで「items」を読み込みたい場合は、「ecommerce.items」と設定する必要があります。

data_layer_1

Shopify でデータレイヤーを利用するメリット

  1. GA4やGoogle広告、Facebook広告の計測にあわせたフロントエンドの開発を減らせます
    エンジニアサイドはData layerに商品IDや金額をPushするだけで、残りの作業はマーケティングサイドでGTMを設定するだけになります。
  2. すべての計測タグをGTMで管理可能なため、計測サービスの増減に対応しやすくなります
    「GTM上で設定された計測タグでData layerの商品情報を読み込み → タグが発火」のような運用にになり、計測タグ自体はGTM上で管理することになります。

開発に関する補足

GA4などであれば、gtag.jsの実装を行うことで、商品情報を記録することは可能です。
しかし、「Facebook広告にも商品情報を送りたい」・「XXX広告にも商品情報を送りたい」などの要望がビジネスサイドから出てきた時にエンジニアが毎回対応する必要があります。

そこで、データレイヤーにあらかじめ商品情報をPushしておくことで、Googleタグマネージャーで計測タグを設定するだけでよくなります。

また、gtag.jsなど計測タグの設定が変わった際にエンジニアが再度実装するのは面倒です。
データレイヤーに商品情報がPushされていえれば、Googleタグマネージャーで計測タグの設定を変更するだけで済みます。

そのため、データレイヤーを使いこなすことで、マーケティングサイドのみで計測タグの設定や変更に対応できるため、作業効率が上がりやすくなります。

Shopify でのデータレイヤーの設定方法は?

Googleタグマネージャーのカスタムピクセルを作成する

手順

  1. Googleタグマネージャーを開き、カスタムピクセルを設定するアカウントを選択します。
  2. 「管理」をクリックしてから、「Googleタグマネージャーをインストール」 をクリックしてインストールコードを開きます。
  3. ページのheadセクションに属するコードブロックをコピーします。
  4. このコードブロックからHTMLタグを削除します。
  5. 残りのコードを新たなShopifyカスタムピクセルに挿入します。
  6. dataLayerオブジェクトを初期化します。
    1. window.dataLayer = window.dataLayer || [];と記述します。
  7. お客様イベントに登録してGoogleタグマネージャーのdataLayerにプッシュします。
  8. checkout.liquidファイルに、既存のdataLayer.push(event) 呼び出しがある場合は、それをanalytics.publish() に変更する必要があります。
  9. Googleタグマネージャーを設定してカスタムピクセルからのイベントを承認します。

Googleタグマネージャーのピクセルコードは次のように表示されます。GTM-XXXXXXXはGTMコンテナIDと同じです。

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

window.dataLayer = window.dataLayer || [];
// Note this is NOT a complete pixel. You still need to subscribe to events

お客様イベントに登録してGTMのdataLayerにプッシュする

dataLayer.push()の呼び出しをLiquidテンプレートファイルに追加する代わりに、GTM dataLayerのすべての作業をカスタムピクセルコードの中で実行できるようになります。

デフォルトでは、すぐに登録できるさまざまな標準カスタムイベントが用意されていますが、Liquidテンプレートファイルから独自のカスタムイベントを公開することも可能です。

以下は標準の「product_viewed」イベントに登録する例です。
このイベントは、エンドユーザーがある商品を閲覧(表示)したことを記録しています。

analytics.subscribe('product_viewed', (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_title': event.data.productVariant.title,
  });
});

このイベントがトリガーされると、イベントがdataLayerにプッシュされていて、商品のタイトルについてのパラメーターが渡されています。

Googleタグマネージャーのカスタムピクセルの例

Googleタグマネージャーのカスタムピクセルを簡略化したもので、GTMにデータを送信する方法を下記で示していきます。

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.productVariant.product.id,
   'product_title': event.data.productVariant.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.checkout.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

直前の例とは違い、商品のID・注文のID・通貨についてのパラメーターを渡しています。

Googleタグマネージャーを設定してカスタムピクセルからのイベントを受け付ける

直前の例のカスタムピクセルを設定した後で、Googleタグマネージャーでイベントを受けとれる設定を必要があります。Googleタグマネージャーのタグ、トリガー、データレイヤー変数を編集していきます。

Googleタグマネージャーを設定して、カスタムピクセルからのイベントを受け付ける方法はいくつかありますが、一例をピックしました。

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.checkout.order.id,
   'currency': event.data.checkout.currencyCode,
  });

上記の例でいうと、Googleタグマネージャーのカスタムイベントタイプでトリガーを設定し、イベントを 「checkout_completed」で設定します。このイベントは、エンドユーザーのチェックアウトが完了したことを知らせるものになります。
※イベント名は、カスタムピクセルのイベント名と一致すること

「order_id」および「currency」は、イベントからデータ取得するための変数となります。これらをプッシュするには、独自のデータレイヤー変数が必要です。

Shopify でのデータレイヤーの導入方法まとめ

今回の記事では、Shopifyにデータレイヤーを実装する方法について解説しました。
データレイヤーをShopifyに実装すれば、

  • ユーザーID
  • ページのカテゴリ
  • 拡張eコマース用のデータ

上記などのパラメータをGoogleTagManagerにわたすことが可能です。
これにより、精緻なデータ分析が可能になるので、自社のチャネル・ファネルにネックが合った場合に、即座に対応できるはずです。

データレイヤーを活用したデータ分析によって、どんどん売上を上げていきましょう。

弊社のサービスしているShopifyアプリ「Pafit Tag Management for GTM」では、Shopifyテーマへのデータレイヤーの埋め込みとGTMのタグ・トリガー作成を自動で行うことが可能です。
Yahoo広告やLINE広告、Twitter広告においても対応が可能なので、ぜひご検討くださいませ。

Googleタグマネージャーの設定とGA4・Facebook広告などのデータ収集を簡単にするアプリ| Shopify アプリストア

どの広告媒体でも、「カート追加」や「商品ページ閲覧」などのイベント・パラメーターがpushできる汎用的なデータレイヤーを用意しています。
Pafit Tag Management for GTMで対応していない広告媒体でも、すぐに設定が可能になるでしょう。

👇便利なShopifyアプリのご紹介👇

タイトルとURLをコピーしました