こんばんは☺️
仕事で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');イベントが送信されたかすぐに確認するには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.
セキュリティー面でクロスオリジンを制限することは重要なのでしょうがないのですが...
Twitterの独自の実装方法を探す
普通のクリックイベントでもcontentWindowでも取得できないとなると最後に行き着く考えが、Twitterの独自の計測方法があるのではないかということ。
で、ついに、やっと、twttrを発見しましたという経緯です。