LINEで送るボタンのGA計測をしたい

Question

初歩的な事ですみません。
ご回答の程、よろしくお願い致します。

###前提・実現したいこと
LINEで送るボタンをクリックした数をGoogle Analyticsで計測をしたいと考えています。

###発生している問題・エラーメッセージ
今の最新の公式LINEコードは実際に埋め込むとiframeで表示されるため
イベント発火せず、クリックしても計測されません。

###該当のソースコード

//ボタン表示位置
<script type="text/javascript">LineIt.loadButton();</script>
<div class="line-it-button line" data-lang="ja" data-type="share-a" style="display: none;"></div>
<script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>

//Google Analyticsトラッキングコード
$(function() {
$('.line').click(function(){
var shareurl = $(this).attr('href');
ga('send', 'social', 'line', 'click', shareurl);
});
});

###試したこと
iframe内の要素を読み込むコードに書き換えましたが、
iframe内が結局別のドメインのため読み込めず、DOMExceptionでした。

Answer 1

lineのボタンをdivタグなどの要素で囲って、それにイベントをセットしてみてはいかがでしょうか？

<div id="jsLineWrapper">
  <div class="line-it-button line" data-lang="ja" data-type="share-a" style="display: none;"></div>
</div>

$('#jsLineWrapper').on('click', function(){
  //実装酷いですがわかりやすいようにしてます
  var shareurl = $(this).children('.line').attr('href');
  ga('send', 'social', 'line', 'click', shareurl);
})

これだとイベントのbubbling phase（iframeクリックした後に呼ばれる）で設定してるのでiframeの仕様で上の要素へのbubblingがストップしている場合は動かないかもしれないです。

もし試してそのようだったらcapture phase（jsLineWrapperが先に呼ばれるphase）に設定してみるのも検討してみて下さい。

ちなみにbubblingやcapure phaseの話ですが、イベントはhtml内のドキュメントをクリックした際、html rootからDOMを伝ってクリックした場所に到達、その後html rootへ登っていくという流れで行います。

.lineをクリックした際は

html → body → ... → #jsLineWraper → .line → #jsLineWrapper → ... → body → html
| ------ capture phase ------ || ------ bubbling phase ------ |
といった感じです。（ずれてたらすません.lineまでです）

jqueryのclickで登録されるのはbubbling phaseなのでもし、.lineのiframeでbubblingを止める処理が走ってたら#jsLineWrapperにクリックイベントを登録していてもclickイベントは発生しません。

なのでその場合は、.lineに届く前に#jsLineWrapperでイベントを発火させる必要があります。

その場合、jqueryではできず、以下のようにjsを使用して行います。

var elLineWrapper = document.getElementById('jsLineWrapper');

elLineWrapper.addEventListener('click', function(){
  // ga送信
}, true) // ← trueにするとcapture phaseでイベントが発生する

なのでどちらか試してみて下さい！

Comments

[ponpoko_3]

ご回答ありがとうございます。

ご教示いただいた方法うち２つとも試してみましたが
１つ目では.lineのiframeでbubblingを止める処理が走っているのか
イベント発火しませんでした。

しかし２つ目では無事発火する事できました。
四苦八苦してなかなかできなかったので助かりました。本当にありがとうございます。
（イベント自体はTagAssistantでエラーのため、また調査が必要そうですが…）

※ちなみにこの情報を探している方に参考ですが…
他にもLINE公式コードの２つ目を使って以下の方法でも書いてみましたが、こちらもイベント発火できませんでした。
<a href="http://line.me/R/msg/text/?LINE%E3%81%A7%E9%80%81%E3%82%8B%0D%0Ahttp%3A%2F%2Fline.me%2F" onclick="ga('send', 'social', 'line', 'click', shareurl);" ><img src="/img/line_btn.png" width="82px" height="20px" alt="LINEで送る" /></a>