EmDashのブログにGoogleアナリティクスを入れた手順|タグマネージャー経由で、ログイン中は数えない

EmDashのブログにGoogleアナリティクスを入れた手順のアイキャッチ

EmDashのブログに、Googleタグマネージャー経由でGoogleアナリティクス4を入れました。アカウントの作り方、タグの設定、プライバシーポリシーの用意、プレビューで「接続できませんでした」と出たときの直し方まで、実際の画面でまとめます。

どれだけ読まれているか、知りたくなった

ブログを公開してしばらくすると、「どの記事が読まれているのか」が気になってきます。そこで、Googleの無料のアクセス解析「Googleアナリティクス4(GA4)」を入れることにしました。

GA4を直接ブログに入れることもできますが、今回は「Googleタグマネージャー(GTM)」を間にはさみました。GTMは、解析などのしくみ(タグ)をまとめて管理する箱です。ブログ側には箱を一度入れるだけで、あとからタグを足したり止めたりするのは、GTMの画面だけで済みます。

EmDashの無料プランでも入れられるんですか?

リス
ひで

はい。料金のプランとは関係なく、ブログの見た目を作っているファイルに数行足すだけで入りました。

全体の流れは次のとおりです。

  1. GA4で「解析の入れ物」を作る
  2. GTMで「タグの箱」を作り、GA4のタグを入れる
  3. ブログにプライバシーポリシーを用意する
  4. ブログにGTMの箱を入れて、本番に反映する
  5. GTMのプレビューで動いているか確かめて、公開する

1. GA4で解析の入れ物を作る

Googleアナリティクス(analytics.google.com)を開き、アカウントを作ります。アカウント名は自分でわかる名前で大丈夫です。同じ画面の「データ共有設定」は、Googleにデータを渡す範囲の選択です。私は「テクニカルサポート」だけ残し、ほかは外しました。

GA4のアカウント作成画面とデータ共有設定

次に「プロパティ」を作ります。プロパティは、1つのサイトの解析をまとめる単位です。名前はブログ名、タイムゾーンは日本、通貨は日本円にしました。

プロパティ名・タイムゾーン・通貨の入力

続いて、ビジネスの情報と、何のために使うか(目的)を聞かれます。個人ブログなら、いちばん小さい規模を選べば十分です。

ビジネスの説明の入力
利用目的の選択

「データの収集を開始する」画面では、「ウェブ」を選びます。

プラットフォームの選択。ウェブ・Androidアプリ・iOSアプリから選ぶ

ブログのURLとストリーム名を入れて、ストリームを作ります。

ウェブサイトのURLとストリーム名の入力

作ると、「G-」で始まる測定IDが表示されます。あとでGTMに入れるので控えておきます(画像ではぼかしています)。

ストリームの詳細。測定IDはぼかしています

2. GTMでタグの箱を作る

Googleタグマネージャー(tagmanager.google.com)を開き、アカウントとコンテナを作ります。コンテナ名はブログのURL、ターゲットは「ウェブ」です。

GTMのアカウントとコンテナの作成

作り終わると、画面の上に「GTM-」で始まるコンテナIDが出ます。これがブログに入れる値です(画像ではぼかしています)。

GTMのワークスペース。コンテナIDはぼかしています

「タグ」→「新規」から、GA4のタグを作ります。タグの種類は「Google アナリティクス」を選びました。

タグの種類の選択

タグIDの欄に、さきほど控えたGA4の測定ID(G-…)を入れます。

タグIDに測定IDを入力。測定IDはぼかしています

トリガー(いつ動かすか)は「Initialization - All Pages」にしました。すべてのページで、いちばん早いタイミングで動きます。タグに名前を付けて保存します。

タグ名を付けて保存
タグの一覧にGA4のタグが並んだところ

3. 先にプライバシーポリシーを用意する

アクセス解析を入れると、読者の閲覧の情報がGoogleに送られます。そのことを読者に伝えるため、GTMを入れる前にプライバシーポリシーのページを作りました。

書いたのは、次のような内容です。

  • GTMとGA4を使っていること、何のために使うか
  • 集める情報(見たページ、おおよその地域、端末の種類など)と、名前やメールアドレスは集めないこと
  • 解析を止めたいときの方法(Cookieを無効にする、Googleのオプトアウトアドオンを使う)
  • ほかに情報が送られる外部のサービス
  • お問い合わせ先

EmDashでは「固定ページ」として作り、ページの下(フッター)からリンクしました。

4. ブログにGTMの箱を入れる

EmDashには、GTMを入れる設定の欄はありません。そこで、すべてのページで使われる共通のレイアウト(ページの外側の型)に、GTMが用意しているコードを足しました。

  • <head> のいちばん最初に、GTMを読み込むスクリプト
  • <body> のすぐあとに、スクリプトが動かないとき用の短いコード

コンテナIDは「GTM-」で始まる形のときだけ読み込むようにして、書き間違いで変なものを読み込まないようにしています。

リス
ひで

もう一つ工夫したのが、管理画面にログインしているあいだは読み込まないことです。自分が記事を確認するたびに数えられると、本当の読者の数がわからなくなるからです。

コンテナIDはページのソースに出る公開の値なので、秘密の情報ではありません。直したら、いつもどおりビルドして本番に反映します。

5. プレビューで確かめて公開する

GTMの「プレビュー」を押して、ブログのURLを入れると、Tag Assistantという確認用の画面が開きます。ここで最初につまずきました。

Tag Assistantで「接続できませんでした」と出た画面

原因は、ブログの管理画面にログインしたままだったことです。4で書いたとおり、ログイン中はGTMを読み込まない作りにしていたので、Tag Assistantからは「タグがない」ように見えていました。

ブログからログアウトして、もう一度プレビューを開くと、「接続しました」に変わりました。「配信されたタグ」にGoogle アナリティクスが出ていれば、正しく動いています。

「接続しました」と、配信されたタグにGoogle アナリティクス

確かめられたら、GTMの「送信」→「公開」で完了です。GA4の「リアルタイム」の画面に、ログアウトした自分やスマホからの閲覧が出れば、解析が始まっています。

まとめ

  • GTMを間にはさむと、ブログ側は一度コードを入れるだけで済む
  • GA4は測定ID(G-…)、GTMはコンテナID(GTM-…)。ブログに入れるのはGTMのIDだけ
  • 解析を入れる前に、プライバシーポリシーを用意する
  • ログイン中は数えない作りにしたら、確認はログアウトして行う

次に読むなら

コメント

    名前やメールアドレスは不要です。いただいたコメントは、確認してから公開します。

    0 / 1000