AFFINGER(アフィンガー)

【簡単!】AFFINGER5(アフィンガー5)Googleアナリティックスを設定する方法

2020年7月7日

 

悩む人
AFFINGER5(アフィンガー5)のGoogleアナリティックスの設定はどうやるのかな?設定方法について、知りたい

 

こんな悩みに答えます

 

本記事の内容

  • 【アフィンガー5】Googleアナリティックスに関する設定
  • Googleアナリティックス設定後にやること
  • 【最新】Googleアナリティクス4に関する設定

 

本記事では、アフィンガー5でGoogleアナリティクスに関する設定手順を解説しています。

 

また、記事後半では、2020年10月のアップデートGoogleアナリティクス4での設定方法についても解説していますので、こちらを見ることで最新の設定も理解できます。

 

※なお、Googleアナリティクスの設定がまだの方は下記記事を参考にしてください。

 

関連記事
【ブログ初心者】WordPressでGoogleアナリティクスを設定する方法

  悩む人 WordPressを使ってブログを開設することができたけど、GAの設定をしないといけないな...どうやるのかな...? 後は、導入後でみておくポイントも把握しておきたい &nbs ...

続きを見る

 

前置きが長くなりましたが、早速解説していきます。

 

 

【アフィンガー5】Googleアナリティックスに関する設定

【アフィンガー5】Googleアナリティックスに関する設定

 

Googleアナリティクスに関する設定は、2ステップでできます。

 

  • トラッキングIDの取得
  • WordPressにトラッキングIDを貼り付ける

 

1つずつ順番に解説していきますね。

 

手順①:トラッキングIDの取得

 

まず、Googleアナリティックスのページを開きましょう。

 

» Googleアナリティクス

※Googleアナリティクスのページにいきます

 

次に、左ナビの歯車アイコン「管理」ボタンをクリックして、プロパティの「トラッキング情報」をクリックします。

 

管理 → トラッキング情報

 

クリックしますとメニューが開くので、「トラッキングコード」をクリックします。

 

トラッキング情報 → トラッキングコード

 

すると下記の画面になるのでトラッキングIDの「UA-」以降の数字をコピーします。

 

管理 → トラッキング情報 → トラッキングID

 

これでトラッキングIDの取得は完了です!
KEI

 

続いてワードプレスの管理画面でトラッキングIDを貼り付けます。

 

手順②:WordPressにトラッキングIDを貼り付ける

 

ワードプレス内の左ナビメニュー「AFFINGER5 → AFFINGER5管理」をクリックします。

 

AFFINGER5 → AFFINGER5管理

 

AFFINGER5の画面になりましたら、この中にある「Google・広告/AMP」をクリックします。

 

AFFINGER5 → AFFINGER5管理 → Google・広告/AMP

 

「アナリティックスコード(トラッキングID)」があるので、この中に先ほどコピーしたトラッキングID(数字)を貼り付けます。

 

アナリティクスコード 

 

最後にページ下にある「save」ボタンをクリックしたら、トラッキングIDの設定は完了です。

 

設定お疲れ様でした!
KEI

 

最後に念のため計測できているかランダムにページを開いて、アナリティクスの「リアルタイム → 概要」から確認してみましょう。

 

 

上記キャプチャのようにカウントされていれば設定は成功です!
KEI

 

Googleアナリティックス設定後にやること

ワイヤーフレームの書き方・ポイントGoogleアナリティックス設定後にやること

 

Googleアナリティクスで自分のアクセスを除外する設定について、解説します。

 

自アクセス除外にしておくと正しい数値が取得ができるので設定しておくと便利ですよ!
KEI

 

手順①:IPアドレスを取得して除外する

 

まず「サーバー監視/ネットワーク監視サービス」にアクセスしてIPアドレスを取得します。

 

IPアドレスとはパソコンなどでネットワーク通信時に利用されるものです。

 

ページに遷移できましたら赤枠の数字をコピーします。

 

 

続いて、Googleアナリティックスを開き「管理 → フィルタ」をクリックします。

 

Googleアナリティックスの管理画面の写真

 

次にフィルタ内の「+フィルタを追加」のボタンをクリックします。

 

Googleアナリティックスのフィルター設定方法

 

そうすると「ビューにフィルタを追加」画面に項目がいくつかあるので、細かい設定をしていきます。

 

IPアドレスのフィルタの設定方法

 

具体的に設定するのは上記の赤ワクで囲った項目です。

 

フィルタの設定

  • フィルタ名:覚えやすいフィルタ名を入力 (例)「自分のアクセス除外」
  • フィルタの種類:「カスタム」のタブを選択
  • フィルタ フィールド:「IPアドレス」を選択
  • フィルタ パターン:「サーバー監視/ネットワーク監視サービス」で取得したIPアドレスを入力

 

最後に「保存」のボタンをクリックしたら設定は完了です。

 

【最新】Googleアナリティクス4に関する設定

【最新】Googleアナリティクス4に関する設定

 

最後にGoogleアナリティクス4に関する設定について解説します。

 

冒頭でも紹介しましたように、2020年10月Googleアナリティクス4のアップデートがありました。

 

アップグレードの特徴として、インターフェースが見やすくなったのと、分析機能が強化された感じです。

 

また、従来でできなかった新しい分析やユーザー一人一人の行動経路を細かく分析できるようになりました。

 

そして、Googleアナリティクスとアフィンガーの紐付けですが、トラッキングIDを取得するやり方ではないようです。

 

ただ、コードを取得して貼りつける手順は変わりませんので、これから設定方法の手順を1つずつ解説していきます。

 

GA4を設定したい方は、これから解説するやり方を参考にしてみてください!
KEI

 

手順①:Googleアナリティクスへのアップデート

 

まずは、Googleアナリティクス4へのアップデートをします。

※すでにGA4のアップデートがお済みの方は、次の手順2にお進みください。

 

まずアナリティクスの左メニュー「①管理 」から、プロパティの「②GA4へのアップグレード」をクリックします。

 

管理 → GA4へのアップグレード

 

そうすると「ようこそ」のボタンがあるので、こちらをクリックします。

 

これで、GA4へのアップデートは完了です。

 

手順②:コピーする

 

続いて、Googleアナリティクス4の管理画面で設定をします。

 

①管理 → ②データストリーム」をクリックします。

 

【GA4画面】管理 → GA4へのアップグレード

 

ここで、「ストリームを追加」をクリックして、ウェブを選択します。

 

 

すると以下の画面になります。

 

 

  • ウェブサイトのURL:自サイトのURLを入力(「http://」 or 「https://」は不要)
  • ストリーム名:ウェブサイト名を入力

 

上記の入力が完了しましたら、「ストリームを作成」をクリックします。

 

すると下記画面になるので、タグ設定手順の中にある『グローバル サイトタグ(gtag.js)』をクリックします。

 

 

以下のように表示されますので、コードをコピーします。

 

 

コードのコピーは完了です。

 

手順③:ワードプレス内にコードを貼り付ける

 

ワードプレスの画面を開き「AFFINGER5 → その他 → コードの出力」に、先ほどコピーしたコードを貼り付けます。

 

 

最後に「保存」をクリックして終わりです!

 

まとめ:AFFINGER5でのGoogleアナリティックスの設定は簡単!

 

いかがでしたか?

 

ここまで、AFFINGER5のGoogleアナリティックスに関する設定について紹介しました。

 

GA4の機能はまだまだアップデート中のようなので、細かい使い方は、引き続きウォッチしていく必要がありそうです。

 

また、最後にGoogleアナリティクスの他にアフィンガーでは設定しておくと便利な機能などがたくさんあります

 

まだ設定していないものがあれば参考にしてみてください。

 

目次の設定

関連記事
【AFFINGER5のカスタマイズ】目次の設定方法【2通りの方法で解説します】
AFFINGER5(アフィンガー5)で目次の設定方法【2通りの方法】

  悩む人 AFFINGER5(アフィンガー5)で目次設定したいけど、どうやって設定するのか知りたいな...。   本記事は、こんな疑問に答えます   こんな方におすすめ ...

続きを見る

 

スライドショーの設定

関連記事
【簡単!】AFFINGER5(アフィンガー5)でスライドショーを設定する方法

  悩む人 AFFINGER5(アフィンガー5)のスライドショーを表示させたいけど、どうやって設定するのかな...?   こんな悩みに答えます。   本記事の内容 カテゴ ...

続きを見る

 

今回は以上です。

 

ここまで読んでいただき、ありがとうございました。

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】▶︎Webディレクター就職(歴8年)(コーディング・SEOが好きです!)▶︎ブログ開設

-AFFINGER(アフィンガー)