こんばんは☺️
仕事でTwitterやLine、Facebookなどの公式に掲載されている方法で設置したSNSボタンのクリックを計測する実装をGTMでしました。
GTMでSNSボタンがクリックされた時にタグを発火させる〜みたいに普通の要素のクリックのように一筋縄ではいかなかったので、実装した方法をご紹介します。

今回は既に設置されたSNSのシェアボタンのクリックを計測する方法をお話しするため、GTMやSNSのシェアボタンの設置方法は詳しく書いていません。

各SNSのシェアボタンの計測方法

Twitterのシェアボタンのクリックを計測する前にGoogle Analyticsにイベントを送信する方法を確認しておきます。

Google Analyticsへのイベント送信方法

やることとしてはイベントの送信先を設定してあげて、イベントを送信するイメージです。 

// イベントを送るアカウントのプロパティーIDを指定
ga('create', 'UA-XXXXXXX-X', 'auto');

// イベントを上記のプロパティーに送信
ga('send', 'event', 'category', 'action', 'label');
gaを送るときのパラメーターは左からsend（固定）, event（固定）,　カテゴリー名、アクション名、ラベル名です。
イベントが送信されたかすぐに確認するにはGoogle Analyticsを開いて、リアルタイム→イベントで見れます。

試しに上記のイベントを送信したときは下の様にイベントが見れます。



では本題に参りましょう！

Twitterのシェアボタンの実装

Tweet←こんな感じのデザインのやつ

シェアボタンの設置はTwitter Publishからコードをコピーするだけです。
上記の方法でTwitterのシェアボタンが設置されるとtwttrというtwitter独自のファンクションを作ってくれるので、twttrを使ってクリックを計測します。 

twttr.ready(function (twttr) {
  twttr.events.bind("click", function (){
     ga('create', 'UA-XXXXXXX-X', 'auto');
     ga('send', 'event', 'category', 'action', 'label');
   });
});

twttrの詳しい使い方はこちらを参考にしてください→Twitter Developers


クリックイベントで計測できない原因とtwttrに辿りついた経緯

普通の要素と同じで、SNSボタンがクリックされた時にGAにイベントを送る実装で測定出来ると思っていました。
いざ実装してみて試しにクリックしましたが、イベントが送られてくる気配が全くなく... 色々調べてみてその原因がiframeにあることを知りました。

iframeとは

任意の別サイトやページのコンテンツをiframe内で表示出来るのがiframeです。
勘のいい方はここで気づいている（実装する前から気づいている？）と思いますが、iframe内は別サイトの領域です。
自分のサイトに設置したGAのイベントを別サイトで発火できないですよね？
同じことがiframe内でも起きている訳です。

contentWindowもエラー

iframeのクリックイベントが取得できないとなると、「じゃあiframe独自のイベントの計測方法があるんじゃないか？」って発想が思い浮かびました。
調べてみるとiframe内の要素を取得できるcontentWindowが出てきたので、以下の様に実装してみます。 

document.querySelector("iframe").contentWindow.addEventListener("click",
function(){
    // クリックイベントをGAに送信するスクリプト
  }
);　　
しかしクロスオリジンのエラーが起こってしまいます。
VM1136:1 Uncaught DOMException: Blocked a frame with origin "http://****" from accessing a cross-origin frame.
contentWindowはiframeで読み込むページが同じドメインであるか、ドメインの許可がされている時しか使えないのです。 個人的にクロスオリジンのエラーは嫌いなエラーランキングの3以内に入ってきます笑
セキュリティー面でクロスオリジンを制限することは重要なのでしょうがないのですが...

Twitterの独自の実装方法を探す

普通のクリックイベントでもcontentWindowでも取得できないとなると最後に行き着く考えが、Twitterの独自の計測方法があるのではないかということ。
で、ついに、やっと、twttrを発見しましたという経緯です。

Twitter以外のシェアボタンのイベント測定について

実は今回 Twitter以外にもFacebookとLineについてもクリックイベントを取得をしたかったのですが、Twitterしか独自の計測方法を見つけられませんでした。
（Facebookのいいねの取得は見つけたのですが、、、）
また他のSNSについても解決策を見つけたら追記しようと思います。

まとめ

twitterのシェアボタンのクリックを計測したい時はtwttrをぜひ使ってみてください。
iframeは奥が深い。もっと学ぼう...
ここまで読んでくれてありがとうございました。 質問等あればSNSから気軽にご連絡ください。
またね✋