在Google Analytics 4的即時報告中顯示城市分佈

這一篇介紹如何在在Google Analytics 4的即時報告中顯示城市分佈，效果如下：

方案

方案是用第三方API獲取使用者城市資訊，存儲到Cookie裡，然後設定為使用者屬性，再到GA4的自訂定義裡註冊即可。

在這個過程中，有個注意點，頁面加載的時候，第三方API獲取使用者城市資訊要在發送PV之前就執行，這樣PV裡才可以在Cookie裡獲取城市資訊，可以用GTM裡的代碼觸發順序去控制。

設定

設定第三方API

我這裡用的是https://ipinfo.io，打開這個網站可以看到：

這些字段都是可以可以使用的。

用程式將這些資訊寫入到Cookie，程式如下：

<script type="application/javascript">
   $.get("https://ipinfo.io", function(response) {
             console.log("My public IP address is: ", response.ip);
          
   
     var cookieName2= "ipcity";
    var ipnumber  =response.ip;
     var ipcity  =response.city;
    var cookiePath  = "/";
 
    
    var expirationTime = 172800*15;                           
    expirationTime = expirationTime * 1000;
 
    var date = new Date();
    var dateTimeNow = date.getTime();
    date.setTime(dateTimeNow + expirationTime);
 
    var expirationTime = date.toUTCString();
 
    
      document.cookie = cookieName2+"="+ipcity+"; expires="+expirationTime+"; path="+cookiePath;
        }, "json")
</script>

這段程式會將程式資訊寫入到Cookie ipcity裡。

在GTM中新建一個自訂 HTML的代碼，命名為“ipcity”，將前面的程式黏貼進去：

代碼觸發有限順序裡將其設定為999999，數值越大，表示越快執行。

然後保存，不需要觸發條件。

設定代碼觸發順序

“ipcity”需要再基礎PV之前就觸發，打開基礎PV的配置，做如下設定：

表示ipcity在PV之前就觸發。

設定使用者屬性城市

前面的程式會將程式資訊寫入到Cookie ipcity裡。

新建一個“第一方 Cookie”變數，做如下設定：

然後設定使用者屬性：

預覽調試

在GTM裡預覽調試：

準確獲取到城市資訊。

延伸閱讀：新版Google Tag Manager 預覽模式指南——Tag Assistant

註冊使用者屬性

在GA4裡的自訂定義裡註冊使用者屬性，這個使用者屬性才可以在GA4中使用，創建一個自訂維度，然後做如下設定：

延伸閱讀：自訂定義：GA4裡的自訂維度和指標

即時報表

最後你就可以在即時報表中看到：

缺點

如果從第三方API獲取使用者城市資訊比較慢，如PV已經就發送，會導致使用者屬性獲取不到城市資訊。