こんにちは。閲覧ありがとうございます。
はじめてディスカッションに投稿いたします。
▼サイト構成
A：www.example.com （自社サイト：製品紹介）
B：example.myshopify.com（Shopify：決済）
製品詳細は A で見せて、決済は B（Shopify）という構成にしています。
A では Buy button を埋め込んでおり、コードとしては以下のスクリプトタグを使っています。
https://help.shopify.com/ja/manual/online-sales-channels/buy-button/add-embed-code#part-bbd8344623927033
▼やりたいこと
A で Buy Button を押されたことを、
Googleアナリティクスの「イベントトラッキング」で取得したいと考えています。
「イベントトラッキング」は、通常以下のようなタグで設定しますが、
Shopify の Buy button は <a> ではないため、どうしたらよいのかわからず…投稿させていただきました。
自分なりに英語圏も含めて調べてみたのですが、読解力の問題もあるのか解決できず…
何時間もかかってしまっており、限界を感じてしまいました。
もしご存じの方がいらっしゃいましたら、コメントいただけましたら幸いです。
どうぞよろしくお願いいたします。
参考URLの
<div id='product-component-2dd3c8704e6'></div>
がbuy buttonだったとして、
こんな感じでどうでしょうか
Nishishisさま
コメントありがとうございます！
さっそくいただいたコードを参考にidの値を変えて試してみたのですが、残念ながら計測されませんでした。。
var buyButton…の末尾に「;」がないためかな？と思って書き足してみましたが、変わらずでした。
ちなみに、普通に の書き方をテストすると計測されました。
JSについてくわしくないため、もしかしたら…くらいの感覚なのですが、
以下ページの一番下に記載のある、
https://shopify.github.io/buy-button-js/customization/
以下のようなコードをうまく使えば可能性があるでしょうか？
var product = {
DOMEvents: {
'click .button': function (event) {
myAnalyticsLibrary.track()
}
}
}
的はずれな内容でしたら恐縮です。
すみません、構文ミスです。
私の書いたコードのaddEventListnerをaddEventListenerに変更してください。
下記を参考にして頂くと良いと思います。
https://developers.google.com/analytics/devguides/collection/gtagjs/sending-data?hl=ja
以下のようなコードをうまく使えば可能性があるでしょうか？
うまく使えばできるかもしれませんが、デフォルトの機能を失うようなのでご注意ください。
（このライブラリの知識はないです、すみません）
https://github.com/Shopify/buy-button-js/issues/801
https://github.com/Shopify/js-buy-sdk/issues/590
追記:
buy button自体にイベントを登録できなかった場合、buy buttonを囲む要素にイベントを追加してやると良いと思います。
下記は例（jsのalert()部分（クリックされましたのほう）をgtagイベントに置き換えてください）
https://codepen.io/nishida-oikaze/pen/MWQrJqr
ご返信、さっそくありがとうございます。
重ねてのフォローに大変感謝しております。
＞addEventListnerをaddEventListenerに変更
こちらを試してみましたが、やはりイベント発生せずでした。
追記でいただいた内容もありがとうございます。
わざわざODEPENに記載してくださり、恐縮です。
追記いただいた内容もテストしてみたのですが、やはりだめでした…。
購入ボタン
購入ボタン
上記を試したみたところ、
以下については「クリックされました！」が表示されますが、
購入ボタン
以下については 「クリックされました！」が表示されませんでした。
購入ボタン
やはり #product-component-2dd3c8704e6 に対応している Shopify の Buy button のコードが何らか影響しているのかもしれません。
なるほど、buy buttonの出力ソースを確認してみました。
対象のボタンはiframe内に出力されている状態でしょうか。その場合、iframe内にアクセスする必要があるので上記のコードでは動作しません。（すみません！）
ご確認とご返信、ありがとうございます！
確認してみましたが、おっしゃる通り、ボタンはiframe内に出力されていました。
それで動作しなかったのですね…。
解決には至らなかったものの、理解できました。
ご丁寧かつ迅速にコメントをくださいまして、ありがとうございました！