GoogleTagManagerでソーシャルインタラクション

前々回に試したかったGoogleTagManager（以下GTM）でのソーシャルインタラクションの設定方法。 （わざわざHerokuアップしなくてもローカルでも確認できた・・）

Universal Analyticsになっても、GTMを使っても、ソーシャルインタラクションの取得には一手間必要だそうです。

HerokuでMiddleman - hhmmm

1. ページにTwitter, Facebookの埋め込みScript

公式の埋め込み用スクリプトを共通化してまとめておきます。

<!-- twitter script -->
<script>
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  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);
 
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
 
  return t;
}(document, "script", "twitter-wjs"));
</script>

<!-- facebook script -->
<div id="fb-root"></div>
<script>(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.5&appId=323729011016547";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

コードの埋め込み場所はGTMの埋め込みコードより手前です。

2. ページにボタンの設置

<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com" data-text="ごにょごにょ" data-lang="ja" data-count="none">ツイート</a>

<!-- Facebook -->
<div class="fb-like" data-href="http://example.com" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

ボタンは設置したい箇所に、好きなだけ。

3. GTMの設定

ここからはGTM（v2）画面です。

Tags

f:id:hhmmm:20160316162643p:plain

Triggers

f:id:hhmmm:20160316162747p:plain

Variables

f:id:hhmmm:20160316162753p:plain

3-1. Variablesの設定

データレイヤ変数を追加

socialAction

f:id:hhmmm:20160316164202p:plain

socialNetwork

f:id:hhmmm:20160316164306p:plain

socialTarget

f:id:hhmmm:20160316164317p:plain

UA-ID

管理しやすいようにGoogle AnalyticsプロパティIDを追加 f:id:hhmmm:20160316164538p:plain

3-2. Triggersの設定

socialEvent

f:id:hhmmm:20160316164754p:plain

Window Loaded

f:id:hhmmm:20160316164823p:plain

3-3. Tagsの設定

socialEvent Listener

さきほど追加したデータレイヤ変数とGoogle AnalyticsプロパティIDを設定します。 f:id:hhmmm:20160316165440p:plain

SocialInteraction code

f:id:hhmmm:20160316170127p:plain

コードの中身

<script>
$(function(){
  // Twitter
  function clickEventToAnalytics (intentEvent) {
    if (!intentEvent) return;
    var socialNetwork = 'twitter';
    var socialAction = intentEvent.region;
    var socialTarget = $(intentEvent.target).attr('data-url') ? $(intentEvent.target).attr('data-url') : window.location.href;
    dataLayer.push({
     'event': 'socialEvent',
     'socialNetwork': socialNetwork,
     'socialAction': socialAction,
     'socialTarget': socialTarget
    });
  }
  function tweetIntentToAnalytics (intentEvent) {
    if (!intentEvent) return;
    var socialNetwork = 'twitter';
    var socialAction = 'tweet';
    var socialTarget = $(intentEvent.target).attr('data-url') ? $(intentEvent.target).attr('data-url') : window.location.href;
    dataLayer.push({
     'event': 'socialEvent',
     'socialNetwork': socialNetwork,
     'socialAction': socialAction,
     'socialTarget': socialTarget
    });
  }
  
  if("undefined" != typeof twttr){
    twttr.ready(function (twttr) {
      twttr.events.bind('click', clickEventToAnalytics);
      twttr.events.bind('tweet', tweetIntentToAnalytics);
    });
  };

  // Facebook
  window.fbAsyncInit = function() {
    FB.Event.subscribe('edge.create', function(targetUrl) {
      var socialNetwork = 'facebook';
      var socialAction = 'like';
      var socialTarget = targetUrl;
      dataLayer.push({
       'event': 'socialEvent',
       'socialNetwork': socialNetwork,
       'socialAction': socialAction,
       'socialTarget': socialTarget
      });
    });
    FB.Event.subscribe('edge.remove', function(targetUrl) {
      var socialNetwork = 'facebook';
      var socialAction = 'unlike';
      var socialTarget = targetUrl;
      dataLayer.push({
       'event': 'socialEvent',
       'socialNetwork': socialNetwork,
       'socialAction': socialAction,
       'socialTarget': socialTarget
      });
    });
  };
});
</script>

発火タイミングにWindow Loadedがないと、たまに発火しない時があったためおまじないの様に。

Universal Analytics

Google Analyticsの普通のPageViewです。 f:id:hhmmm:20160316170805p:plain

4. ページにGTMスニペットを追加

<body>
<!-- ここに 1. SNSボタンのScript -->
<!-- Google Tag Manager -->
<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 -->
</body>

画像いっぱい！