FROM CACHE - jp_header

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

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

Mshumsky
Shopify Staff
1 0 0

Google Tag Managerをカスタムピクセルとして実装するガイドを共有させていただきます。このガイドは補足的なものであり、公式のドキュメントではありません。ガイドの内容はShopifyカスタムピクセルの設定方法、GTMのタグや変数の設定やイベントをGoogle Analyticsに連携し表示する方法を説明しています。こちらは公式ガイドではないため、実装方法に関するサポートが必要な場合は、パートナーや他のコミュニティ投稿をご活用ください。

 

『デモはこちらからご参考ください』

 

概要

こちらの資料は、『Googleタグマネージャーのカスタムピクセルを作成する』の公式ドキュメントに補足するガイドです。内容は以下の手順を説明します。

  • Googleタグマネージャースクリプトと一意のコンテナIDを取得する
  • GoogleタグマネージャースクリプトをShopifyにカスタムピクセルとして設定する
  • お客様イベントにサブスクライブする
  • Googleアナリティクスダッシュボードでイベントを表示する

 

カスタムピクセルは、チェックアウトページや購入後ページなど、オンラインストアのさらに多くのページでお客様イベントを収集するのに役立ちます。要件を満たした利用可能なアプリピクセルがない場合は、ストアのカスタムピクセルを使用すれば、テーマコードを変更することなく、お客様イベントを追跡できます。

 

カスタムピクセルはLaxサンドボックスに読み込まれており、セキュリティを改善し、外部サービスに送信するデータを管理することを目的として設計されています。すべてのピクセル機能がサンドボックスで動作するわけではありません。サポートが必要な場合は、ご利用の外部サービスプロバイダーに問い合わせることが必要になる場合があります。ピクセルサンドボックスの制限について詳しくはこちらをご覧ください。

 

基本的なカスタマーイベントを取得するには、theme.liquidにGoogleタグマネージャーのスクリプトを追加することができますが、checkout.liquidはもう利用できないため、チェックアウトイベントはカスタムピクセルを介して登録する必要があります。また、theme.liquidやカスタムスクリプトに直接スクリプトを配置しないことを推奨しているため、チェックアウトイベントを登録する場合は、カスタムスクリプトを使用することをお勧めします。

 

条件: 

  • Googleタグマネジャーアカウント
  • Googleアナリティクスアカウント

以下から、Googleタグマネージャースクリプトの取得方法、カスタムイベントの登録、タグの設定、およびGoogleアナリティクス管理画面でのイベントの表示方法について説明します。

 

Step 1: Googleタグマネジャースクリプトを取得する

まずは、Googleタグマネージャーからスクリプトを取得します。Googleタグマネジャースクリプトには、各Googleタグマネジャーアカウントに紐づくGTMコンテナIDが含まれています。オンラインストアにGoogleタグマネジャースクリプトが追加されると、そのスクリプトはコンテナIDを使用して、どのコンテナにデータを送信し、どのタグ、トリガー、変数を使用するかを決定します。

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

Mshumsky_1-1689155128974.png

 

Step 2: Shopify管理画面でカスタムピクセルを設定する

  1. Shopify管理画面 設定 お客様のイベント -> カスタムピクセルを追加します。
  2. ステップ1のGoogleタグマネジャーコードを追加します。
  3. window.dataLayer = window.dataLayer || []; としてdataLayerオブジェクトを初期化します。
    1. データレイヤーとは、ユーザーがウェブサイト上で行った操作に関する情報を含むJavaScriptオブジェクトです。データレイヤーは、ウェブサイトとGoogleタグマネジャーの間しとして機能し、Googleタグマネジャーがデータレイヤー内のデータを使用してトラッキングピクセル、アナリティクスイベント、その他のマーケティングおよび広告ツールをトリガーすることができます。

サンプルコード

 

// Step 1. GTMコードからHTMLを抜いてコードを追加する 

(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-*****');

window.dataLayer = window.dataLayer || []; // Data Layer Objectを追加

 

 

 

Step 3: お客様イベントに登録する

 

イベントは、お客さんがオンラインストア上で実行する特定のアクションのことです。イベントは、カスタムJavaScriptコードによってトリガーされ、ユーザーの行動やエンゲージメントを追跡するために使用されます。オブジェクトとは、トリガーされたイベントに関する情報を含むデータです。オブジェクトは通常、データレイヤーにプッシュされ、イベントに関する名前、カテゴリー、およびカスタムデータなど、イベントに関するデータを表します。

 

イベントには標準イベントとカスタムイベントの2種類があります。標準イベントとそのオブジェクトにどのようなものが含まれるかに関しては、以下の参考資料を確認してください。

 

このステップでは、標準イベントのproduct_viewed イベントと product_title オブジェクトに登録します。カスタムイベントの登録方法については、本ドキュメントの「カスタムイベント」の章を参照してください。

 

[登録イベント参考資料]

[登録オブジェクト参考資料]

 

お客様がオンラインストア上で商品を閲覧すると、"product_viewed" イベントがトリガーされ、商品名 (product_title) がデータレイヤーに追加されます。最終的にGoogleアナリティクス上でお客様がオンラインストアでどの商品名を閲覧したかを確認できます。次からGoogleアナリティクスとGoogleタグマネジャーの接続に関して説明します。

 

product_viewイベントのサンプルコード

 

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

 

 

以下のコードはGoogleタグマネジャースクリプト、データレイヤーイベント、お客様イベントのコードです。このコードブロックをShopifyカスタムピクセルに追加します。

 

// Step 1. Add and initialize your third-party JavaScript pixel (make sure to exclude HTML)

(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-******');

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

// Step 2. Subscribe to customer events using the analytics.subscribe() API
//  analytics.subscribe("event_name", event => {
//    pixel("track", "event_name", event.data);
//  });
analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_title': event.data.productVariant.product.title,
  });
});

 

 

Shopify管理画面からカスタムピクセルの例

Screenshot 2023-05-24 at 18.40.04.png

 

Step 4:Googleタグマネジャーでタグを設定する

Googleタグマネジャーでタグを設定して、Googleアナリティクス上にお客様イベントを表示するようにします。

 

1. Googleアナリティクスから測定IDを取得する

  • Googleタグマネジャー上でのタグ設定する前にGoogleアナリティクス上から測定 IDを取得します。GoogleアナリティクスIDはGoogleタグマネジャーとGoogleアナリティクスの接続に必要です。
  • Googleアナリティクス データストリーム ウェブ ストリームの詳細から測定 IDを取得します。

 

Screenshot 2023-05-24 at 18.47.58.png

 

 

2. Googleタグマネジャー上でタグを設定する

タグは、ページビュー、クリック、フォーム送信、購入などのさまざまなユーザーのインタラクションやイベントを追跡するために使用できます。今回のガイドでは、商品閲覧のイベントに使用しています。

Googleタグマネジャーでは、タグはトリガーに関連付けられ、タグが発動するタイミングを決定します。トリガーの設定はステップ4で説明します。

タグの項目は以下の通りに設定します。

  • タグタイプ = Googleアナリティクス: GA4イベント
    • 設定タグ = なし - 手動設定したID
    • 測定ID = Googleアナリティクスから取得した測定ID
    • イベント名 = 任意の値

 

Screenshot 2023-05-24 at 19.07.03.png

3. イベントパラメータを設定する

上記の項目を設定したら、イベントパラメータを設定します。イベントパラメータを設定するために変数を設定する必要があります。変数を設定するには、ワークスペース画面に戻り、変数 ユーザー定義変数 新規に進みます。

 

変数の項目は以下の通りに設定します。

  • 変数タイプ = データレイヤーの変数
  • 変数名の記載は product_title - 自動的に{{product_title}}となります。

Screenshot 2023-05-24 at 19.03.21.png

タグと変数の設定例

Screenshot 2023-05-24 at 19.12.09.png

トリガー を設定する

Googleタグマネジャーでは、トリガーはタグに関連付けられ、タグは関連するトリガー条件が満たされた場合にのみ発動します。これにより、特定のユーザーのインタラクションやイベントを追跡し、Googleアナリティクスなどにデータを送信して分析することができます。トリガーの項目は以下です。

 

  • トリガーのタイプ = カスタムイベント
  • イベント名 = product_viewed 
    • Shopify管理画面で登録されたイベント名と同じ

Screenshot 2023-05-17 at 19.23.21.png

 

これでタグ、変数、トリガーの設定が完了です。Googleタグマネジャー管理に戻って右上からタグを『公開』してください。

 

Step 5: 検証

Googleタグマネジャーのカスタムピクセルの接続をテストします。パスワードでストアを保護したままテストする事が可能です。

  1. オンラインストアの商品ページに移動し、ページを数回リフレッシュする
  2. Googleアナリティクスのアカウントにログインし、レポート リアルタイムに移動します
  3. 『1 分あたりのユーザー数』 の下にユーザーが表示されます
  4. 地図の下にある特定の顧客イベントがトラッキングされているかどうかを確認する

 

カスタムイベント

オンラインストアのテーマ、テーマアプリエクステンション、およびチェックアウトエクステンションからカスタムカスタマーイベントを公開できます。カスタムカスタマーイベントが公開されると、すべてのカスタムピクセルとアプリピクセルからアクセスできます。

 

カスタムイベントを作成する前に、標準イベントがあるかどうかを確認する事を推奨します。Shopifyは、オンラインストア、チェックアウト、および注文ステータスページで利用可能なの標準イベントを公開しています。公開されている標準イベントに関してこちらをご確認ください。

 

カスタムイベント公開

analytics.publishメソッドは、カスタムイベントを公開するために利用できます。analytics.publishメソッドは、event_nameとevent_dataをパラメーターとして受け取ります。

 

パラメータ

タイプ

詳細

event_name

String

一つのイベント名及びグループイベント名

event_data

Object

イベントに関するメタデータ

 

オンラインストアでは、Shopifyオブジェクト上のanalytics.publishメソッドにアクセスできます。

 

カスタムイベントを作成する前に、標準イベントがあるかどうかを確認する事を推奨します。Shopifyは、オンラインストア、チェックアウト、および注文ステータスページで利用可能なの標準イベントを公開しています。公開されている標準イベントに関してこちらをご確認ください。

 

カスタムイベント公開

analytics.publishメソッドは、カスタムイベントを公開するために利用できます。analytics.publishメソッドは、event_nameとevent_dataをパラメーターとして受け取ります。

 

パラメータ

タイプ

詳細

event_name

String

一つのイベント名及びグループイベント名

event_data

Object

イベントに関するメタデータ

 

オンラインストアでは、Shopifyオブジェクト上のanalytics.publishメソッドにアクセスできます。

 

<script>Shopify.analytics.publish("my_custom_event", my_event_data);</script>

 

チェックアウトでは、チェックアウトUI Extensionからカスタムイベントを公開できます。詳細については、analytics checkout extension pointを確認してください。

 

analytics.publish("my_custom_event", my_event_data);

 

カスタムイベント登録

カスタムイベントは、スタンダードイベントと同様に登録できます。カスタムイベントに公開されたすべてのものは、customDataフィールドに追加されます。

 

 

 

 

// Publish from Checkout Extension
analytics.publish('my_custom_event', {
  foo: {
    bar: '123',
  },
  abc: {
    def: 'geh',
  },
});
// Subscribe from web pixel app extension
analytics.subscribe("my_custom_event", (event) => {
  /*
    event = {
      id: "123",
      clientId: "2cabc5d8-e728-4359-9173-4b31265cbac0",
      name: "my_custom_event",
      timestamp: "2011-10-05T14:48:00.000Z",
      context: { ... },
      customData: {
        foo: { bar: '123' },
        abc: { def: 'geh' }
      }
    }
  */
});

 

 

 

 

 

チェックアウトカスタムイベント事例

こちらはカスタムチェックアウトイベントであり、Checkout UI Extensionで2つのカスタムイベントを登録しています。1つ目は、extension_point : イベントがトリガーされたエクステンションイントポイント名です。エクステンションイントポイントに関して、こちらをご確認ください。2つ目のカスタムイベントは、comment:イベント(checkout_custom_event)に関連するコメントです。

 

カスタムイベント登録

analytics.publish("checkout_custom_event", {"extension_point": `${extension_point}`, "comment": `${comment}`});

 

Checkout UI Extension - index.jsxコード

 

 

 

 

import React from "react";
import {
 render,
 useExtensionApi,
 Banner,
} from "@shopify/checkout-ui-extensions-react";
// Set the entry points for the extension
render("Checkout::Dynamic::Render", () => <App />);
render("Checkout::DeliveryAddress::RenderBefore", () => <App />);
function App() {
 // Fire extra pixel
 const {extensionPoint} = useExtensionApi();
 fire_pixel(extensionPoint, "extra pixel fired");
 // Render the banner
 return (
   <Banner title = {extensionPoint}>
     Custom pixel fired here!
   </Banner>
 );
}
function fire_pixel(extension_point, comment) {
 const {analytics} = useExtensionApi();
 analytics.publish("checkout_custom_event", {"extension_point": `${extension_point}`, "comment": `${comment}`});
}

 

 

 

 

 

Shopifyカスタムピクセルコード

 

 

 

 

analytics.subscribe('checkout_custom_event', (event) => {
  window.dataLayer.push({
   'event': 'checkout_custom_event',
   'page_location': event.context.window.location.href,
   'extension_point': event.customData.extension_point,
   'comment': event.customData.comment,
  });
});

 

 

 

 

 

Googleタグマネジャー設定

Screenshot 2023-07-12 at 19.17.32.png

上記の設定が完了しましたら、タグが発火されているかをGoogleアナリティクスの管理画面から確認できます。発火していましたら、以下のように comment、 extension pointのアクティビティが表示されます。

Screenshot 2023-07-12 at 19.18.40.png

参考資料

 

 

 

 

To learn more visit the Shopify Help Center or the Community Blog.

0件の返信0