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

このページはMar 23, 2023に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorialをご覧ください。

このページには、Googleタグマネージャー (GTM) をカスタムピクセルとして使用し、外部サービスのピクセルを管理する方法の手順が記載されています。

カスタムピクセルを作成する準備を行う

Googleタグマネージャーを使用してカスタムピクセルを作成する前に、以下の情報を確認し、ピクセルの設定方法を理解するようにしてください。

  • Googleタグマネージャーアカウントを作成または開設し、GTMコンテナIDを取得します。
  • セキュリティを高めるため、サンドボックスに読み込まれたタグマネージャーには他のピクセルと同じ制限が課されます。ピクセルのサンドボックスでの制限について詳しくはこちらをご覧ください。

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

手順

  1. Googleタグマネージャーアカウントを開き、カスタムピクセルを設定するアカウントを選択します。
  2. [管理] をクリックしてから、[Googleタグマネージャーをインストール] をクリックしてインストールコードを開きます。
  3. ページのheadセクションに属するコードブロックをコピーします。
  4. このコードブロックからHTMLタグを削除します。
  5. 残りのコードを新たなShopifyカスタムピクセルに挿入します。
  6. window.dataLayer = window.dataLayer || [];としてdataLayerオブジェクトを初期化します。

カスタムピクセルコードは次のように表示されます。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 || [];

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

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

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

以下は標準の「product_viewed」イベントに登録する例です。このイベントは誰かが商品を表示したことを示しています。このイベントがトリガーされると、イベントがdataLayerにプッシュされます。

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

この例では、商品のタイトルについてのデータが渡されています。Googleタグマネージャーの変数が使用され、他のタグに転送できます。

以前のdataLayer.push(event) 呼び出しをanalytics.publish() に変更する

これまでにGoogleタグマネージャーを設定したことがある場合は、dataLayer.pushの呼び出しをShopify.analytics.publish() の呼び出しに変更する必要があります。

dataLayerを使って追跡されたメールサインアップのカスタムイベントを単純化した例を以下に示します。

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

Shopifyでは次のようになります。カスタムピクセルにデータがプッシュされます。

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

続いて、カスタムピクセルコードに次のようなコードを追加します。

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

以前のdataLayer.push(data) を変更する

Googleタグマネージャーには、すべてのイベントにステートフルなデータレイヤーオブジェクトをプッシュする機能があります。Shopifyのピクセルサンドボックスに同等の機能は含まれていませんが、独自のデータオブジェクトを作成してカスタムイベントに渡すことで、同様の結果が得られます。

たとえば、いずれかのカスタムイベントが公開される前に「customData」オブジェクトを定義しておきます。

<script>
  const customData = {email: customer.email}
</script>

次に、カスタムデータを含めたいときには、データを公開メソッドに渡します。

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

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

以下の例はGoogleタグマネージャーのカスタムピクセルを簡略化したもので、GTMにデータを送信する方法を示しています。さらに多くのイベントをdataLayerに追加するため、もっと多くの標準イベントとカスタムイベントに登録できます。

(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.product.id,
   'product_title': event.data.product.title,
  });
});

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

Googleアナリティクス4の設定のヒントとコツ

Googleタグマネージャーをカスタムピクセルとして使用する場合は、以下に記載するGoogleアナリティクス4 (GA4) を設定するためのヒントを考慮してください。

クリーンなページURL

GA4がサンドボックス内で動作している場合は、ページURLにそのサンドボックスの情報が含まれることに気づくかもしれません。それらのURLからサンドボックスについての情報を取り除くには、GA4の自動ページ追跡をオフにし、標準のpage_viewedイベントを使って独自の追跡機能を実装できます。

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

独自のイベントをdataLayerに公開した後、page_viewedイベントをトリガーするGA4のpage_viewタグを作成できます。最も頻繁に用いられる方法として、Google Analytics: GA4 Eventタグタイプを使用し、Event Nameをpage_viewに設定できます。タグのタイプとイベント名を設定してから、page_location用のパラメーターを追加し、値をカスタムピクセルからデータレイヤーに渡したのと同じ値に設定する必要があります。

拡張測定

Shopifyのピクセルサンドボックス内にGA4を読み込む場合、通常は自動的に推定されるイベントを手動で設定することが必要になります。たとえば、GA4の拡張測定設定の一部であるアウトバウンドリンククリックは、カスタムピクセルを使用する場合、セキュリティ上の理由から自動的にトリガーされません。ただし、GA4の拡張測定イベントを自分でカスタムイベントとして実装することは可能です。

アウトバウンドリンククリックを追跡するコードを簡略化した例を以下に示します。

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

最後に、GTMでリンククリックをGA4に送るGA4タグを作成します。GA4の拡張イベントの命名方法に合わせ、イベント名を必ずclickにします。

Googleの拡張測定指標でも同じ追跡が可能です。

テストとデバッグ

  1. ChromeブラウザでShopifyストアを開きます。
  2. ブラウザの [ネットワーク] タブを開き、collect?...というリクエストを探します。GoogleタグマネージャーからGA4に送信されたデータであれば、その中にGA4の測定IDが含まれています。
  3. Googleアナリティクスのアカウントで [管理] をクリックしてから [デバッグビュー] をクリックします。
  4. GAデバッグGoogle拡張機能がChromeブラウザに追加されていることを確認します。
    • GAデバッグをオンにします。
    • Shopifyストアを別のタブで開きます。
    • デバッグビューでGA4に戻り、page_viewedイベントを確認します。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す