VisitorAnalytics のため GA4 の設定を行う

こちらのドキュメントでは下記の前提でのドキュメントとなります。

• Google アナリティクスをユニバーサルアナリティクスで利用している (VisitorAnalytics の設定はできている)
• 同アカウントで GA4 プロファイルを作成し、ユニバーサルアナリティクスから GA4 へ移行する

1. Google アナリティクスでの設定

1. Google アナリティクスへアクセス、ログインする
   • 左下の「管理」をクリックして、設定メニューを表示する

2. GA4 プロファイルを作成する

1. 画面中央上部の「プロパティ」からユニバーサルアナリティクスのプロファイルを選択する
2. プロファイルのすぐ下、「GA4設定アシスタント」をクリックする
3. 画面の指示に従ってプロファイルを作成する

参考: Google アナリティクス 4 プロパティを追加する（アナリティクスを導入済みのサイトの場合） - アナリティクス ヘルプ

3. データストリームを追加する

1. プロファイルの下の方、「データ ストリーム」をクリックする
2. 画面の右端、「ストリームを追加」をクリックし、「ウェブ」をクリックする
3. URL などを入力して、データストリームを追加する
4. 追加したデータストリームの「測定 ID」を控える ※

※ 控えた「測定 ID」は Google タグマネージャーで使います。

参考: [GA4] アナリティクスで新しいウェブサイトまたはアプリのセットアップを行う - アナリティクス ヘルプ

4. カスタムディメンションの作成

1. プロファイルの下の方、「カスタム定義」をクリックする
2. 「カスタムディメンションを作成」をクリックし、下記のプロパティを追加する

※ プロパティは Google タグマネージャーにも設定を行うため、変更した場合は後の手順でも適宜変更してください。

※ カスタムディメンション「クライアントID」「訪問日時分」のプロパティは VisitorAnalytics プラグインのプラグイン設定にも指定してください。

5. Google タグ マネージャーの設定

1. タグ マネージャーへアクセス、ログインする

6. テンプレート「GTAG GET API」を追加する

1. 左のメニューから「テンプレート」をクリックする
2. 画面右上の「検索ギャラリー」をクリックする
3. 一覧から「GTAG GET API」を見つけて、クリックする
4. 右上の「エディタで開く」をクリックする
5. 「タグの設定」をクリックし、下記の設定を行い、右上のボタンで「保存」する

7. タグ「GTAG GET API」を追加する

1. 左のメニューから「タグ」をクリックする
2. 画面右上の「新規」をクリックする
3. 下記のように設定を行い、最後に右上のボタンで「保存」する

8. トリガー「gtagApiGet」を追加する

1. 左のメニューから「トリガー」をクリックする
2. 画面右上の「新規」をクリックする
3. 下記のように設定を行い、最後に右上のボタンで「保存」する

9. ユーザー定義変数「現在の年月日時分」を作成する

1. 左のメニューから「変数」をクリックする
2. 見出し「ユーザー定義変数」の右側「新規」をクリックする
3. 下記のように設定を行い、最後に右上のボタンで「保存」する

function() {
    var now = new Date();
    year = now.getFullYear();
    month = now.getMonth()+1;
    day = now.getDate();
    hour = now.getHours();
    min = now.getMinutes();
    return year.toString() + "/" + month.toString().padStart( 2,0) + "/" + day.toString().padStart( 2,0) + " " + hour.toString().padStart( 2,0) + ":" + min.toString().padStart( 2,0);
}

10. ユーザー定義変数「GTAG API - Client ID」を作成する

1. 左のメニューから「変数」をクリックする
2. 見出し「ユーザー定義変数」の右側「新規」をクリックする
3. 下記のように設定を行い、最後に右上のボタンで「保存」する

11. ユーザー定義変数「VisitorAnalytics-ClientID」を作成する

1. 左のメニューから「変数」をクリックする
2. 見出し「ユーザー定義変数」の右側「新規」をクリックする
3. 下記のように設定を行い、最後に右上のボタンで「保存」する
4. 左のメニューから「変数」をクリックする
5. 見出し「ユーザー定義変数」の右側「新規」をクリックする
6. 下記のように設定を行い、最後に右上のボタンで「保存」する

function(){
    var val = {{GTAG API - Client ID}};
    if(typeof val === 'undefined' || val === null){
        return val;
    }
    return val + '.';
}

※ 手順 10. で作成したユーザー定義変数「GTAG API - Client ID」の名前を変更している場合、「カスタムJavaScript」の2行目も変更してください。

12. ユーザー定義変数「VisitorAnalytics-GA4」を作成する

1. 左のメニューから「変数」をクリックする
2. 見出し「ユーザー定義変数」の右側「新規」をクリックする
3. 下記のように設定を行い、最後に右上のボタンで「保存」する
4. 左のメニューから「変数」をクリックする
5. 見出し「ユーザー定義変数」の右側「新規」をクリックする
6. 下記のように設定を行い、最後に右上のボタンで「保存」する

function(){
    var clientId = {{GTAG API - Client ID}};
    if ( clientId ){
      var json_url = "[mt-tracking.cgi の URL]?__mode=welcome&blog_id=[ブログID]&clientId=" + clientId;
      $.getJSON( json_url, function( json ) {
        if ( json[ 'status' ] == 'success' ) {
          document.cookie = 'mt_visitor=' + json[ 'value' ] + '; path=/' + ';domain=[サイトのドメイン]';
          return 1;
        }
      });
    }
    return 0;
}

function(){
    var clientId = {{GTAG API - Client ID}};
    if ( clientId ){
      var json_url = "https://example.com/mt/mt-tracking.cgi?__mode=welcome&blog_id=1&clientId=" + clientId;
      $.getJSON( json_url, function( json ) {
        if ( json[ 'status' ] == 'success' ) {
          document.cookie = 'mt_visitor=' + json[ 'value' ] + '; path=/' + ';domain=.example.com';
          return 1;
        }
      });
    }
    return 0;
}

13. タグ「Google アナリティクス GA4 設定」を追加する

1. 左のメニューから「タグ」をクリックする
2. 画面右上の「新規」をクリックする
3. 下記のように設定を行い、最後に右上のボタンで「保存」する

14. タグ「my_timestamp_event」を追加する

1. 左のメニューから「タグ」をクリックする
2. 画面右上の「新規」をクリックする
3. 下記のように設定を行い、最後に右上のボタンで「保存」する

15. タグ「Google アナリティクス GA4 イベント」を追加する

1. 左のメニューから「タグ」をクリックする
2. 画面右上の「新規」をクリックする
3. 下記のように設定を行い、最後に右上のボタンで「保存」する