murak.net

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

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

| 9件のコメント

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

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


投稿者: 村上 和久

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

9件のコメント

  1. Trouvez et réservez votre place de stationnement au meilleur prix avec Allopark.com, Location de place de parking de particulier ou d’entreprise non loin des aéroports en france et sur
    le continent européen. Réserver une place de stationnement
    en ligne c’est enfantin, rapide et vous donne la possibilité de faire des économies.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

haru にコメントする コメントをキャンセル

* は必須項目です



*