自社ブログ記事紹介 – ネイティブ広告の定義は難しいから、本質的なことだけ1つ理解しておこう

この度、弊社のサイトでブログを始めることになりまして、今後は主にそちら記事を書いていこうと思っております。

ご紹介。

ネイティブ広告の定義は難しいから、本質的なことだけ1つ理解しておこう

 

初回は話題のテーマ「ネイティブ広告」で記事を書いてみました。

今後はGoogleアナリティクスの情報なども書いていこうと思ってます。頻繁なチェックと、脊椎反射的な拡散をどうぞよろしくお願いいたします。

【GA】GoogleアナリティクスでFacebookのいいね!ボタンを計測する方法(実装編)

前回の記事に続いて、実装編です。
前回の記事をまだ読まれていない方はこちらからどうぞ。

【GA】GoogleアナリティクスでFacebookのいいね!ボタンを計測する方法(事前知識編)
前回の事前知識編の通り、現在のところどのブラウザでも問題なくGoogleアナリティクスで計測ができるのは、「古いJavaScript SDKの読み込みコード(同期)」のみですので、それで実装する方法について説明したいと思います。

いいねボタンの設置

Facebookの公式ページでは古い同期版のJavaScript SDK読み込みコードの実装方法は載っていません。
下記を参考にタグを記述してください。

<!-- Facebook JavaScript SDK を読み込み -->
<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>

<!-- いいねボタンを表示 -->
<div data-href="YOUR-URL" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-action="like"></div>

<!-- いいねボタンを表示 -->
<fb:like href="YOUR-URL" send="true" layout="button_count" width="450" show_faces="false" action="like"></fb:like>

いいねボタンの設置箇所の記述には色々と属性が付いていますが、すべて必須ではありません。必要に応じて設定してください。

主な属性は下記の通りです。

属性名(HTML5) 属性名(XFBML) デフォルト値 説明
data-href href いいね!するページのURL いいねボタンをクリックしたページのURL いいね!するページを指定する属性。
data-send send true/false false 送るボタンを表示するかどうか。
data-layout layout standard/button_count/box_count standard ボタンのレイアウト。サンプルは公式ページで確認してください。
data-width width 横幅のピクセル値 layout属性によって変化。 ボタンエリアの横幅。ボタン設置場所のデザインに合わせて調整する。
data-show_faces show_faces true/false true いいね!した人の顔を表示するかどうか。
data-action action like/recommend like ボタンを「いいね」にするか「おすすめ」にするか。

他にもオプション項目はありますが、主に使うのはこれぐらいだと思います。

Googleアナリティクスのソーシャルトラッキング設定

Googleアナリティクス側の設定は割りと簡単です。まずソーシャルトラッキング用のjsファイルをサンプルコードページからダウンロードします。

ga_social_tracking.jsサンプルコード

ページ側の「View raw file」を右クリック>名前を付けてリンク先を保存で保存してください。このjsファイルをいいねボタンを設置するページで読み込みます。Googleアナリティクスのトラッキングコードの後、</head>の前に記述するのが良いかと思います。

<script type="text/javascript" src="/js/ga_social_tracking.js"></script>

jsファイルのパスは適宜変更してください。

次に、</body>の直前に下記の記述を追加します。

<script type="text/javascript">_ga.trackFacebook();</script>

以上で、Googleアナリティクス側の設定は終わりです。

まとめ

ということで、すべてまとめると下記のようになります。

<html>
<head>

<script type="text/javascript">

 var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'あなたのWebプロパティID']);
  _gaq.push(['_trackPageview']);

 (function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 </script>

 <!-- Googleアナリティクス ソーシャルトラッキング -->
 <script type="text/javascript" src="/js/ga_social_tracking.js"></script>

</head>

<body>

 <!-- Facebook JavaScript SDK を読み込み -->
 <script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>

 <!-- いいねボタンを表示(HTML5) -->
 <div data-href="YOUR-URL" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-action="like"></div>

 <!-- いいねボタンを表示(XFBML) -->
 <fb:like href="YOUR-URL" send="true" layout="button_count" width="450" show_faces="false" action="like"></fb:like>

 <!-- Googleアナリティクス ソーシャルトラッキング -->
 <script type="text/javascript">_ga.trackFacebook();</script>

</body>
</html>

です。いいねボタン表示用コードは必要な箇所に必要な数だけ入れてください。 それ以外は1回だけで大丈夫です。

本来はこのあとOGPの設定が必要ですが、それは他に詳しいサイトがたくさんあり、また情報も古くなっていないので、ここでは割愛させてください。すいません。

ブログはじめました

いやー、始まりましたね。満を持して。

このブログでは、

  • 社会や仕事について思ったこと
  • アクセス解析やWebマーケティングのこと
  • サラリーマン川柳
  • お料理レシピ
  • 大切だと思ったこと

など、一見統一感のないことをテーマとして、TwitterやFacebookでは書けないまとまった文章を書く場にしていきたいと思います。

このテーマの統一感のなさも「それもこれも私という人間の一側面だ」ということにすれば、皆さんに許していただけるのではないかと、高をくくって臨んでいきたいと思っております。

 

どうぞよろしくお願いします。