Buy buttonにGoogle Analyticsのイベントトラッキングを設定する方法

[Mocchan]

こんにちは。閲覧ありがとうございます。

はじめてディスカッションに投稿いたします。

▼サイト構成

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-bbd834462392...

▼やりたいこと

A で Buy Button を押されたことを、

Googleアナリティクスの「イベントトラッキング」で取得したいと考えています。

「イベントトラッキング」は、通常以下のようなタグで設定しますが、

<a href=”xxxxxxxx.pdf” onclick="gtag('event', 'download', {'event_category': 'pdf','event_label': 'xxx','value': '1'});“>

Shopify の Buy button は <a> ではないため、どうしたらよいのかわからず…投稿させていただきました。

自分なりに英語圏も含めて調べてみたのですが、読解力の問題もあるのか解決できず…

何時間もかかってしまっており、限界を感じてしまいました。

もしご存じの方がいらっしゃいましたら、コメントいただけましたら幸いです。

どうぞよろしくお願いいたします。

[nishishis]

参考URLの

<div id='product-component-2dd3c8704e6'></div>

がbuy buttonだったとして、

<script>
var buyButton = document.querySelector('#product-component-2dd3c8704e6')
if (buyButton) {
  buyButton.addEventListner('click', function() {
    gtag('event', 'download', {'event_category': 'pdf','event_label': 'xxx','value': '1'});
  })
}
</script>

こんな感じでどうでしょうか

[Mocchan]

Nishishisさま
コメントありがとうございます！

さっそくいただいたコードを参考にidの値を変えて試してみたのですが、残念ながら計測されませんでした。。

var buyButton…の末尾に「;」がないためかな？と思って書き足してみましたが、変わらずでした。

ちなみに、普通に <a> の書き方をテストすると計測されました。

JSについてくわしくないため、もしかしたら…くらいの感覚なのですが、

以下ページの一番下に記載のある、

https://shopify.github.io/buy-button-js/customization/

以下のようなコードをうまく使えば可能性があるでしょうか？

var product = {
  DOMEvents: {
    'click .button': function (event) {
      myAnalyticsLibrary.track()
    }
  }
}

的はずれな内容でしたら恐縮です。

[nishishis]

すみません、構文ミスです。

私の書いたコードの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

[Mocchan]

ご返信、さっそくありがとうございます。

重ねてのフォローに大変感謝しております。

＞addEventListnerをaddEventListenerに変更

こちらを試してみましたが、やはりイベント発生せずでした。

追記でいただいた内容もありがとうございます。

わざわざODEPENに記載してくださり、恐縮です。

追記いただいた内容もテストしてみたのですが、やはりだめでした…。

<div class="buy-button-wrap">購入ボタン</div>
<div class="buy-button-wrap"><div id="product-component-2dd3c8704e6">購入ボタン</div></div>

<script>
var buyButtonWrap = document.querySelector('.buy-button-wrap')
if (buyButtonWrap) {
  buyButtonWrap.addEventListener('click', function() {
    // gtagのイベント
    alert('クリックされました！')
  })
}
</script>

上記を試したみたところ、

以下については「クリックされました！」が表示されますが、

<div class="buy-button-wrap">購入ボタン</div>

以下については 「クリックされました！」が表示されませんでした。

<div class="buy-button-wrap"><div id="product-component-2dd3c8704e6">購入ボタン</div></div>

やはり #product-component-2dd3c8704e6 に対応している Shopify の Buy button のコードが何らか影響しているのかもしれません。

[nishishis · Accepted solution]

なるほど、buy buttonの出力ソースを確認してみました。

対象のボタンはiframe内に出力されている状態でしょうか。その場合、iframe内にアクセスする必要があるので上記のコードでは動作しません。（すみません！）

[Mocchan]

ご確認とご返信、ありがとうございます！

確認してみましたが、おっしゃる通り、ボタンはiframe内に出力されていました。

それで動作しなかったのですね…。

解決には至らなかったものの、理解できました。

ご丁寧かつ迅速にコメントをくださいまして、ありがとうございました！

[Jizo_Inagaki]

以前に類似の質問に回答していますので以下を参照されると良いかもしれません。

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/buy-button%E5%BE%8C%E3%81%AE...

記載されているDOMEventsでできるのではと思いますが、実現不可でしたら上記で書いています "optionsのcartで iframe: false にしてiframeを使わない表示形式" にすれば計測可能です。

ただしCSSを整える作業が必須になるため、その部分で手間がかかるとは思います。