Liquid、JavaScriptなどに関する質問
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 → タグ
というデータ受け渡しの流れと理解しました。
この理解で合っているかどうか、ご知見のある方いらっしゃいましたらご回答のほど、よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
下記の説明の箇所でしょうか?
以前の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)を利用してください。」
という意味に思います。
したがって、標準イベントには、カスタムデータを追加できませんので、その点だけご注意ください。
ご参考まで。
(キュー田辺)
成功
下記の説明の箇所でしょうか?
以前の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)を利用してください。」
という意味に思います。
したがって、標準イベントには、カスタムデータを追加できませんので、その点だけご注意ください。
ご参考まで。
(キュー田辺)
ご返信ありがとうございます。
私の認識が合っているとのご回答、ありがとうございます。
※「説明の箇所」「Shopify標準イベント」についての前提、いずれも認識されているとおりです。
Shopify標準イベントのみでいったんは完結しそうな見込みではありますが、
弊社GA4に実装されているカスタムイベントもこれから確認し、本当にShopify標準イベントだけで
足りるのかを判断していきたいと思います。
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024