GTM (Google Tag Manager) + Google Analyticsで、FacebookとTwitterのボタンクリックを計測する方法です。
こちらは2016年8月8日の情報です。
どうせまたGTMもGAも、画面が変わってしまうと思いますので。
GTMの初期設定
まずはGTMのアカウント作成、コンテナ作成。
GTMのタグをHTMLに入れて、PVが計測できる状態まで設定します。
変数を作る
- GTM管理画面左側の「変数」をクリック
- 「新規」ボタンをクリック
- 「データレイヤーの変数」をクリック
- 「データレイヤーの変数名」に「socialAction」と入力
- 「変数を作成」ボタンをクリック。
- 「変数名の変更」で「socialAction」と入力、「保存」ボタンをクリック
- これで変数「socialAction」ができました
- 同じように「socialNetwork」「socialTarget」を作ります
トリガーを作る
- GTM管理が面左側の「トリガー」をクリック
- 「新規」ボタンをクリック
- 「カスタムイベント」をクリック
- イベント名を「socialEvent」に
- トリガー配信は「event」「等しい」「socialEvent」
- 「トリガーを作成」ボタンをクリック
- 「トリガー名の変更」で「social」と入力、「保存」ボタンをクリック
タグを作る
- GTM管理が面左側の「タグ」をクリック
- 「新規」ボタンをクリック
- 「プロダクトを選択」で「Google Analytics」をクリック
- 「タグの種類を選択」で「ユニバーサルアナリティクス」をクリック
- 「トラッキングID」に対象サイトのGAのUA番号を入力
- 「トラッキングタイプ」のプルダウンで「ソーシャル」を選択
- 「ネットワーク」は「{{socialNetwork}}」、「アクション」は「{{socialAction}}」、「アクションターゲット」は「{{socialTarget}}」を入力し
- 「続行」ボタンをクリック
- 「配信するタイミング」で「その他」をクリック
- 先ほど作ったトリガー「social」にチェックを入れ、「保存」ボタンをクリック
- 「タグを作成」ボタンをクリック
- 「タグ名の変更」で「social」と入力、「保存」ボタンをクリック
公開
作った変数、トリガー、タグを公開します。
ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<html> <body> <!-- Google Tag Manager --><!--GTMのタグです--> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-xxxxxx" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-xxxxxx');</script> <!-- End Google Tag Manager --> <div id="fb-root"></div><!--お約束のfacebookの宣言--> <script> //FB関数初期化 window.fbAsyncInit = function() { FB.init({ status : true, xfbml : true, version : 'v2.7' }); //後述のtrackFacebook関数を呼び出し trackFacebook(); }; //facebookのsdk.js読み込み (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.7&appId=399462816757126"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <script type="text/javascript" charset="utf-8"> //twitterのwidgets.jsを呼び出し。twitterシェアボタンを入れるだけの時のjsと微妙に違うので注意 window.twttr = (function (d,s,id) { var t, js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); }(document, "script", "twitter-wjs")); </script> <p>test</p> <!--facebookボタン--> <div class="fb-like" data-href="http://www.miyasaka.info/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> <!--twitterボタン--> <div><a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a></div> <script> //FB.eventでイベント発生時に、dataLayer.pushでGAに送る trackFacebook = function(event) { if(typeof FB != 'undefined'){ FB.Event.subscribe('edge.create', function(targetUrl) { dataLayer.push({'socialNetwork':'facebook','socialAction':'like','socialTarget':targetUrl,'event':'socialEvent'}); }); FB.Event.subscribe('edge.remove', function(targetUrl) { dataLayer.push({'socialNetwork':'facebook','socialAction':'unlike','socialTarget':targetUrl,'event':'socialEvent'}); }); FB.Event.subscribe('message.send', function(targetUrl) { dataLayer.push({'socialNetwork':'facebook','socialAction':'send','socialTarget':targetUrl,'event':'socialEvent'}); }); }; }; if(typeof twttr != 'undefined'){ function trackTwttrClick(event) { if (event) { var targetUrl; if (event.target && event.target.nodeName == 'IFRAME') { targetUrl = extractParamFromUri(event.target.src, 'url'); } } dataLayer.push({'socialNetwork':'twitter','socialAction':'click','socialTarget':targetUrl,'event':'socialEvent'}); } function trackTwttrTweet(event) { if (event) { var targetUrl; if (event.target && event.target.nodeName == 'IFRAME') { targetUrl = extractParamFromUri(event.target.src, 'url'); } } dataLayer.push({'socialNetwork':'twitter','socialAction':'tweet','socialTarget':targetUrl,'event':'socialEvent'}); } function extractParamFromUri(uri, paramName) { if (!uri) { return; } var regex = new RegExp('[\\?&#]' + paramName + '=([^&#]*)'); var params = regex.exec(uri); if (params != null) { return unescape(params[1]); } return; } twttr.ready(function (twttr) { twttr.events.bind('click', trackTwttrClick); twttr.events.bind('tweet', trackTwttrTweet); }); }; </script> </body> </html> |
ソースの変更方法
GTMのタグを入れる
3〜11行目。GTMのタグを入れてあります。
FB関数を初期化する
FB.eventでfacebookのイベントを取れるよう、16行目〜21行目を書きます。
trackFacebook関数呼び出し
52行目から書かれているtrackFaebook関数を、ここ（23行目）で呼び出しています。
facebookのsdk.js呼び出し
26〜32行目。普通のsdk.jsの呼び出し方法です。
30行目と20行目で違うversionが指定されていると動かないはずなので注意。
widgets.js呼び出し
36〜41行目。
twitter純正シェアボタンなどのwidgets.js呼び出しと微妙に違うので注意してください。
イベントをGAに送る
52行目〜64行目で、FB.eventが発生したらdatalyer.pushでGAにデータを送っています。
注意点
- Facebookのシェアは計測できません
- twitterはclickとtweetの両方のイベントが取れてしまいます
参考サイト
Google Analyticsのソーシャルプラグイン解析について（タグマネージャーとユニバーサルアナリティクス対応）
