GoogleAnalyticsのセットアップとZennのPV解析

目的

GoogleAnalyticsを設定して、ZennのPVをカウントできるようにします。

内容

GoogleAnalyticsでZennのPVをカウントしようと調べてみたところ、GoogleAnalyticsのセットアップ方法については大量の記事が見つかりましたが、2020年秋に仕様が変わったようで、本記事作成時にはそのままの手順ではできませんでした。
そのため、本記事では作業ログ的に手順をまとめました。
(2020/12/20時点)

主な内容は以下の通りです。

• GoogleAnalyticsのセットアップ
• Zennの設定
• 動作確認

GoogleAnalyticsのセットアップ

まずはGoogleAnalyticsをセットアップします。
下記URLにアクセスして、「無料で設定」ボタンを押してセットアップを開始します。
https://analytics.google.com

アカウント設定

セットアップを開始すると、まず「アカウントの設定」を行います。
「アカウント名」は適当で構いませんので、何かしら設定します。

その下の「アカウントのデータ共有設定」は特に触らず、4項目すべてチェックを入れた状態で、次に進みます。

プロパティ設定

続いて「プロパティの設定」をおこなます。
「プロパティ名」は適当に設定します。
プロパティ単位に複数のトラッカーを設定できますので、ここでは「blog解析」としました。
「レポートのタイムゾーン」と「通貨」は必要に応じて変更してください。

なお、詳細オプションから「ユニバーサル アナリティクス プロパティの作成」を選択できます。
こちらが従来の方式のようですが、今後は非推奨のようですので無視して次に進みます。

ビジネス概要設定

続いて「ビジネスの概要」を設定します。
こちらも必要に応じて設定してください。

「ビジネスの概要」を設定したら、「作成」ボタンを押して次に進みます。
「Google アナリティクス利用規約」が表示されるので、画面の指示に従い規約を同意すると、Analyticsのプロパティが作成されます。

メール配信設定

プロパティが作成されると下記の画面にて「メール配信」設定が表示されます。
特に必要なければ、「保存」または「すべてをオフにして保存」ボタンを押します。

データストリームの作成

続いて解析対象となる「データストリーム」を作成します。
画面左下にある「管理」(歯車のアイコン)を選択し、表示された一覧より「データストリーム」を選択します。
すると、「iOSアプリ」「Androidアプリ」「ウェブ」のボタンが表示されるので、ここでは「ウェブ」を選択します。

上記画面で「ウェブ」を選ぶと下記のようなダイアログが表示されるので、解析対象となるURLを設定します。
ここでは zenn.dev を指定します。
ストリーム名は区別できるように適当な名前をつけます。
設定が完了したら「ストリームの作成」ボタンを押します。

データストリームが作成されると以下のような画面が表示されます。
この画面の「測定ID」が肝になります。
「G-**********」という「G-」から始まる12桁の値になります。
この値をコピーしておきましょう。
ID横のアイコンを押すことでクリップボードにコピーできます。

GoogleAnalytics設定の完了

以上でGoogleAnalyticsの設定は完了です。
「測定ID」についてはGoogleAnalyticsの「管理」＞「データストリーム」からいつでも確認できます。

なお、この画面で別のデータストリームを作成することで、複数のURLを解析することが可能になります。

Zennでの設定

GoogleAnalyticsでZennのPV解析できるように、Zenn側の設定を行います。
まずはZennのプルダウンメニューから「アカウント設定」を選択します。

画面上部のタブで「アカウント」を指定し、「GoogleAnalytics」の「トラッキングIDを設定」ボタンを押します。

「GoogleAnalytics」の設定画面が表示されるので、先ほどコピーした測定ID(トラッキングID)をコピペし、「保存する」ボタンを押します。

以上で、設定は完了です。

動作確認

設定が正しく出来ていれば、GoogleAnalyticsにアクセス履歴が表示されているはずです。
「リアルタイム」を選択すると直近30分の解析結果が表示されますので、こちらで確認するのが良いでしょう。

トラブルシュート

自身のアクセスがGoogleAnalyticsに反映されない

今回始めてGoogleAnalyticsを設定してみましたが、自分自身のアクセスがちっとも反映されずに悩みました。
設定があっているのか確認したかったのですが、深夜帯だったため他人からの自分の記事へのアクセスもなく、確認できずに途方に暮れていましたが、Chromeのデベロッパーツールを開いたところ、以下の画面のように表示されました。

赤線部分には設定したトラッキングIDが表示されているので、設定自体はあっていそうでしたが、クライアントによってブロックされたとのログが出ていました。
結局の所、AD Blockの拡張機能がブロックしていただけで、これを無効化したところ正常に反映されるようになりました。
AD Blockを入れている場合は、トラッキングできないんですね…