GTMとGoogle AnalyticsでFacebookとTwitterのボタンクリックを計測する

gtm

GTM (Google Tag Manager) + Google Analyticsで、FacebookとTwitterのボタンクリックを計測する方法です。
こちらは2016年8月8日の情報です。
どうせまたGTMもGAも、画面が変わってしまうと思いますので。

GTMの初期設定

まずはGTMのアカウント作成、コンテナ作成。
GTMのタグをHTMLに入れて、PVが計測できる状態まで設定します。

変数を作る

  • GTM管理画面左側の「変数」をクリック
  • 「新規」ボタンをクリック
  • 「データレイヤーの変数」をクリック
  • 「データレイヤーの変数名」に「socialAction」と入力
  • 「変数を作成」ボタンをクリック。
  • 「変数名の変更」で「socialAction」と入力、「保存」ボタンをクリック
  • これで変数「socialAction」ができました
  • 同じように「socialNetwork」「socialTarget」を作ります

スクリーンショット 2016-08-08 16.23.20

トリガーを作る

  • GTM管理が面左側の「トリガー」をクリック
  • 「新規」ボタンをクリック
  • 「カスタムイベント」をクリック
  • イベント名を「socialEvent」に
  • トリガー配信は「event」「等しい」「socialEvent」
  • 「トリガーを作成」ボタンをクリック
  • 「トリガー名の変更」で「social」と入力、「保存」ボタンをクリック

スクリーンショット 2016-08-08 16.23.52

タグを作る

  • GTM管理が面左側の「タグ」をクリック
  • 「新規」ボタンをクリック
  • 「プロダクトを選択」で「Google Analytics」をクリック
  • 「タグの種類を選択」で「ユニバーサルアナリティクス」をクリック
  • 「トラッキングID」に対象サイトのGAのUA番号を入力
  • 「トラッキングタイプ」のプルダウンで「ソーシャル」を選択
  • 「ネットワーク」は「{{socialNetwork}}」、「アクション」は「{{socialAction}}」、「アクションターゲット」は「{{socialTarget}}」を入力し
  • 「続行」ボタンをクリック
  • 「配信するタイミング」で「その他」をクリック
  • 先ほど作ったトリガー「social」にチェックを入れ、「保存」ボタンをクリック
  • 「タグを作成」ボタンをクリック
  • 「タグ名の変更」で「social」と入力、「保存」ボタンをクリック

スクリーンショット 2016-08-08 16.23.37

公開

作った変数、トリガー、タグを公開します。

ソース

ソースの変更方法

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のソーシャルプラグイン解析について(タグマネージャーとユニバーサルアナリティクス対応)

ツイートツイート

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です