Googleタグマネージャーのカスタムピクセル
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を使用して、どのコンテナにデータを送信し、どのタグ、トリガー、変数を使用するかを決定します。
- Googleタグマネージャーアカウントを開き、カスタムピクセルを設定するアカウントを選択する。
- 「管理」をクリックしてから、「Googleタグマネージャーをインストール」をクリックしてインストールコードを開きます。
- ページのheadセクションに属するコードブロックをコピーします。
- このコードブロックからHTMLタグを削除します。
- 残りのコードを新たなShopifyカスタムピクセルに挿入します。
Step 2: Shopify管理画面でカスタムピクセルを設定する
- Shopify管理画面 → 設定 → お客様のイベント -> カスタムピクセルを追加します。
- ステップ１のGoogleタグマネジャーコードを追加します。
- window.dataLayer = window.dataLayer || []; としてdataLayerオブジェクトを初期化します。
- データレイヤーとは、ユーザーがウェブサイト上で行った操作に関する情報を含む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管理画面からカスタムピクセルの例
Step 4:Googleタグマネジャーでタグを設定する
Googleタグマネジャーでタグを設定して、Googleアナリティクス上にお客様イベントを表示するようにします。
1. Googleアナリティクスから測定IDを取得する
- Googleタグマネジャー上でのタグ設定する前にGoogleアナリティクス上から測定 IDを取得します。GoogleアナリティクスIDはGoogleタグマネジャーとGoogleアナリティクスの接続に必要です。
- Googleアナリティクス → データストリーム → ウェブ ストリームの詳細から測定 IDを取得します。
2. Googleタグマネジャー上でタグを設定する
タグは、ページビュー、クリック、フォーム送信、購入などのさまざまなユーザーのインタラクションやイベントを追跡するために使用できます。今回のガイドでは、商品閲覧のイベントに使用しています。
Googleタグマネジャーでは、タグはトリガーに関連付けられ、タグが発動するタイミングを決定します。トリガーの設定はステップ4で説明します。
タグの項目は以下の通りに設定します。
- タグタイプ = Googleアナリティクス: GA4イベント
- 設定タグ = なし - 手動設定したID
- 測定ID = Googleアナリティクスから取得した測定ID
- イベント名 = 任意の値
3. イベントパラメータを設定する
上記の項目を設定したら、イベントパラメータを設定します。イベントパラメータを設定するために変数を設定する必要があります。変数を設定するには、ワークスペース画面に戻り、変数 → ユーザー定義変数 → 新規に進みます。
変数の項目は以下の通りに設定します。
- 変数タイプ = データレイヤーの変数
- 変数名の記載は product_title - 自動的に{{product_title}}となります。
タグと変数の設定例
トリガー を設定する
Googleタグマネジャーでは、トリガーはタグに関連付けられ、タグは関連するトリガー条件が満たされた場合にのみ発動します。これにより、特定のユーザーのインタラクションやイベントを追跡し、Googleアナリティクスなどにデータを送信して分析することができます。トリガーの項目は以下です。
- トリガーのタイプ = カスタムイベント
- イベント名 = product_viewed
- Shopify管理画面で登録されたイベント名と同じ
これでタグ、変数、トリガーの設定が完了です。Googleタグマネジャー管理に戻って右上からタグを『公開』してください。
Step 5: 検証
Googleタグマネジャーのカスタムピクセルの接続をテストします。パスワードでストアを保護したままテストする事が可能です。
- オンラインストアの商品ページに移動し、ページを数回リフレッシュする
- Googleアナリティクスのアカウントにログインし、レポート → リアルタイムに移動します
- 『1 分あたりのユーザー数』 の下にユーザーが表示されます
- 地図の下にある特定の顧客イベントがトラッキングされているかどうかを確認する
カスタムイベント
オンラインストアのテーマ、テーマアプリエクステンション、およびチェックアウトエクステンションからカスタムカスタマーイベントを公開できます。カスタムカスタマーイベントが公開されると、すべてのカスタムピクセルとアプリピクセルからアクセスできます。
カスタムイベントを作成する前に、標準イベントがあるかどうかを確認する事を推奨します。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タグマネジャー設定
上記の設定が完了しましたら、タグが発火されているかをGoogleアナリティクスの管理画面から確認できます。発火していましたら、以下のように comment、 extension pointのアクティビティが表示されます。
参考資料
- ヘルプセンターのGoogleアナリティクス4の設定のヒントとコツの内容もご確認ください。
- Web Pixel API参考資料
