murak.net

アクセス解析・Googleアナリティクス・ネット戦略・SEO・Webプログラミングなどを綴るブログ

Googleタグマネージャとアナリティクスでソーシャルボタンをトラッキングする

| 8件のコメント

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アナリティクスでも使用できます。

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

LINEで送る

投稿者: 村上 和久

アクセス解析・Webコンサルティングのアナライズネット代表・Webアナリスト。Googleアナリティクスの導入とカスタマイズ、ウェブ分析、アクセス解析に関するセミナーなどを行っている。

8件のコメント

  1. 初めまして。
    上記の方法で設定してみたのですがエンティティ、ソーシャル ネットワークが<undefined>になってしまいます。
    なにか原因は考えられるでしょうか?

    • talowさん、はじめまして。

      色々原因は考えられるのですが、どこでおかしくなってるか切り分けて、場所を絞り込んでいくといいと思います。

      まずは、GTMのプレビューで、イベント socialEvent が発生したときの Data Layer の値を確認してみてください。

      イベント自体が発生してなければ、ソーシャルボタンの実装が対応してないものだったり jQueryが入ってない可能性があります。
      イベントが発生しているがData Layer に値が入ってなければ、ソーシャルイベントリスナーのjsの記述の問題です。
      Data Layer に値が入っているがGAのレポートに正しく出てなければ、Data Layer変数名が違ってるか、GAタグに記述した変数名が違ってる可能性があります。

  2. この方法は、現在の最新バージョンでも変わりないでしょうか?

    • センテンスさん、こんにちは。
      「ルール」「マクロ」が「トリガー」「変数」に名称が変わったり、画面の違いなどが若干ありますが、
      現在のバージョンでも使えます。

  3. トラックバック: Google Analyticsのソーシャルプラグイン解析について(タグマネージャーとユニバーサルアナリティクス対応)

  4. 村上様、早速にお返事ありがとうございます。
    設定は、間違っていないようで安心しました。

    ソーシャル解析できるか様子みてみます。
    LINEの解析も出来るのが良いですね!

    何かありましたら、ご指導お願いします。
    ありがとうございました。

  5. 初めまして。
    この記事で、Googleタグマネージャのとを知りました。
    貴重な記事ありがとうございます。

    お聞きしたいのですが、
    UAソーシャルイベント、タグのトラッキングIDはプロパティID
    でいいのですか?
    {{UA ID}}だと不正タグとして保管できませんでした。

    またHTMLに埋め込んでいるGoogleアナリティクス解析タグは、削除せずに
    残したままでいいのでしょうか?

    初歩的は質問で申し訳ごさいませんが、ご指導お願いします。

    • haruさん初めまして。
      トラッキングIDはプロパティIDでいいです。
      この投稿の画面では、プロパティIDを定数マクロで定義して使ってたので、
      このような記述になってます。

      HTMLに埋め込んでいるアナリティクスの解析タグがページビューのタグで、タグマネージャでソーシャルのタグだけ配信している場合は、残していて大丈夫なはずです。
      タグマネージャでページビューのタグも配信している場合は、HTMLに埋め込んでるページビューのタグを削除する必要があります。

コメントを残す

* は必須項目です


*