WordPressでGoogle Analytics導入

Webマーケティング

最初に

最初の投稿 にて記載していた、アクセス解析ツール「Googleアナリティクス4」を導入していきます。

WordPressでGA4を導入することで、以下のポイントがわかります。

  • どのページが人気なのか
  • どれくらいのユーザーがサイトに訪れているのか
  • そもそもどこからサイトに来てくれているのか

上記のポイントはごく一部で、使い倒せば倒すほど様々なことを発見することができます。まだ導入していない、難しそうでやってないという方はぜひ導入してみてください！（導入は “無料” です…！）

すぐ本編に入りたい方は、目次から目的のセクションに飛んでください。

目次

対象者

  • Webサイトを分析したい方
  • GA4を導入しようと考えている方

本記事では、WordPressを利用して導入しますが、WordPressを利用していない方も、参考になる記事になると思いますので、参考にしていただけると幸いです。

どうやって導入するの？

GTM（Google Tag Manager の略）を使ってGA4（Google Analytics 4 の略）を導入します。

GTMはその名のとおり、タグを管理するサービスです。
メリットとしては、 Webサイトのコードを直接書き換えずとも、GTMの管理画面から変更ができる点にあります。

HTMLやCSS、JavaScriptなどのプログラミング言語を扱えない人でも画面上をぽちぽちするだけでユーザーの行動を追うことができる、ということです。

企業が扱っているサービスでもあるため、難しいと感じるかもしれませんが、本記事ではなるべくわかりやすく解説します。

Webエンジニアの方向けのメリットとしては、仕様変更などによってフロントエンド側のリリースが必要なくなる点に尽きるでしょう。（場合によるとは思いますが…）

導入方法

導入イメージ

Webサイトを構成するHTMLの中に、タグを仕込むことで分析ツールのような外部サービスを導入することができます。 このタグをどのように準備するのか、どのように仕込むのかを解説していきます。

具体的には、GTMのタグをWebサイトに埋め込み、GAタグをGTMで埋め込むまでを解説します。（全て無料で利用できるサービス）

ステップは以下のとおりです。

  1. GTMのアカウント、コンテナを作成（無料）
  2. WordPressとGTM を連携
  3. Googleアナリティクスのアカウント、プロパティの作成（基本無料）
  4. GTMでGAタグを埋め込む

構成のイメージ図

GTMタグじゃなくて初めからGAタグを直接埋め込めば良いのでは…？と思った方もいるかもしれません。

そのとおりです。

GAタグを直接埋め込むことで、GA4の導入はできます。

GTMいらないじゃん、と思われるかもしれませんが、他サービスのタグを導入することになったときに、間違えて他のコードを変更してしまい、「デザインがおかしくなった」「不具合を招いてしまった」という事故を未然に防ぐことができるのは、GTMを導入するメリットとして大きいと思います。

では早速、GA4の導入をしていきましょう。

GTMのアカウント、コンテナを作成（無料）

  1. Googleアカウントにログイン
  2. Google タグ マネージャーの概要 – タグ マネージャー ヘルプ より、右上の「タグ マネージャー」からアカウント作成
    • アカウント：企業名など
    • コンテナ：Webサイト名など
    • 参考：どちらも同じ名前でも問題ないですが、今後複数のサイトを運営するなら、アカウント名を「ブログ」や「EC」などにしても良いかもしれません。
  3. 規約同意後、「Google タグ マネージャーをインストール」画面が出たら「OK」をクリック
    • コピーすべきコードはあとでも確認できます
      • “公開” や “プレビュー” があるヘッダーの「GTM-xxxxx」をクリックすることで確認することができます
      • WordPressを使ってない人は、このコードを案内のとおりに埋め込んでください

アカウント、コンテナ作成後、以下のような状態になります。

GTMトップページ（ログイン済みの場合）

コンテナトップページ

WordPressとGTM を連携

  1. WordPressの管理画面 > プラグイン > プラグインを追加 から、プラグイン「Site Kit by Google」をインストール、有効化します
    • 検索窓から「google」などで検索するとヒットします
  2. 左のサイドバーに、「Site Kit」が追加されるので、そちらをクリックし、Googleアカウントと紐付けを行います
  3. 同意をして進むと、「Search Console」というツールが自動で導入されます
    • Search Consoleは、WebサイトがGoogle検索でヒットされているのかなどを分析することができる無料ツールです。
  4. 設定から、「他のサービスに接続」に移動し、「タグ マネージャー」のセットアップに進んでください
    • ログインしているアカウントに紐づいているGTMのアカウントやコンテナが出てきますので、紐付けたいものを選択してください

Google アナリティクスのアカウント、プロパティの作成（基本無料）

大きな流れとしては以下のとおりです。

  1. Googleアカウントにログイン
  2. アナリティクスの概要 – アナリティクス ヘルプ より、右上の「アナリティクス」からアカウント作成
  3. アカウント作成に必要な情報を入力していきます
    • アカウントの作成
      • アカウント名：企業名など
      • 基本的にはチェックボックスは触らずに進んで問題ないです
    • プロパティの作成
      • プロパティ名：Webサイト名など
      • レポートのタイムゾーン：日本（GMT+09:00）日本時間
        • 基本は日本時間で問題ないですが、海外に住んでいて海外の人向けにサイトを作る場合などは適宜調整してください
      • 通過：日本円（¥）
        • ECサイトなど売上が発生するサイトの場合はちゃんと設定しましょう
    • お店やサービスの詳細
      • 業種
      • ビジネスの規模
        • 企業の規模に合わせて設定しましょう
        • 個人ブログであれば、「小規模」を選んでください
    • ビジネス目標
      • チェックした目標に沿って自動でカスタマイズしてくれます
      • あとから自分でカスタマイズすることも可能ですので、その他を選択して次に進んでも問題ありません
      • 個人ブログに導入する場合は「ウェブ / アプリのトラフィックの分析」がおすすめです！
    • ここまで進めると、Google Analytics の同意画面が出るので、中身を確認し同意しましょう
    • データの収集
      • あとから設定できるので、「今回はスキップ」をクリックしましょう

今の設定状況

ここからGTMを利用してGA4の繋ぎこみを行います

GTMでGAタグを埋め込む

GTMの解説は別の記事で紹介します。今回はGA4の導入にフォーカスを当てます。

GA4の測定IDを取得しよう

GA4にアクセスし、左サイドバー > 管理（歯車マーク）> データの収集と修正 > データストリーム をクリック

ストリームを追加より「ウェブ」を選択して、対象サイトのURLやサイト名を記入し「作成して続行」をクリックしてください。（拡張計測機能のチェックはそのままで大丈夫です）

作成後、作成したストリームをクリックすると、測定ID（「G-xxx」の部分）が確認できますので、コピーしておいてください。

GTMでGAタグを設定

GTMで先ほど作成したコンテナを開いてください。
左サイドバーにある「タグ」をクリックし「新規」をクリックしてください。下記のような画面になります。

タグの設定 > Google アナリティクス > Google タグ を選択すると、以下のような画面になります。

タグIDに、先ほどGA4で取得した「測定ID（G-xxxのやつ）」を入力してください。

トリガーは変更せず、「名前のないタグ」→「GA4タグ」など任意のタグ名で保存してください。

💡エンジニア向けTips💡

変数からルックアップテーブルを利用することで、測定IDを可変に設定することができます。
また、環境という機能もあるので合わせて検討するとスッキリした構成になると思います。

ルックアップテーブル イメージ図

GTMのプレビュー・公開

画面上部にある「プレビュー」ボタンから、設定したタグの動作確認ができます。

WebサイトのURLを入力して「リンク」ボタンをクリックすると、プレビューが始まります。

以下のようなページで、左サイドバーの「初期化」をクリックし、配信されたタグに先ほど設定した設定タグがあることを確認してください。このような状態であればタグはしっかりできています。

設定したタグが配信されていない場合は、以下を確認してみてください。

  • GTM
    • タグに設定した測定IDが正しいこと
    • タグ設定のトリガーが「Initialization – All Pages」になっていること
  • WordPress
    • Site Kitで設定したGTMコンテナを選び間違えていないこと

最後に設定したタグを公開（リリース）します。

画面上部にある「公開」ボタンをクリックして、バージョン名を「GA4の導入」などで公開しましょう。

これで分析ツール「Googleアナリティクス4」の導入は終わりです。
お疲れ様でした！

最後に

すでにアクセスユーザーがいれば、GA4のホーム画面などからイベントが飛んでいることがわかると思います。ワクワクしてきますね…！ぜひツールを使い倒してください。

今回出てきた「Googleアナリティクス4（GA4）」「Google Tag Manager（GTM）」「Search Console」の機能などを紹介する記事を今後書いていこうと思います。

あらためて、本記事を拝読いただきありがとうございました！