ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

Facebook アナリティクスをWebサイトに設定する方法

Facebook アナリティクスをWebサイトに設定する方法

Facebook アナリティクスは、Webサイトのアクセス解析ツールです。Google アナリティクスとは、いろいろな意味で異なる特長を備えたアクセス分析用のツールです。訪問ユーザーの年齢、性別のアクセス動向、コンバージョンやファンネルなどの多彩で幅広い範囲の情報を、1ページで視覚的にも良く分かる形で取りまとめられて表示されます。

Facebook Analytics デモページ

Facebook Analyticsの概要 のページの初めの方に表示されているデモアプリをクリックするとFacebook アナリティクスのデモページを見ることができます。

Facebook アナリティクスの設定方法

Facebook Developer サイトにアクセスします。ページ右上のLog In をクリックして、ログインします。Facebook アカウントにログインしていない場合は、ログイン情報を入力する小ウィンドウが開かれます。メールアドレスとパスワードを入力してログインします。

Facebook Developer サイトにアクセスして、ログインをクリックします。

アプリの作成

アカウントページ上段に表示されるメニュー項目から”My Apps”をクリックして、ドロップダウンリストの中から、”Add New App”を選びます。

ドロップダウンメニューからAdd New Appを選びます。

“Create a New App ID”と表示された新しいアプリID作成の小ウィンドウが表示されます。入力欄にアプリIDの名前とコンタクト先のメールアドレスを入力し、”Create App ID”のボタンを押します。

アプリ名とコンタクト先のメールアドレスを入力します。

以下の様なアプリのプラットフォームを選択するページが表示されます。サイトに設置するOGPタグ用にアプリIDを入する場合は、Webを選びます。

アプリプラットフォームの中からWebを選びます。

アプリの登録手順がアコーディオン形式で表示されます。

Facebook SDKの設置

“Set Up the Facebook SDK for Javascript”のセクションが開かれて、SDKのコードが表示されます。

備考:
Facebook SDKをページに設置すると、Facebookアナリティクス(アクセス解析)やPage プラグインを利用することができます。アナリティクスやPage プラグインをご利用にならないで、単にOGPの設定でApp IDを取得したい場合は、SDKの設置は行わなくても良いです。(スキップ可です。)既にSDKを設置済みの場合は、改めてコードを設置する必要はありません。
Facebook ページプラグインをサイトに設置する方法

Facebook SDKコードとアプリID

Facebook SDKをサイトに設置する場合は、コード表示欄右上の”Copy Code”ボタンを押して、コードをコピーし、サイトの<body>タグ直下にコピーしたコードを貼り付けます。アプリIDは、ページ上段、アプリ名の右に表示されています。APP IDで表示されている番号の部分をクリックすると、App IDをコピーします。コピーしたApp IDを、SDKコード内の、{your-app-id} をApp IDに差し替えます。(ペーストして上書きするなどして、入れ替えます。)

SDKコード内の{api-version} は、ターゲットにするAPI バージョンです。{api-version} の箇所を、最新のバージョンを入力して、入れ換えます。現在の最新バージョンは、v3.1 です。

SDKのサイトの設置が完了したら、”Next”ボタンを押して、次の手続きに移行します。

Webサイトの登録

“Tell Us About Your Website” のセクションが表示されます。

サイトのURLを入力して、”Save”ボタンを押し、続いて”Continue”を押します。

サイトURLを入力します。

イベントの設定

サイトのURLを登録後、”Continue”を押すと、”Logging Web Activity”のセクションが表示されます。

このセクションは、イベントに関する設定の説明部です。Facebook アナリティクスでは、1000までのユニークなイベントを設定することができます。デフォルトでは、ページビューが設定されています。

表示される以下のコードは、SDKコード内に既に含まれています。

FB.AppEvents.logPageView();

カスタムイベントなどを設定しない場合は、特に何もせずに”Next”ボタンを押して次に進みます。

アプリイベントの確認

設定したイベントは、Facebook Analyticsを開いて確認できます。”Applications”の一覧から設定を行っているアプリをクリックすると、アプリに登録したサイトのアナリティクスのページが表示されます。アナリティクスのページ左のメニュー項目の中から、”Activity > Event Debugging”を選択します。設定中のFacebook Analyticsのページ

アプリで設定したサイトのイベント(デフォルト設定でページビュー)が表示されます。表示されない場合は、サイトにアクセスした後に、Facebook アナリティクスのページをリロードして下さい。

備考:
ダッシュボードにイベントが表示されるまでに20分程度かかる場合があります。

Facebook アナリティクスのガイドツアー

“Take a Guided Tour of Facebook Analytics”のセクションが表示されます。demo app のリンクをクリックすると、Facebook アナリティクスのガイドツアーが表示されます。

 Learn More

最後のセクションでは、他のドキュメントページやアドバンスドなガイドへのリンクが貼られています。

Facebook Analyticsのヘルプセンター で、基本的な使い方から高度な機能設定まで詳細な説明とビデオなどがご覧になることができます。

コメントとトラックバック

  • Comments ( 2 )
  • Trackbacks ( 0 )
  1. SDKコードをコピーしてサイトへ貼り付ける方法が分かりませんが。。。

    • コメントありがとうございます。

      Facebook SDKをサイトに設置する場合は、コード表示欄右上の”Copy Code”ボタンを押して、コードをコピーし、サイトのタグ直下にコピーしたコードを貼り付けます。

      サイトのbodyタグ直下にコードを貼り付ける方法は、色々なやり方があります。bodyタグ直下にコードを設置する一般的な方法は、以下のようなものがあります。

      • テンプレート(テーマ)を編集する。
      • プラグインを使用する。
      • タグ直後にコードを設置している機能を備えているテーマの場合は、テーマの機能を利用する。

      bodyタグの直後にコードを設置する例として、以下のページで紹介しています。(Google Tag Managerのnoscriptコードは、FacebookのSDKと同様にbodyタグの直下に設置する必要があります。)
      WordPress テーマ Cocoon にGoogle Tag Managerを設置する方法

コメントを残す(承認後表示されます)

*
*
* (will not be published.)

Return Top