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

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

カスタムピクセルとしてGoogleタグマネージャー (GTM) を使用して、外部サービスのピクセルを管理できます。

カスタムピクセルをテストする準備ができたら、Google Tag Assistant LegacyのChrome拡張機能を使用してカスタムピクセルをテストできます。Google Tag Assistantは、カスタムピクセルに対応していません。

目次

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

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

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

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

Googleタグマネージャーのカスタムピクセルを作成して、外部サービスのピクセルを管理することができます。

手順

  1. Googleタグマネージャーアカウントを開き、カスタムピクセルを設定するアカウントを選択します。
  2. [管理] をクリックしてから、[Googleタグマネージャーをインストール] をクリックしてインストールコードを開きます。
  3. ページのheadセクションに属するコードブロックをコピーします。
  4. コードブロックからHTMLタグを削除します。たとえば、<script></script>とします。
  5. 残りのコードを新たなShopifyカスタムピクセルに挿入します。
  6. お客様イベントに登録してGTMのdataLayerにプッシュします。
  7. 正しいコードを確認するには、「Googleタグマネージャーのカスタムピクセルの例」を参照してください。
  8. Googleタグマネージャーを設定してカスタムピクセルからのイベントを承認します。
  9. 任意：既存の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イベントのリスト
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) イベントパラメーターの例です。

GA4命名規則を使用したカスタムピクセルのdataLayerイベントの例
カスタムピクセルの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の拡張測定指標でも同じ追跡が可能です。

テストとデバッグ

  1. ChromeブラウザでShopifyストアを開きます。
  2. Google Tag Assistant LegacyのChrome拡張機能をブラウザに追加します。
  3. 拡張機能アイコンをクリックし、[有効にする] をクリックします。
  4. サイトに移動し、テストするイベントをトリガーします。
  5. 拡張機能で、[Googleタグマネージャー] タグをクリックします。[データレイヤー] セクションには、トリガーされたイベントのペイロードが表示されます。
  6. [Googleタグマネージャー] によって読み込まれる他のタグも、拡張機能に表示されます。これらのタグをクリックして、タグに送信されたデータを確認できます。

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

無料体験を試す