Basicプラン GTMタグ設置とGA4計測

[YSai]

お世話になります。

GTMタグ経由でGA4の計測を使用としています。しかし、theme.liquidとカスタムピクセルでGTMタグを設置したつもりなのですが、GA4の計測がうまくできておらず、解決方法を教えていただきたいです。

【 課題 】

・商品ページやカートページでGTMタグの設置、Googleタグの発火は確認できるが、GA4にデータが入らない（DebugViewやリアルタイムレポートにもpage_viewがあがってこない）

└GoogleタグのトリガーはAll Pages、測定IDは合っていることを確認、

・サンクスページではGTMタグが設置されていない

【 現在の状況 】

Basicプランを契約しており、theme.liquidにはGTMタグを設置し、トップページはGA4の計測を確認できました。

しかし、その他商品ページ、カートページ、サンクスページのGA4計測ができていません。

過去の質問やヘルプを調べてみたところ、サンクスページ（チェックアウトページ）についてはカスタムピクセルを使用しないといけないような記載を見つけました。

https://help.shopify.com/ja/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

https://community.shopify.com/post/2944561

カスタムピクセルにGTMコンテナコードのタグを外して貼り付け、接続をしました。

しかし、サンクスページではGTMタグが設置されていませんでした。

商品ページやカートページでのGA4の計測がされないのは、何かこちら側の確認が漏れている気がするのですが、サンクスページに関しては仕様を理解できておらず、解決方法を教えていただけると幸いです。よろしくお願いします。

[Qcoltd]

@YSai 様

theme.liquidでGTMタグを設定し、商品ページ、カートページでGA4の計測ができていない件ですが、

実際のコードを拝見できておりませんので推測となりますが、

theme.liquidでGTMタグがTOPページしか発火しない様なっていませんでしょうか。

カスタムピクセルをご利用で、サンクス画面でGA4が計測できていない場合は、

こちらも推測となりますが、下記のようなことが考えられます。

• カスタムピクセルが接続済みになっていない。
• 設定しているタグにGTMのコードが埋め込まれていない。
• 設定しているタグがcheckout_completedで動くように記載されていない。

また、GA4はGTM経由で計測しなければならない理由はありますでしょうか。
GTM経由で計測しなくても構わない場合は、Shopify app storeに掲載されている、

Google & YouTubeを利用すると下記の値は簡単に計測することが可能です。

• page_view（ページビュー）
• view_item（商品詳細の表示）
• add_to_cart（カートへの追加）
• begin_checkout（チェックアウトの開始）
• purchase（購入）

ご参考まで。

（キュー小坂）

[YSai]

@Qcoltd さま

ご回答ありがとうございます。

本日再度検証してみたところ、商品ページ、カートページでのデータがGA4のリアルタイムレポートとDebugViewに入ってきました。

カスタムピクセルが接続済みになっていない。

接続済みにはなっています。

設定しているタグにGTMのコードが埋め込まれていない。

下記コードは入れています（GTMコンテナID部分は対象のIDを入れています）

//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');

設定しているタグがcheckout_completedで動くように記載されていない。

下記コードでしたら、GTMのカスタムピクセル内に記述しておりますが、サンクスページでConsoleを確認したところdataLayerが出力されていませんでした。

//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,
  });
});

GA4はGTM経由で計測しなければならない理由はありますでしょうか

一部GTMでカスタムイベントを計測したく、そこまでJavascriptに明るいわけではないためGTM側で管理したい所存です。

Shopifyは極力GTMではなく、アプリ（一部有償）やdataLayerで極力済ませるような方向性なのでしょうか。

[Qcoltd]

@YSai 様

商品ページ、カートページでのデータがGA4のリアルタイムレポートとDebugViewに入ってきました。

こちらとれておりよかったです。

カスタムピクセルの記述につきましては、問題ないように見受けられます。

記載いただいた内容で、テストしてみたところ、ページビューなどのイベントは取れている様ですが、

データレイヤーで設定したものにつきましては、GTM側でデータを受けられるように設定を行う必要がありますが、

GTM側の設定は行われていますでしょうか。

以下GTMの設定例となります。

• データレイヤーの変数を設定する: GTMで「変数」の設定を行い、データレイヤーに渡されるデータを取得します。

  • GTM管理画面で「変数」を選択

  • 「新しい変数を作成」をクリック

  • 変数タイプとして「データレイヤー変数」を選択

  • Shopifyのカスタムピクセルが渡しているデータレイヤー変数名を入力 (例: transactionTotal、productID など)

• タグの設定: Shopify側から送られてきたデータを利用して、GTMでタグを設定します。

  • GTM管理画面で「タグ」を選択

  • 「新しいタグを作成」をクリック

  • 必要なタグタイプ (例: Google アナリティクス: GA4 イベント など) を選択

  • 先ほど設定したデータレイヤー変数を利用して、適切な値をタグに追加

• トリガーの設定: データレイヤーイベントが発生した際にタグを発動させるトリガーを設定します。

  • 「トリガー」セクションで新しいトリガーを作成

  • トリガータイプとして「カスタムイベント」を選択

  • Shopifyのカスタムピクセルが送信するイベント名を入力 (例: purchaseComplete など)

ご参考まで。

（キュー小坂）

[YSai]

@Qcoltd さま

お世話になっております。

ご返信、アドバイスありがとうございます。

上記にも記載の通り、dataLayerそのものが出力されておらず、また、サンクスページのソースを見てもGTMスニペットが埋まっていないようで手詰まりな状況です。

ShopifyのカスタムピクセルがGTMで言うカスタムHTMLタグに近いという認識ですが、サンクスページのGTMスニペットに関しては、theme.liquidとは別で、GTMスニペットをカスタマイズ（を外す）しないといけないということですよね。

checkout_completedについてはEコマース計測のpurchaseを取得したい人用のコードという認識で、こちらは今回はなくても良いかと思っています。

バグかと思い、別にテストアカウントを作成して同じことをやってみましたがうまくいきませんでした。。

[Qcoltd]

@YSai 様

上記にも記載の通り、dataLayerそのものが出力されておらず、また、サンクスページのソースを見てもGTMスニペットが埋まっていないようで手詰まりな状況です。

⇒サンクスページのソースはページのソースを表示（Chromeの場合）等で表示されていますでしょうか。

カスタムピクセルで作成したGTMのコードはサイトを描画後のiframe内に格納されていますので、上記方法ですとGTMのタグを確認することはできませんので、検証（Chromeの場合）等でコードを表示しご確認ください。

また、iframeで表示されている都合上、GTMのプレビューなどでの確認は現状対応していません。

ShopifyのカスタムピクセルがGTMで言うカスタムHTMLタグに近いという認識ですが、サンクスページのGTMスニペットに関しては、theme.liquidとは別で、GTMスニペットをカスタマイズ（を外す）しないといけないということですよね。

⇒はい、カスタムピクセルを出力する際、が邪魔となりますので、カスタマイズし設定する必要があります。

checkout_completedについてはEコマース計測のpurchaseを取得したい人用のコードという認識で、こちらは今回はなくても良いかと思っています。

⇒カスタムピクセルの発生イベントとしてShopifyが標準で用意しているイベントとしては下記URLに記載の15個が用意されています。

https://shopify.dev/docs/api/web-pixels-api/standard-events

checkout_completedはユーザーが購入を完了した際に発生するイベントで、通常サンクスページで発生します。（購入完了時の一度だけ）

ですので、サンクスページでカスタムピクセルを発生させたい場合は、checkout_completedをイベントとして設定することは望ましいともわれます。

ご自身で設定が難しい場合は、有料にはなってしまいますが、ご要望に合わせ設定のお手伝いをさせていただくことも可能です。

ご参考まで。

（キュー小坂）