FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

GTMのカスタムピクセル実装について

解決済

GTMのカスタムピクセル実装について

shi-shi-shimazu
観光客
7 0 5

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


上記ページ内にある見出し
以前のdataLayer.push(event) 呼び出しをanalytics.publish() に変更する』の
内容に関して質問です。

今回、弊社ECのカートシステムのみShopify Plusに移行します。

カート以降、特に購入完了ページでの各外部サービス(Yahoo広告、CRITEO広告、etc…)の
コンバージョン計測も移行する必要があり、それらの計測はGTMを通じて行う想定でおります。

それにあたり、GTMをShopifyに設定していきたいのですが、
上に書いた項の内容について正しく理解ができているかを確認したく質問となります。

この項に書いてあるのは、


『Shopify標準イベントには含まれていないようなデータをGTMに引き渡したい場合に必要な対応』

 

という認識で合っていますでしょうか?

公式のマニュアルをさらった限りでは、弊社の場合、Shopify標準イベントに用意されている
データだけで完結しそうなので、そのような場合は、この項に書いてあるような対応は必要ないと理解しました。

言い換えると、

●Shopify標準イベントに含まれるデータのみでokな場合
 GTMカスタムピクセル → GTM → タグ

●Shopify標準イベントに含まれないデータの取得が必要な場合
 theme.liquid → GTMカスタムピクセル GTM → タグ

というデータ受け渡しの流れと理解しました。

 

この理解で合っているかどうか、ご知見のある方いらっしゃいましたらご回答のほど、よろしくお願いいたします。

1 件の受理された解決策

Qcoltd
Shopify Partner
1290 513 494

成功

@shi-shi-shimazu 様

 

下記の説明の箇所でしょうか?

以前のdataLayer.push(event) 呼び出しをanalytics.publish() に変更する

Googleタグマネージャーを設定したことがある場合、dataLayer.pushの呼び出しをShopify.analytics.publish() の呼び出しに変更する必要があります。テーマエディタの [レイアウト] セクションで、theme.liquidファイルのdataLayer.pushの呼び出しを検索できます。

また、checkout.liquidのdataLayer.pushの呼び出しも変更する必要があります。ただし、checkout.liquidはShopify Extensionsと互換性がないので、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,
  });
});

 

この項に書いてあるのは、

> 『Shopify標準イベントには含まれていないようなデータをGTMに引き渡したい場合に必要な対応』

> という認識で合っていますでしょうか?

 

Shopify標準イベント、というのが、下記のページで紹介されているイベントのことを指している前提で回答いたします。

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

 

ご認識、合っているかと思います。

 

 

> ●Shopify標準イベントに含まれるデータのみでokな場合
>  GTMカスタムピクセル → GTM → タグ

> ●Shopify標準イベントに含まれないデータの取得が必要な場合
>  theme.liquid → GTMカスタムピクセル GTM → タグ

 

合っています。

 

 

なお、
質問者様は標準イベントと標準イベントで取得できるデータで十分なようなので、注意しなくても大丈夫なのですが、

ドキュメントに記載されている下記の「メモ」もお心に留めておいていただくと良いかもしれません。

 

メモ
現時点で、Shopifyは標準イベントへのカスタムデータ追加に対応していません。この機能が必要な場合は、カスタムイベントを公開して標準イベントを変更できます。

 

上記の日本語ですと、英語の翻訳が誤っているように思うので、英語のテキストも以下に記載します。

 

Note
Shopify doesn't support adding custom data to standard events at this time. If this is something you need, then you can publish your own custom events to replace standard events.

 

「現時点で、Shopifyは標準イベントへのカスタムデータ追加に対応していません。

 カスタムデータが必要な場合は、標準イベントの代わりに、カスタムイベント(Shopify.analytics.publish)を利用してください。」

という意味に思います。

したがって、標準イベントには、カスタムデータを追加できませんので、その点だけご注意ください。

 

ご参考まで。

 (キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1290 513 494

成功

@shi-shi-shimazu 様

 

下記の説明の箇所でしょうか?

以前のdataLayer.push(event) 呼び出しをanalytics.publish() に変更する

Googleタグマネージャーを設定したことがある場合、dataLayer.pushの呼び出しをShopify.analytics.publish() の呼び出しに変更する必要があります。テーマエディタの [レイアウト] セクションで、theme.liquidファイルのdataLayer.pushの呼び出しを検索できます。

また、checkout.liquidのdataLayer.pushの呼び出しも変更する必要があります。ただし、checkout.liquidはShopify Extensionsと互換性がないので、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,
  });
});

 

この項に書いてあるのは、

> 『Shopify標準イベントには含まれていないようなデータをGTMに引き渡したい場合に必要な対応』

> という認識で合っていますでしょうか?

 

Shopify標準イベント、というのが、下記のページで紹介されているイベントのことを指している前提で回答いたします。

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

 

ご認識、合っているかと思います。

 

 

> ●Shopify標準イベントに含まれるデータのみでokな場合
>  GTMカスタムピクセル → GTM → タグ

> ●Shopify標準イベントに含まれないデータの取得が必要な場合
>  theme.liquid → GTMカスタムピクセル GTM → タグ

 

合っています。

 

 

なお、
質問者様は標準イベントと標準イベントで取得できるデータで十分なようなので、注意しなくても大丈夫なのですが、

ドキュメントに記載されている下記の「メモ」もお心に留めておいていただくと良いかもしれません。

 

メモ
現時点で、Shopifyは標準イベントへのカスタムデータ追加に対応していません。この機能が必要な場合は、カスタムイベントを公開して標準イベントを変更できます。

 

上記の日本語ですと、英語の翻訳が誤っているように思うので、英語のテキストも以下に記載します。

 

Note
Shopify doesn't support adding custom data to standard events at this time. If this is something you need, then you can publish your own custom events to replace standard events.

 

「現時点で、Shopifyは標準イベントへのカスタムデータ追加に対応していません。

 カスタムデータが必要な場合は、標準イベントの代わりに、カスタムイベント(Shopify.analytics.publish)を利用してください。」

という意味に思います。

したがって、標準イベントには、カスタムデータを追加できませんので、その点だけご注意ください。

 

ご参考まで。

 (キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
shi-shi-shimazu
観光客
7 0 5

ご返信ありがとうございます。

私の認識が合っているとのご回答、ありがとうございます。

※「説明の箇所」「Shopify標準イベント」についての前提、いずれも認識されているとおりです。

 

Shopify標準イベントのみでいったんは完結しそうな見込みではありますが、

弊社GA4に実装されているカスタムイベントもこれから確認し、本当にShopify標準イベントだけで

足りるのかを判断していきたいと思います。