Googleタグマネージャーのカスタムピクセルを作成する
カスタムピクセルとしてGoogleタグマネージャー (GTM) を使用して、外部サービスのピクセルを管理できます。
カスタムピクセルをテストする準備ができたら、Google Tag Assistant LegacyのChrome拡張機能を使用してカスタムピクセルをテストできます。Google Tag Assistantは、カスタムピクセルに対応していません。
カスタムピクセルを作成する準備を行う
Googleタグマネージャーを使用してカスタムピクセルを作成する前に、以下の情報を確認し、ピクセルの設定方法を理解するようにしてください。
- Googleタグマネージャーアカウントを作成または開設し、GTMコンテナIDを取得します。
- セキュリティを高めるため、サンドボックスに読み込まれたタグマネージャーには他のピクセルと同じ制限が課されます。ピクセルのサンドボックスでの制限について詳しくはこちらをご覧ください。
Googleタグマネージャーのカスタムピクセルを作成する
Googleタグマネージャーのカスタムピクセルを作成して、外部サービスのピクセルを管理することができます。
手順
- Googleタグマネージャーアカウントを開き、カスタムピクセルを設定するアカウントを選択します。
- [管理] をクリックしてから、[Googleタグマネージャーをインストール] をクリックしてインストールコードを開きます。
- ページの
head
セクションに属するコードブロックをコピーします。 - コードブロックからHTMLタグを削除します。たとえば、
<script></script>
とします。 - 残りのコードを新たなShopifyカスタムピクセルに挿入します。
- お客様イベントに登録してGTMのdataLayerにプッシュします。
- 正しいコードを確認するには、「Googleタグマネージャーのカスタムピクセルの例」を参照してください。
- Googleタグマネージャーを設定してカスタムピクセルからのイベントを承認します。
- 任意:既存の
dataLayer.push
(event) 呼び出しがcheckout.liquid
ファイルにある場合、それをanalytics.publish() に変更します。
お客様イベントに登録してGTMのdata layerにプッシュする
カスタムピクセルコードのGTM dataLayer
を使用して、お客様イベントに登録することができます。
デフォルトでは、登録できるさまざまな標準イベントが用意されています。ただし、標準イベントのオファーの一部ではないお客様イベントを追跡する場合は、Liquidテンプレートファイルから独自のカスタムイベントを公開できます。
以下は標準の「product_viewed」イベントに登録する例です。このイベントは誰かが商品を表示したことを示しています。このイベントがトリガーされると、イベントがdataLayer
にプッシュされます。
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
product_title: event.data?.productVariant?.title,
});
});
この例では、商品名がイベントペイロードに引き継がれます。Googleタグマネージャーの変数を使用して、選択したタグのイベントペイロードから商品名を取得できます。
Googleタグマネージャーのカスタムピクセルの例
以下の例は、Googleタグマネージャーのカスタムピクセルを簡略化したもので、Googleタグマネージャーにデータを送信する方法を示しています。さらに多くのイベントをdataLayer
に追加するため、もっと多くの標準イベントとカスタムイベントに登録できます。
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
//Initialize GTM tag
(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');
//Google Consent Mode v2
gtag('consent', 'update', {
'ad_storage': 'granted',
'analytics_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
});
//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("payment_info_submitted", (event) => {
window.dataLayer.push({
event: "payment_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_shipping_info_submitted", (event) => {
window.dataLayer.push({
event: checkout_shipping_info_submitted,
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_address_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_address_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_contact_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_contact_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("checkout_started", (event) => {
window.dataLayer.push({
event: "checkout_started",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.subscribe("product_added_to_cart", (event) => {
window.dataLayer.push({
event: "product_added_to_cart",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
price: event.data?.cartLine?.merchandise?.price?.amount,
currency: event.data?.cartLine?.merchandise?.id,
product_title: event.data?.cartLine?.merchandise?.product?.title,
quantity: event.data?.cartLine?.quantity,
total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
});
});
analytics.subscribe("cart_viewed", (event) => {
window.dataLayer.push({
event: "cart_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
total_cost: event.data?.cart?.cost?.totalAmount?.amount,
quantity: event.data?.cart?.totalQuantity,
cart_id: event.data?.cart?.id,
});
});
analytics.subscribe("page_viewed", (event) => {
window.dataLayer.push({
event: "page_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
page_title: event.context.document.title,
});
});
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
product_id: event.data?.productVariant?.product?.id,
product_title: event.data?.productVariant?.title,
product_sku: event.data?.productVariant?.sku,
});
});
analytics.subscribe("search_submitted", (event) => {
window.dataLayer.push({
event: "search_submitted",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
query: event.data?.searchResult?.query,
});
});
analytics.subscribe("collection_viewed", (event) => {
window.dataLayer.push({
event: "collection_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
collection_id: event.data?.collection?.id,
collection_title: event.data?.collection?.title,
});
});
Googleタグマネージャーを設定してカスタムピクセルからのイベントを受け付ける
カスタムピクセルを作成した後で、Googleタグマネージャーを設定してカスタムピクセルからのイベントを受け付ける必要があります。これを行うには、Googleタグマネージャーのタグ、トリガー、dataLayer
変数が必要です。
以下の表は、標準的な一部のお客様イベントとそれに該当するGoogleタグマネージャーのイベントの例です。
Shopifyイベント | トリガー | GTMイベント |
---|---|---|
payment_info_submitted | 決済情報を送信する | add_payment_info |
checkout_address_info_submitted | 配送情報を送信する | add_shipping_info |
product_added_to_cart | ショッピングカートにアイテムを追加する | add_to_cart |
checkout_started | チェックアウトを開始する | begin_checkout |
checkout_completed | チェックアウトを完了する | 購入 |
product_removed_from_cart | カートからアイテムを削除する | remove_from_cart |
cart_viewed | ショッピングカートを表示する | view_cart |
product_viewed | 商品の詳細ページを表示する | view_item |
collection_viewed | アイテムのリストを表示する | view_item_list |
カスタムピクセルのdataLayer
イベントが処理されるようにするには、GTMタグイベントのパラメーターが想定される命名規則と一致する必要があります。
以下は、一部のカスタムピクセルのdataLayerイベントプロパティと、それに該当するGoogleアナリティクス4 (GA4) イベントパラメーターの例です。
カスタムピクセルのdataLayer イベント |
GA4イベントパラメーター |
---|---|
event.data?.checkout?.currencyCode | currency |
event.data?.checkout?.totalPrice?.amount | value |
event.data?.checkout?.order?.id | transaction_id |
event.data?.checkout?.discountAllocations | coupon |
event.data?.checkout?.shippingLine?.price?.amount | shipping |
event.data?.checkout?.totalTax | tax |
event.data?.checkout?.lineItems | items |
以下は、checkout_completedイベントを使用した例です。
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
price: event.data.checkout.totalPrice.amount,
shippingLine: event.data.checkout.shippingLine.price.amount,
totalTax: event.data.checkout.totalTax,
});
});
Googleタグマネージャーのトリガーは、カスタムイベントタイプで、イベント名は [checkout_completed] です。トリガーの [イベント名] フィールドは、カスタムピクセルのイベントキーと一致する必要があります。
[orderId] および [currency] は、イベントからデータを取得するためにGoogleタグマネージャーで使用する変数です。これらは、GoogleタグマネージャーでdataLayer
変数にマッピングすることができます。各イベント変数には、独自のdataLayer
変数が必要です。すべてのカスタムイベントで起動するトリガーを設定します。
作成したトリガーを使用するタグを作成します。イベントパラメーターに、取得する変数を追加します。上記の例では、[orderId]、[currency]、[price]、[shippingLine]、[totalTax] が、dataLayer
変数として設定されます。タグが起動するたびに、イベントでこれらのdataLayer
変数が取得されます。
データ移行を行うには、Googleタグマネージャーで少なくとも1つのタグとトリガーを設定する必要があることにご注意ください。
以前のdataLayer.push(event) 呼び出しをanalytics.publish() に変更する
Googleタグマネージャーを設定したことがある場合、dataLayer.push
の呼び出しをShopify.analytics.publish()
の呼び出しに変更する必要があります。テーマエディタの [レイアウト] セクションで、theme.liquidファイルのdataLayer.push
の呼び出しを検索できます。
また、checkout.liquid
のdataLayer.push
の呼び出しも変更する必要があります。ただし、checkout.liquid
はチェックアウトの拡張機能と互換性がないので、UI拡張機能を使用してデータをウェブピクセルにプッシュする必要があります。
theme.liquidファイルの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タグマネージャーには、すべてのイベントにステートフルなdataLayer
オブジェクトをプッシュする機能があります。Shopifyのピクセルサンドボックスに同等の機能は含まれていませんが、独自のデータオブジェクトを作成してカスタムイベントに渡すことで、同様の結果が得られます。
たとえば、いずれかのカスタムイベントが公開される前に「customData」オブジェクトを定義しておきます。
<script>
const customData = {email: customer.email}
</script>
次に、カスタムデータを含めたいときには、データを公開メソッドに渡します。
<script>
Shopify.analytics.publish('email_signup', customData);
</script>
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アナリティクス:GA4 Eventタグタイプを使用し、Event Nameをpage_viewに設定できます。タグのタイプとイベント名を設定してから、page_location用のパラメーターを追加し、値をカスタムピクセルからdataLayer
に渡したのと同じ値に設定する必要があります。
拡張測定
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の拡張測定指標でも同じ追跡が可能です。
テストとデバッグ
- ChromeブラウザでShopifyストアを開きます。
- Google Tag Assistant LegacyのChrome拡張機能をブラウザに追加します。
- 拡張機能アイコンをクリックし、[有効にする] をクリックします。
- サイトに移動し、テストするイベントをトリガーします。
- 拡張機能で、[Googleタグマネージャー] タグをクリックします。[データレイヤー] セクションには、トリガーされたイベントのペイロードが表示されます。
- [Googleタグマネージャー] によって読み込まれる他のタグも、拡張機能に表示されます。これらのタグをクリックして、タグに送信されたデータを確認できます。