ユニバーサルアナリティクスからGoogleアナリティクス4へ移行する

2023年7月1日から現行のユニバーサルアナリティクス(以下UA)は使えなくなるとのことなので、Google アナリティクス 4(以下GA4)に移行します。
来年UAが終了するまでUAとGA4は平行運用できますが、UAに溜まっている過去のデータは移行できないので、早めにGA4の設定を追加して併用を開始し、来る日に向けてGA4にデータを溜めておいたほうが良さそうです。(今設定すれば1年分は溜められる！)

追記:とても詳しいサイトを見つけたので、そちらを見たほうが良いかもしれません。
[Google Analytics 4 ガイド](https://ga4.guide/)

# GA4設定アシスタントでGA4用のプロパティを作る

UAに移行用のアシスタントが用意されているので、それを使ってGA用のプロパティを作ります。(元のUAのプロパティはそのまま変わらないので、影響ありません。)
左下の歯車アイコンの『管理』を開き、真ん中のプロパティ列の一番上にある『GA4 設定アシスタント』を開きます。
![スクリーンショット 2022-04-14 15.10.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/d7b1c597-414f-308d-50d7-0212a7340496.png)

『はじめに』を押します。
![スクリーンショット 2022-04-14 15.10.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/c247bb35-02b1-5cdd-df5b-ee54c24d7712.png)

現状のUAをgtagで設定している場合(わりと最近設定した場合はgtagで設定しているはず)は、『既存のタグを〜』にチェックが入っていますが、外します。(チェックするとどうなるのかよくわからないので、有効にしたい場合は調べてください。)
だいぶ前に設定して、analytics.jsを使ってUAを設定している場合は、チェックできなくなっています。
『プロパティを作成』を押します。
![スクリーンショット 2022-04-14 15.11.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/8b349af2-2fdd-da78-6022-0132964671d4.png)

元のプロパティ名の後ろに『- GA4』が付いたプロパティが作成されたので、確認します。
![スクリーンショット 2022-04-14 15.11.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/5cd9b787-53d1-adf7-dd00-44196d0e3835.png)

# 設置タグを用意する
UAと併用するタグを自分でソースやCMSに貼る場合について説明します。

『タグの設定』を開きます。
![スクリーンショット 2022-04-14 15.12.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/75893d49-ef59-0707-1329-2ff4ab69cea6.png)

ウェブストリームの詳細画面が開くので、『タグ設定手順』を開きます。
![スクリーンショット 2022-04-14 15.13.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/e7c01c8a-7eb2-6042-35cc-8eaae1ef8f2f.png)

貼るべきタグが出てくるので、コピーします。
![スクリーンショット 2022-04-14 15.13.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/7a0fd12e-ae49-5b40-1237-dc05cdddb443.png)

## すでにgtag.jsでUAのタグを設置している場合
上記でコピーしたものとほぼ同じタグ(IDの部分だけが違う)がすでに設置されていると思います。
その場合は、既存のタグの最後の`gtag('config', 'UA-XXXXXXXXX-X');`の部分だけを、上記でコピーしたタグの`gtag('config', 'G-XXXXXXXXX');`の次に追加します。
(既存のものに第3引数が指定されている場合は、同様に指定すれば良いと思います。)

以下のようになるので、既存のタグと差し替えます。
```html
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXX');
  gtag('config', 'UA-XXXXXXXXX-X');
</script>
```

## analytics.jsでUAのタグを設置している場合
特にカスタマイズしていない場合は、以下のようなタグが設置されていると思います。
```html
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXXX-X', 'auto');
  ga('send', 'pageview');
</script>
```
この場合は、上記でコピーしたタグの`gtag('config', 'G-XXXXXXXXX');`の次に旧UAのIDを入れた`gtag('config', 'UA-XXXXXXXXX-X');`を追加すれば良いです。

UAで何か違う設定を追加したり、イベントを追加していたりする場合は、まずgtag.jsへ移行(gtag.js用に書き換えたタグを用意)する必要があります。
【参考】
https://blog.siteanatomy.com/gtag-js-migration/
https://developers.google.com/analytics/devguides/collection/gtagjs/migration?hl=ja

gtag.jsでの記述が完成したら、既存のタグと差し替えます。

# Google シグナルを有効にする
より多くのユーザーデータが収集できるそうなので、Googleシグナルを有効にします。
![スクリーンショット 2022-04-14 15.15.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/2e0cdde0-c4b7-2bf4-a3de-1ce35bb07859.png)

『利用を開始する』を押します。
![スクリーンショット 2022-04-14 15.15.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/2cbcbdfb-4344-02a4-397c-452e985d2219.png)

何回か聞かれますが、続行、有効にするを選んで有効にします。(何ができるかとか書いてあるので読んでください。)

# イベントデータの保持期間を変更する
デフォルトで2か月になっているので、短い場合は14か月に変更します。(現状では2か月か14か月しか選べません。)
![スクリーンショット 2022-04-14 15.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/5145a4b8-5872-de1d-8feb-74c151b8d5c8.png)

# 他サービスとの連携
Google広告やSearch Consoleを使用している場合は、リンクをして連携することができます。
管理→プロパティ列の下の方に『サービスとのリンク』があるので、それぞれ使用している関連サービスとリンクしておきます。

# フィルタの設定
UAには1つのプロパティに複数のビューが設定できたのでフィルタで振り分けたりできたのですが、GA4にはビューという概念がなくなりました。
そして、フィルタは『内部トラフィック』と『デベロッパートラフィック』しか作れないようです。
内部トラフィックのフィルタは、例えば社内IPからのアクセスを除外する用途に使用します。
デベロッパートラフィックのフィルタは、設置タグの`gtag('config', 'G-XXXXXXXXX');`を`gtag('config', 'G-XXXXXXXXX', {debug_mode: true});`にするとデバッグモードのイベントと認識される(設定→DebugViewでリアルタイムに詳細を確認できる)のですが、そのデバッグモードのものは除外する、ということができます。

UAの時にURLの正規表現フィルタによって複数ビューを作って確認していたようなこと(開発用と本番用で分けるとか、開発は除外とか)はできないので、分けたい場合はレポートを工夫したり、除外したい場合はそもそもタグを貼らないようにするのが良いのかもしれません。

## 内部トラフィックフィルタの設定
除外するIP(社内のIP等)を設定します。

データストリームを選択して、一覧から該当のストリーム(他に設定していなければ1つしかないはず)を選びます。
![スクリーンショット 2022-04-15 13.01.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/c4b5863b-acf5-9925-9b9f-42f8f1940b34.png)

一番下のタグ付けの詳細設定を開きます。
![スクリーンショット 2022-04-15 12.28.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/7c346fc9-002f-e24c-f408-aaa618eac560.png)

内部トラフィックの定義を開きます。
![スクリーンショット 2022-04-15 12.24.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/a34b6ec9-15a1-e998-116a-f8b0ecf387ba.png)

作成を押して、内部トラフィックルールを作成します。(除外するIPを設定します。)
![スクリーンショット 2022-04-15 17.49.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/f6ee6776-46a4-e027-065e-04431a237afb.png)

フィルタ自体はすでにあると思うので確認します。
![スクリーンショット 2022-04-15 15.03.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/8a98386d-8637-5b46-5e98-f8f87c654828.png)
現在の状態が『テスト』になっているので、まだ実際に除外はされていません。
テスト状態のときには、リアルタイムレポートで、フィルタが正しく作用しているか確認することができます。

## フィルタの動作確認
リアルタイムレポートを開いて、右上の『比較データを編集』ボタンを押して、新しい比較を追加します。
![スクリーンショット 2022-04-15 15.13.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/2e733d3d-40c1-e14f-2e62-730c71edca7c.png)

* 除外
* テストデータのフィルタ名
* Internal Traffic

を選んで適用を押します。
![スクリーンショット 2022-04-15 15.15.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/f29b6e77-5aeb-4a37-2216-89c472546ecb.png)

左側にすべてのユーザー、右側にフィルタで除外されたものが出るので、さっき設定した除外IPからアクセスしてみて、左には出るけど右に出なければ正しく動作していることが確認できます。

問題なければ、フィルタの設定で『テスト』になっていたところを『有効』に変更します。

# コンバージョンの設定
UAでコンバージョン(目標)の設定をしていた場合は、GA4でも設定します。
設定→イベントを確認します。
![スクリーンショット 2022-04-15 16.43.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/ac53b813-545f-1307-150d-fd3924fc4918.png)
発生しているイベントが既存のイベント一覧に出るので、タグを設置してからデータが溜まるまでしばらく待ったほうがいいかもしれません。
イベントごと(そのイベントを全部)コンバージョンにする場合は、『コンバージョンとしてマークを付ける』をオンにします。(上記の例ではsearchイベントをコンバージョンとしています。)

イベント全てではなく、例えば登録フォームがあって、登録が完了したら `/register/comp` というURLのページが表示されるのを計測したいような場合は、`/register/comp` のpage_viewをカスタムイベントとして作成します。
さっきのページの『イベントを作成』ボタンを押してカスタムイベントを作成します。
![スクリーンショット 2022-04-15 17.17.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/ed496028-2994-9b00-6e91-2a6ce36b2950.png)

次にコンバージョンのページで、今作成したカスタムイベントをコンバージョンイベントとして追加します。
![スクリーンショット 2022-04-15 17.25.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/493e115c-fe4b-9eef-eb7d-7c1be7da524f.png)
作成したカスタムイベント名を入れて保存します。
![スクリーンショット 2022-04-15 17.25.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75498/85f7d7b1-ed97-7a4e-53e5-269d160a5286.png)

カスタムイベントがコンバージョンに設定できました。

# おまけ
Chromeの拡張機能に [Google Analytics Debugger](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna) というのがあるので、それを入れて ON にすると、ChromeのDevTool(右クリック→検証で出るやつ)のコンソールに、gtagとanalyticsのデバッグログが出るので、ちゃんと動いているか(タグの設定ミスでエラーが出ていないか)を確認することができます。便利！

本番運用中のタグの差し替えは少しドキドキしますが、新しいタグを貼ったテストページを用意して確認すれば、うまく計測できているか、エラーが出ていないか確認できるので、まだ1年以上あるからそのうち…と先延ばしにしないで、早めに設定しましょう！