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

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


WP Social Bookmarking Lightでカテゴリ一覧ページにソーシャルボタンが表示されない場合

WordPressにソーシャルボタンを追加するプラグイン、WP Social Bookmarking Light。

カテゴリ一覧などWordpressが自動生成するページにもソーシャルボタンを追加するためには、設定画面の「個別記事のみ」を「No」にすればいい。
スクリーンショット 2016-02-10 12.20.38

しかし、なぜかうまく表示できない・・・というときは、archive.phpにWP Social Bookmarking Light表示用のコードを追加しちゃいましょう。

場所的には、以下のようにhave_posts()のwhileループの下、item-wrapの閉じタグの上あたりがいいんじゃないかと思います。

  <?php
wp_social_bookmarking_light_output_e();
?>
</div><!– .item-wrap –>
</div><!– .archive-wrap –>


WordPressをソーシャルシェア

WordPressのプラグイン、WP Social Bookmarking LightとAll in One SEOを使った方法の紹介です。

WP Social Bookmarking Lightの設定

「WP Social Bookmarking Light」をインストールして、設定画面からお好きなソーシャルメディアを右から左にドラッグしましょう。
ここではFacebook、Twitter、LINEを設定してみました。
スクリーンショット 2016-01-15 17.05.42

All in One SEOの設定

トップページや、各投稿毎にシェア画像を設定するのに、今回はWordpressプラグイン「All in One SEO」を使います。
「All in One SEO」をインストール。
スクリーンショット 2016-01-15 16.25.27
All in One SEOの「Feature Manager」から、「Social Meta」の「Activate」ボタンを押す。
スクリーンショット 2016-01-15 16.27.40
All in One SEOの「Social Meta」をクリック。
スクリーンショット 2016-01-15 16.28.15

トップページのシェア画像設定

まずはHome Page Settingsの各項目を設定。これでトップページのシェア設定ができます。
スクリーンショット 2016-01-15 16.37.03
とりあえず、ここではog:imageだけ設定しておきます。
・「Home Image」の「Upload Image」をクリックし、新規画像を追加する
・同じく「Home Image」の「Upload Image」で、メディアにアップロードされているファイルを選ぶ
・画像のURLを直接指定する
などの方法で設定可能です。

個別ページのシェア画像設定

1.「All in One SEO」の「Image SettingsーSelect OG:Image Source」から設定する方法
・Default Image:個別ページ共通で、同じ画像を使う
・アイキャッチ画像:個別ページに設定されたアイキャッチ画像を使う
・Image From Custom Field:カスタムフィールドで設定した画像を使う
などが選べます。
スクリーンショット 2016-01-15 16.47.04
2.個別ページのAll in One SEO設定する方法
投稿の下部にある「All in One SEO Pack」の「Social Settings」タブで、Custom Imageを設定します。
スクリーンショット 2016-01-15 17.00.46


「私がFacebook上で、よく使う言葉は?」を使うと死ぬの?

結論から言うと、死にません。

「私がFacebook上で、よく使う言葉は?」をFacebook連携させると出てくるメッセージ。
スクリーンショット 2015-12-09 18.42.19

「提供する情報を変更」をクリックすると、詳細が出てきます。
スクリーンショット 2015-12-09 18.41.54

許可する情報は以下3つ。
1.公開プロフィール
2.友達リスト
3.タイムライン投稿

1.は自分で入力して、みんなに公開した情報ですよね。
2.はFacebookで友達を作ると、みんなに公開されてしまう情報ですね。
3.も自分で入力して、みんなに公開した情報ですよね。

この3つを秘密にする方法があります。
それは、今すぐFacebookを退会することです。

よく陰謀論的に「こんなアプリ使うと個人情報抜かれる!」とおっしゃる方がいますが、現在のFacebookアプリのpermission制限強化と申請・承認制度をご理解されているのでしょうか?
個人情報を抜けるようなpermission設定とか、Facebookのrejectを通り抜ける方法とか、graph apiでどのfieldsをgetすればいいのかとか、そんな方法があるのなら、是非とも教えて欲しいです。
(昔は秘密のグループへの投稿まで取得できるpermissionあったけど)

「私がFacebook上で、よく使う言葉は?」を使う上で、一点だけ、注意点。
タイムライン投稿にpermissionあげると、「友達のみ」で投稿したpostsもアプリにアクセス許可になります。
「友達のみ」投稿だからいいやと、「部長しねや」って呟きまくってる人は、「私がFacebook上で、よく使う言葉は?」を使うと「部長しねや」が一番大きく出てくると思います。
とは言っても、「私がFacebook上で、よく使う言葉は?」はpublish_actionsのpermissionとってないので、勝手に自分のタイムラインに投稿されることはありませんが。
「私がFacebook上で、よく使う言葉は?」の結果を「全員に公開」で投稿して、部長にバレないよう注意しましょう。


RSS Graffitiのパーミッション変更


RSS Graffitiは、ブログなどのRSSをFacebookページに自動投稿するFacebookアプリだ。
パーミッションには期限があるので、「Action Required: Your RSS Graffiti Facebook Permissions have expired!」というメールが届いていたら、忘れずに期限更新手続きをする必要がある。

RSS Graffitiの管理に使っているFacebook IDでログインした状態で、RSS Graffitiのアプリ管理画面を開くだけで期限更新は完了する(はずだ、いまのところ。Facebookの大規模な仕様変更が無い限り)。


続 Facebook APIの謎

結論から言うと、APIでFacebook内投稿のシェア数を計測するのは無理そうだ。

Graph APIエクスプローラでGraph API、FQL Queryで色々試してみたが、
1.正常に計測できる場合
2.シェア数が全く計測できない場合
3.permissionでread_streamを取ると計測できる場合
4.read_streamを取ると計測できるが、取らないとpost_idさえ見つけられない場合
の4パターンの結果になった。

もうあきらめる。


Facebook APIの謎

投稿のシェア数を数えたいのだが、うまくいかない。
・パーミッション追加なしでposts-data-sharesを引ける時がある。でも、滅多に(?)引けない。
・Extend Permissionsのread_streamを追加すると、posts-data-sharesが結構たくさん(?)引ける。
・それでも引けない(シェアされているのにposts-data-sharesのcountが増えない)postsがある

Graph APIじゃなくてFQLでやると引けるのか?


FacebookのチェックインAPIを使う方法についてメモ

FacebookのチェックインAPIを使う方法についてメモ

■formを使う場合
<form action=”https://graph.facebook.com/me/checkins” method=”post”>
<input type=”hidden” name=”place” value=”FacebookチェックインID”>
<input type=”hidden” name=”access_token” value=”Facebookアクセストークン”>
<input type=”hidden” name=”coordinates[latitude]” value=”緯度”>
<input type=”hidden” name=”coordinates[longitude]” value=”経度”>
<input type=”submit” value=”チェックインする”>
■jqueryの$.postを使う場合
<script type=”text/javascript”>
$(function(){
$(“.submit_button”).click(function(){
var place = $(“.place”).val();
var access_token = $(“.access_token”).val();
var latitude = $(“.latitude”).val();
var longitude = $(“.longitude”).val();
$.post(“https://graph.facebook.com/me/checkins”,{access_token:access_token, place:place, “coordinates[latitude]”:latitude, “coordinates[longitude]”:longitude});
//coordinates[latitude]を””で囲うことを忘れずに。
});
});
</script>

<form>
<input type=”hidden” name=”place” class=”place” value=”FacebookチェックインID”>
<input type=”hidden” name=”access_token” class=”access_token” value=”Facebookアクセストークン”>
<input type=”hidden” name=”coordinates[latitude]” class=”latitude” value=”緯度”>
<input type=”hidden” name=”coordinates[longitude]” class=”longitude” value=”経度”>
<input type=”button” class=”submit_button” value=”チェックインする”>