Shopify Plusへのプラン変更後、サンクスページでGTMのコンバージョンタグが発火しない問題についての技術的な相談。
問題の原因:
checkout_completedイベントのサブスクライブが必要解決方法:
analytics.subscribe("checkout_completed", (event) => {...})を使用/checkouts/cn/xxx/thank_you形式のため、page_viewedイベントでの条件分岐には注意が必要追加の課題:
議論は継続中で、完全な解決には至っていない状況。
shopify plusにプラン変更後、GTMのタグの再設定をしたのですが、サンクスページだけ機能せず、コンバージョンタグが発火しなくなりました。
Shopify管理画面 → 設定 → お客様のイベント → カスタムピクセルにGTMタグを追加するだけではサンクスページは不充分なのでしょうか？
どうすれば良いかご教示よろしくお願い致します。
＜設定方法について＞
設定は下記ページを参考にGTMタグの設置を行いました。
＜参考：Googleタグマネージャーのカスタムピクセル＞
＜その他の設定について＞
・チェックアウト拡張機能へのアップグレードも行いました。
・サンクスページのURLの最後が 「/thank_you」から「/thank-you」に変更になったのでトリガーも「page URL」を「/thank-you」含むに変更しました。
@kousaka 様
設定されている内容にもよるのですが、
checkout_completedをサブスクライブされていない、ということはないでしょうか？
カスタムピクセルを下記のように設定されるとサンクスページでGTMタグを発火させることと同義になります。
analytics.subscribe("checkout_completed", (event) => {
// チェックアウト完了時の処理はこちらに記載する。
});
もし、上記のようにされている場合、スクリプトそのものに誤りがあるのだと思うのですが、
その場合は、スクリプトを拝見してみないと原因の特定が難しいです。
ご参考まで。
(キュー田辺)
ご返信ありがとうございます。
ご指摘のとおり、従来のGTMトリガーを使って発火させようとして失敗しておりました。
サブスクライブして発火させるように再設定して発火させることができるようになりました。
ご教示いただきありがとうございます。
御社のブログもとてもためになりますね！
いろいろ勉強させていただきます。
@Qcoltd 様
横から失礼します。
同様の問題に悩まされていまして、カスタムピクセルでGTMを発火させようとしているのですが、コンバージョンタグが発火しません。
GTMのプレビューモードだと確認できないので、Chrome拡張機能のGoogle Tag Assistant Legacyで確認していますが、サンクスページでもGTMのタグは確認されています。しかしながら、広告のコンバージョンタグは発火しておらず、現状成果計測ができていません。
今回の会話を見ると、トリガーをサンクスページのページビューに設定しているのが行けないのかもしれないと思いましたが、どのように設定するのが正しいのでしょうか？（「/thank-you」を含むページビューをトリガーにGoogle広告やYahoo広告のCVタグを発火しています）
また、同様にKARTEなどのタグもGTMにおいてAll Pagesのページビューをトリガーとしていますがこちらも何かしら変更したほうが良いのでしょうか？
ご確認のほど何卒よろしくお願いいたします。
@Emu1122 様
返信遅くなり申し訳ございません。
トリガーをサンクスページのページビューに設定しているのが行けないのかもしれないと思いましたが
こちらは、下記のように設定されているということでしょうか？
analytics.subscribe("page_viewed", (event) => {
if(event.context.window.location.pathname == '/thank_you') {
// コンバージョンタグ
}
});
この方法でもうまくいくかもしれませんが、
サンキュー画面のURLパスは、
/checkouts/cn/xxxxxxxxxxxxxxxxxxxxxxxxx/thank_you
のようになるはずですので、
上記のif文では条件一致しないはずです。
また、"xxxxxxxxxxxxxxxxxxxxxxxxx"の部分もチェックアウトのたびに変わりますし、
この方法はお勧めしにくいです。
コンバージョンを計測されるのでしたら、
analytics.subscribe("checkout_completed", (event) => {
// チェックアウト完了時の処理はこちらに記載する。
});
こちらの方が簡単です。
また、同様にKARTEなどのタグもGTMにおいてAll Pagesのページビューをトリガーとしていますがこちらも何かしら変更したほうが良いのでしょうか？
おそらく下記のようになるはずです。
analytics.subscribe("page_viewed", (event) => {
// https://support.karte.io/post/1gfetGfZWpPqYATqgviBg0#3-4 に記載されているタグの記載
});
ご参考まで。
(キュー田辺)
回答有り難うございます。
認識微妙に揃っていなくて、イベントのサブスクライブの部分はヘルプページ通りに以下のように設定していました。
//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,
});
});
問題はGTMの設定でトリガーとタグを設定していたのですが、トリガーを添付のようにページビューで設定していました。ヘルプページをよく見るとカスタムイベントでトリガーを受け付けろと書いてあったのでそちらに変更しようと思います。（あってますかね？）
@Emu1122 様
返信遅くなりました。
https://help.shopify.com/ja/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial
Googleタグマネージャーのトリガーは、カスタムイベントタイプで、イベント名は [checkout_completed] です。トリガーの [イベント名] フィールドは、カスタムピクセルのイベントキーと一致する必要があります。
そうですね。
添付いただいたように設定されると良さそうです。
(キュー田辺)
回答有り難うございます。
上記のように設定した結果、Google広告に関してはコンバージョンが測定できたのですが、Yahoo広告の測定がうまくいきません。
カスタムピクセル×GTMでのトリガー設定経由でもうまく測定できるのでしょうか？
@Emu1122 様
@Emu1122 様
カスタムピクセル×GTMでのトリガー設定経由でもうまく測定できるのでしょうか？
私たちが、そのような設定をしたことがないので、実際に確認しての内容ではないことご承知おきください。
Yahooの広告タグの設定は下記のようにされている、ということでよろしかったでしょうか？
https://pafit.cc/blog/shopify/gtm/1258/#i
コンバージョンタグの設定は、
Google広告と同様に、カスタムイベントでうまく動作しているのではないかと推測していまして、
(そうでなければ、Google広告の方が動作している方が説明がつかないので)
Yahooのサイトジェネラルタグがうまく動いていないということはないでしょうか？
うまく行くか分かりませんが、
サイトジェネラルタグのトリガーも、カスタムイベントにし"page_viewed"に設定してみるのはいかがでしょうか？
("page_viewed"はあらゆるページで発火すると思いますので、うまく行くのではないかと思いまして。)
推測ですので、うまくいかないようでしたら申し訳ございません。
返信有り難うございます。
基本的にはいただいたURLのように設定していますが、トリガーはすでにカスタムイベントを採用しています。
ですが、計測がされないため困っています。
貴社の場合、広告計測に置いてはどのように設定されることが多いのでしょうか？GTMにこだわっているわけではないので、計測可能な方法があればそちらを採用したいと考えています。
@Emu1122 様
基本的にはいただいたURLのように設定していますが、トリガーはすでにカスタムイベントを採用しています。
ですが、計測がされないため困っています。
サイトジェネラルタグのトリガーも変更済みなのですね。
貴社の場合、広告計測に置いてはどのように設定されることが多いのでしょうか？
弊社では今のところ、簡単な広告計測の設定で済むケースが多いので、どうしている、という話は難しいのですが、
以前、Yahooのコンバージョンタグをカスタムピクセルで発火させる実験をしたことがあります。
その内容を、下記のブログにまとめてあります。
https://techlab.q-co.jp/articles/140/
発火を確認しただけで、実際に計測できているかまでを確認したものではないですが、
参考になるようでしたら幸甚です。
(キュー田辺)
@Qcoltd
ありがとうございます。
下記のようなコードをカスタムピクセルに追加する理解であっておりますでしょうか？（伏せ字部分は該当のIDを入力しております）
こちらも実施してみたのですが計測が確認できず、なにかミスがありそうでしたらご指摘いただけますと幸いです。
yjDatalayerにどのようなデータがpushされているか確認できる方法も合わせて教えていただけますと非常に助かります。
// ステップ1. JavaScriptのピクセルSDKを初期化する (HTMLを必ず除いてください)
(function(){
window.yjDataLayer = window.yjDataLayer || [];
function ytag() { yjDataLayer.push(arguments); }
ytag({"type":"ycl_cookie"});
const f = document.getElementsByTagName("script")[0];
const j = document.createElement("script");
j.async=true;
j.src='https://s.yimg.jp/images/listing/tool/cv/ytag.js';
f.parentNode.insertBefore(j,f);
})();
// ステップ2. analytics.subscribe()を使用して顧客イベントを登録し、追跡情報を追加する
analytics.subscribe("checkout_completed", (event) => {
const checkout = event.data.checkout;
const checkoutSubtotalPrice = checkout.subtotalPrice.amount;
function ytag() { yjDataLayer.push(arguments); }
ytag({
"type": "yss_conversion",
"config": {
"yahoo_conversion_id": "XXXXXXXXXX",
"yahoo_conversion_label": "YYYYYYYYYYYY",
"yahoo_conversion_value": checkoutSubtotalPrice
}
});
});
analytics.subscribe("page_viewed", (event) => {
function ytag() { yjDataLayer.push(arguments); }
ytag({
"type":"yss_retargeting",
"config": {
"yahoo_ss_retargeting_id": "XXXXXXXXXXX",
"yahoo_sstag_custom_params": {
}
}
});
});
情報ありがとうございます。
そして、申し訳ございません。
調査を進めたところ、私たちのやり方ではYahooタグの発火ができていないことがわかりました。
yjDatalayerにどのようなデータがpushされているか確認できる方法も合わせて教えていただけますと非常に助かります。
こちらについては、
https://winofsql.jp/lightbox/google-chrome-developer-tool-important-20190214-914.html
上記ページで「コンソールで IFRAME を選択」の項目をまずお読みください。
その後、ご自身のコンソールで、"web-pixel-sandbox-CUSTOM-xxxxxxxxxxxxxxxxxx"といった感じのiframeをお探しください。
このiframe上にyjDataLayerがあります。
話は戻りまして、
上記、yjDataLayerの確認方法からもわかるとおり、
カスタムピクセルがiframeであることがYahooタグが発火しない原因ではないかと思うのですが、
ではどうすれば発火するのか、スクリプトでどうこうできる問題なのか、を突き止める事ができるかは、かなり怪しいと考えています。
なぜなら、Yahoo側が提供するサイトジェネラルタグの仕様に関連する問題である可能性が高いからです。
ShopifyとYahoo!の両方に問い合わせをするしかないと思いますが、
どちらも対応してくれるかがかなり怪しいです。
力になれず申し訳ございません。
(キュー田辺)