Googleタグマネージャの仕組みを使った、ソーシャルボタントラッキングのタグの作り方を紹介します。このタグを使うと、Facebookいいね！ボタン、Twitterのツイートボタン、LINEで送るボタンの操作をGoogleアナリティクスで計測できます。

GTMのイベントトラッキングの仕組みを使っています。ソーシャルボタンのイベントリスナーから作成するやり方ですので、拡張性に優れています。ユニバーサルアナリティクスを例にしていますが、従来のGoogleアナリティクスにも使えます。

ソーシャルボタンのイベントトラッキングの仕組み

このトラッキング全体の構成は次の図のようになります。

 

GTMのイベントトラッキングの基本については「Googleタグマネージャでフォーム入力イベントトラッキング – 独自のイベントリスナー作成の基本」を参照してください。

イベントトラッキングでは、タグを2つ使います。ソーシャルイベントリスナーのタグでソーシャルボタンのイベントを捕捉して、もう一方のタグでUAやGAのトラッキングコードを配信します。

図の流れを説明すると、まずソーシャルイベントリスナーをカスタムHTMLタグで作成します。ソーシャルイベントリスナーは、ソーシャルボタンが押されたときにpush() APIを呼んで、パラメータをデータレイヤー変数に格納して、イベントハンドラにイベント名’socialEvent’を渡します。ルールには、イベント名が’socialEvent’に等しいという条件のルールを作成します。マクロには、各データレイヤー変数を参照するマクロを追加します。UAソーシャルイベントタグは、ソーシャルイベントが発生したときに、イベントトラッキングを発行してパラメータにデータレイヤー変数の値を渡します。

以下に具体的な手順を説明します。

jQueryを読み込む

イベントリスナーのLINEで送るボタンの処理でjQueryを使用しているので、あらかじめhtmlにjQuery本体を読み込むコードを追加しておきます。
LINEで送るボタンを使わないときはjQueryは不要です。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 

ソーシャルイベントリスナーを作成する

新しいタグを追加します。タグの種類を[カスタムHTMLタグ]にして、次のように設定します。

 

HTMLには次のjavaScriptを入力します。

<script>
//Facebook
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'});
  });
}

//Twitter
if(typeof twttr != 'undefined'){
  twttr.ready(function (twttr) {
    twttr.events.bind('click', function (event) {
      dataLayer.push({'socialNetwork':'twitter','socialAction':'click','socialTarget':window.location.href,'event':'socialEvent'});
    });
    twttr.events.bind('tweet', function (event) {
      dataLayer.push({'socialNetwork':'twitter','socialAction':'tweet','socialTarget':window.location.href,'event':'socialEvent'});
    });
  });
}

//LINE
if(typeof jQuery != 'undefined'){
    $(function(){
        $('a[href^="http://line.naver.jp/R/msg/"]').click(function(){
          dataLayer.push({'socialNetwork':'line','socialAction':'send','socialTarget':window.location.href,'event':'socialEvent'});
        });
    });
}
</script>

JavaScriptの動作を説明すると、Facebookいいね！ボタン、ツイートボタン、またはLINEで送るボタンが押されたときに、dataLayer.push() を呼んで、計測に必要なパラメータをデータレイヤー変数に設定し、イベントハンドラにイベント名’socialEvent’を送っています。

データレイヤー変数を参照するマクロを作成する

タグからデータレイヤー変数を参照するためのマクロを作成します。
新しいマクロを追加して、次のように設定します。

 

上記のようにしてデータレイヤー変数 socialNetwork を参照するマクロを作成します。

同じ手順で、socialAction、socialTarget を参照するマクロも作成します。

これらのマクロを作成することで、ルールやタグから {{socialNetwork}} のように記述してデータレイヤー変数を参照できます。

ソーシャルイベントのルールを作成する

ソーシャルイベントが発生したかどうかを判定するルールを作成します。
新しいルールを追加して、次のように設定します。

条件はマクロ event が ‘socialEvent’ に等しいときに成立します。これをタグの配信ルールで使用します。

イベントトラッキングのタグを作成する

イベントが発生したときに配信する、ユニバーサルアナリティクスのタグを作成します。
新しいタグを追加して、次のように設定します。

[トラッキングID]にはユニバーサルアナリティクスのプロパティIDを設定します。ここではマクロ{{UA ID}}にプロパティIDを定義しておいて、そのマクロを参照しました。

[トラッキングタイプ]を[ソーシャル]にして、ソーシャル トラッキング パラメータを次のように設定します。

ネットワーク = {{socialNetwork}}
操作 = {{socialAction}}
アクション ターゲット = {{socialTarget}}

[配信のルール]に、先ほど作成した[ソーシャルイベント]を追加します。

プレビューとバージョン作成、公開

Googleタグマネージャの[プレビュー]で動作を確認したら、[バージョンを作成]、[公開]します。

正しく動作すれば、Googleアナリティクスのレポートの[集客＞ソーシャル＞プラグイン]で、ソーシャルボタン操作の集計を見ることができます。

使えるソーシャルボタン

Facebookいいね！ボタンはXFBMLまたはHTML5で実装されたボタンで動作します。ifreme版では動作しません。
Twitterのツイートボタンはこちらの新しいコードを使って実装したボタンで動作します。
LINEで送るボタンは、ハードコーディングで実装したボタンで動作を確認しています。

LINEで送るボタンは標準のリンククリックリスナーを使うのが簡単

今回はLINEで送るボタンも一緒に実装しました。しかし、実はLINEで送るボタンは単なるリンクなので、GTMに標準で付いているリンククリックリスナーを使う方が簡単です。興味のある方はリンククリックリスナーを使って実装してみてください。

従来のGoogleアナリティクスで使うには

今回はユニバーサルアナリティクスを使っていますが、2つめのタグ作成のときユニバーサルアナリティクスの代わりにGoogleアナリティクスを選ぶことで、従来のGoogleアナリティクスでも使用できます。

関連しているかもしれない記事

• Googleタグマネージャとアナリティクスでフォーム入力イベントトラッキング – 独自のイベントリスナー作成の基本
• jQueryを使ったJavaScriptの書き方と、日本語入力モード制御の例
• jQueryプラグインの簡単な書き方と、ランダム表示プラグインの例
• Google Analyticsにフォーム入力イベントなどを機能拡張するJavaScript「GA Functions」
• GoogleタグマネージャとjQueryで好きな位置にタグを表示する – AdSense広告配信タグも