【初心者向け】ShopifyのカスタムピクセルでGTMのデータレイヤーにイベントを送る方法

ShopifyでGoogleタグマネージャー (GTM) を利用したトラッキングを設定したいと考えている方に向けて、Shopifyのカスタムピクセル機能を使ってイベント情報をGTMのデータレイヤー（dataLayer）に送信する方法を解説します。

1. 前提知識

• dataLayerとは：Googleタグマネージャーにデータを渡すための専用の「箱」（配列）です。GTMはこの「箱」（配列）に追加されたデータを順次読み取ります。

• window.dataLayer.push()とは：上記の「箱」にデータ（オブジェクト）を追加してGTMに渡すためのメソッドです。pushを呼ぶと、指定したデータがdataLayerに格納され、GTM側でその追加が検知されます。

• analytics.subscribe()とは：Shopifyが用意している関数で、「特定のイベント（例：product_viewed）が発生したらその情報を取得して処理を実行する」ための仕組みです。カスタムピクセル内でこの関数を使うことで、Shopify上の様々なお客様イベントに反応できます。

2. 手順

例えば、「お客様が商品ページを見たとき（Shopifyのproduct_viewedイベント発生時）に、その商品情報をGTMのデータレイヤーに送る」処理を実装したいとします。以下では、このケースを例に具体的な手順を説明します。

🔹Step1：dataLayerを用意する

まず、GTMでデータを受け取るための配列であるdataLayerをページ上に用意しておきます。カスタムピクセルのコード冒頭に、次の1行を記述してdataLayerを初期化します。

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

この1行でやっていることは、「まだdataLayerがなければ → 空の箱をつくる」「すでにあれば → そのまま使う」です。もしdataLayerが無いのに「データを入れよう（push）」とすると、JavaScriptがエラーになってしまうため、最初に「箱を用意しておく」ため初期化します。

🔹Step2：Shopifyのイベントを購読する

Shopifyでは、商品が閲覧された、カートに追加された、購入が完了した…などのタイミングでお客様イベントと呼ばれるイベントが発生します。analytics.subscribe() 関数を使うと、それらのイベントを「購読」して検知することができます。ここでは例として、商品ページが閲覧されたタイミング（Shopifyのproduct_viewedイベント）に反応するコードを書いてみます。以下のように、analytics.subscribe("product_viewed", ...)でイベントを購読します。

analytics.subscribe("product_viewed", (event) => {
  // ここで「何をするか」を書きます（＝コールバック関数）
});

これで、Shopify上でproduct_viewedイベントが発生したときに上記のコールバック関数が呼ばれる準備ができました。次の Step 3 では、このコールバック関数の中身として dataLayer.push() を実行します。

🔹Step3：コールバック関数で dataLayer.push() を書く

Step2で登録したコールバック関数の中で、Shopifyから渡されるイベント情報（eventオブジェクト）を使ってGTMにデータを渡します。具体的には、以下のようにwindow.dataLayer.push()で情報を格納します。

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed", // GTMでトリガーとして使うイベント名
    product_title: event.data?.productVariant?.title,
    product_id: event.data?.productVariant?.id,
    price: event.data?.productVariant?.price?.amount,
    currency: event.data?.productVariant?.price?.currencyCode
  });
});

これで、GTMは event: "product_viewed" という名前のイベントをデータレイヤー上で受け取れるようになります。

3. 仕組み

上記の流れをまとめると、次のようになります。

1. Shopifyで商品が見られる  ← お客様イベントが発生（product_viewed） 

2. analytics.subscribe("product_viewed", ...) が反応

3. window.dataLayer.push({ ... }) が実行される

4. Googleタグマネージャーがデータを受け取りタグ発火（例：GA4で view_item イベント送信）

GTMのデータレイヤーへ渡せるShopifyイベントは他にも多数あります。代表的なものと、その際に渡すと良い情報の例をまとめました。

※GTMに渡すevent名は任意で設定できます。また、Shopifyの標準イベントについては、公式ドキュメント「Standard Events」より確認頂けます。

4. テストのしかた

Shopify管理画面で 「設定」→「お客様イベント」 を開き、「カスタムピクセル」を新規追加して上記のコードを貼り付けます。ピクセルの名前（例：「GTMデータレイヤー送信用」など）を付けて保存します。

カスタムピクセルの作成後、Shopify管理画面のそのピクセル設定画面で 「テスト」 ボタンをクリックしてプレビューモードを開始します。

テスト用のストアページが開くので、Shopify Pixel Helperを使用して、対象イベント（例：商品ページ閲覧時にproduct_viewedイベント）がエラーなく送信されているか確認します。

5. App Unity Trackingを使えばもっと簡単に！

Shopifyのカスタムピクセルを使えば手動でコードを書いてGTMにイベントを送信することが可能です。ただし、「自分でコードを書くのは不安…」「広告媒体ごとにイベント設定を管理するのは大変…」 という方も多いと思います。

もし「ShopifyとGTMの連携をもっと簡単に、確実に」したいなら、App Unity Tracking を導入することで、手作業での設定が不要になり、広告計測やGA4イベントの取得もスムーズに進められます。

App Unity Trackingの特徴

• ノーコードで広告・解析タグを設置
  Shopify管理画面から数クリックでGoogle、Meta、Yahoo、LINEなどの広告タグを導入できます。

• データレイヤー連携に対応
  GA4やGTMとの連携にも対応しており、本記事で紹介したような「dataLayer.push()でイベントを渡す仕組み」をアプリが自動的に処理してくれます。

• 最新仕様に追従
  ShopifyのカスタムピクセルやCheckout Extensibilityなど、最新のShopify仕様にもいち早く対応。常にアップデートされているので安心です。

• 複数媒体をまとめて管理
  Google広告、Meta広告、TikTok、LINE、Yahoo!広告など複数の媒体を1つのアプリで一元管理できます。

👉 詳しくはこちら：App Unity Tracking サービスサイト