GA4基本設定：GTM 自訂事件、內部 IP、跨網域設定

作者： -

你已經熟悉這個以消費者為觀察核心的 Google Analytics 4 介面了嗎？

相信不少人應該跟我一樣，在導入 GA4 之後，第一件事就是想辦法趕快把自訂事件和轉換設定好，但要怎麼設定？事件標籤、事件動作怎麼都不見了？

從 GTM 介面直接新增自訂事件

在beta版消失之後，GTM的自訂事件介面變得比較簡單。首先，代碼設定選擇「Google Analytics (分析)」裡面的「GA4 事件」。

GA4事件

接著，在評估 ID 欄位填寫你的GA4評估 ID。

如果你不知道「評估 ID」在哪裡，你可以在GA4介面的「管理」→「串流」→「網頁串流詳情」找到它。

評估ID的欄位位置

之後，自己想一個「事件名稱」填入欄位中，這裡我們取名為「edm_link_click」，並在下方的參數欄位填入要追蹤的參數（參數名稱隨便取，這裡取名「link_text」是為了讓大家知道，如果已經有同名的GA4參數，旁邊會出現一個勾勾）。

事件名稱與事件參數

我想要寫在網頁上

如果想要把事件寫在網頁上，跟以前的GA有點像，在要觸發的地方將事件名稱push進dataLayer：


window.dataLayer.push({'event': 'edm_link_click'});

接著，到GTM介面的觸發條件區域先建立「自訂事件」，事件名稱要跟上面的code一樣填寫「edm_link_click」，接著一樣在代碼設定裡新增GA4事件，「觸發條件」就是前面建立的自訂事件。

當然，dataLayer.push 跟以前一樣能push其它參數，官方的例子也有提到。

回到 GA4 介面

待 GA4 收到資料之後，點擊「報表」→「參與」→「事件」，查看自己在 GTM 設定的「edm_link_click」有沒有出現在資料當中。

GA4自訂事件列表

點擊該事件進去看相關的詳細資料，這樣子一個基本的自訂事件就算大功告成了。（自訂維度出現在資料中的時間並不固定，有可能數小時，也有可能一週之後才出現）

而詳細的數據必需到左列的「探索」或是到 Looker Studio（舊稱Google Data Studio）自己拉維度和指標才行。

GA4事件參數

定義內部流量

  1. 進到「資料串流」，選擇你要設定的串流名稱。
  2. 點擊「更多代碼設定」。
  3. 點擊「定義內部流量」，設定你的IP。traffic_type 值用預設的 internal 就可以了。
  4. 離開「資料串流」回到最上層找「資料設定」
  5. 選擇「資料篩選器」，看是要設定成完全排除或是放在維度區隔。

GA4 內建的過濾器設定除了內部IP之外，還有排除網域來源的功能，但依然有許多明顯是垃圾流量的數據無法單靠 GA4 排除（也就是說你必須想辦法自己寫程式或從server排除）；在沒有其它排除 spam 的手段下，數據必定會失針，還請多加注意。



跨網域設定

  1. 點擊「資料串流」。
  2. 點擊該「資料串流」，進入「進行代碼設定」。
  3. 在「設定網域」中編輯要比對的網域。

之後，如何知道設定成功了？網址會產生連接器參數「_gl」，例如 https://example.com/?_gl=1*xyz5*。

雖然官方的範例網址看起來很短，但實際上還會出現「_ga」的參數讓網址變得很長。



利用探索報表利於觀察數據

這是我自己個人的感覺。使用 GA4 勢必會到「探索」自己拉表格，除非是要看使用者路徑，要不然我認為在 Looker Studio 拉會比較快又好看。

另外，在探索報表按右鍵「查看使用者」想看使用者路徑，常常會跳出「載入這個元件的資料時發生錯誤」的訊息，我只好自己再創一個「使用者多層檢視」的表格，再盡量用日期或篩選器去猜那個我想看的使用者的使用者活動。



相關連結：

留言

張貼留言

這個網誌中的熱門文章

用CSS的 min() max() 與vw，設計有極限值的RWD響應式文字

作者： -
圖片
你是否有想過，能不能單靠 CSS 設計出會自動調整大小的 Responsive Font Size？答案是可以的！只要設定字體的最大值和最小值就可以辦到。 文章目錄： vw 基本運用 極限問題 Media Query max()、min() If you just want the best solution, just click "max()、min()" . 為何使用 vw？ 在編寫 CSS 的時候，你可能習慣將網頁上的字體大小(font-size)使用 rem、em、px 等單位設定，但在講究 RWD 的情況下，甚至是 Google SEO 著重在手機介面的現在，總是會遇到桌機看起來很舒適，但畫面一變小，標題類的字就又太佔版面。 而使用 viewport width (vw) 當作字體大小的單位，就可以讓字體隨著視窗寬度的不同自動縮放其大小。 各瀏覽器支援 vw 的情況 vw 基本運用： vw 是視窗寬度的百分比，所以 1vw = 1%的視窗寬度。舉例來說，當視窗寬度為 1000px 且 font-size: 1.5vw 的時候，字體的大小就是 1000*1.5% = 15px。 h1,.h1{ font-size: 1.5vw; } 除了直接運用之外，也能搭配 calc 使用： h1,.h1{ font-size: calc(10px + 1.5vw); } 極限問題（max or min font size） 這是不管設計什麼東西都存在且必需要考慮的事情，vw 也不例外。 設計網頁一定會設一個網頁寬度，以此寬度設定做為最大值；而人的視力有限，以 16px 當作最小值。所以，當視窗被拉到極大或極小的時候，以 vw 為單位的字體勢必會變成你不想要的樣子，這時候我們就必需設定最大值和最小值，讓字體在合理的區間變動，而 media query 和 min()、max()就出現在解決辦法的清單之中： Media Query 下面為使用的例子： h1,.h1{ font-size: 3.5vw; } @media (min-width: 1600px) { h1,.h1{ font-size: 40px; }
READ THIS »

運用資料層 dataLayer.push 建立 GTM 自訂事件

作者： -
圖片
GTM（Google Tag Manager；網頁代碼管理工具）最大的好處在於讓頁面較整潔、許多系統已經寫好的事件與變數可以直接拿來用，非常方便。但現實往往沒那麼簡單，通常都會遇到一堆 ajax、history 或 cache 要處理，這時候就要請到自訂事件出馬了。 若只用 GA，沒有使用 GTM 的話，自訂事件要這樣寫： gtag('event', ..., { 'event_category' : ..., 'event_label' : ... }); 那如果用 GTM 的話該如何操作呢？ 將資料 push 進 dataLayer 首先我們要知道什麼是 dataLayer：一個 GTM 內部的全域變數，它能動態存取網頁的使用者行為數據。 更進一步探索它的   JSON   架構，可以在網頁上使用開發者工具(F12)的 console 欄，輸入 dataLayer，其實跟它的名字一樣就是層層分明的資料層 (Data Layer)。 在 F12 中查看 dataLayer 你會發現 GTM 測試欄位左邊有幾個事件，dataLayer 裡面就有幾個 object。 再把 object 點開（這裡以 Window Loaded 為例），會有 event 和 GTM 給的事件 id，而這個事件（gtm_load）其實就是「觸發條件」裡的「視窗已載入」。 因此，我們可以依樣畫葫蘆用 dataLayer.push 自己寫一段觸發條件把資料送進 dataLayer ，就可以在 GTM 裡面操作了： 開始設定自訂事件 先宣告 dataLayer，避免發生 undefined error 再設定你要 push 進去的數據 這裡我們用「 nav a 點擊偵測」和 ajax 事件舉例（jQuery）： var dataLayer = window.dataLayer || []; // example 1: detect nav a tag click $('nav a').click(function(){ var $text = $(this).text(); dataLayer.push({ 'event'
READ THIS »

10 steps to Create「Lil Yachty meme」AI generated Video (Viggle AI)

作者： -
圖片
日本近期流行的「ライブ会場を沸る」或是稱為「フロアを沸かす」的迷音AI短片，是怎麼製作生成的？下面我們用英文和影片一步一步做，完全不用動腦。 操作步驟 steps: Enter to Viggle AI's Discord server (https://discord.gg/viggle). On the left-hand side, you can see several rooms named "animate". These rooms are where you can generate AI animations. Select any of these rooms and click to enter. Type "/" to bring up a list of commands. Select "animate" from the list of commands. Upload your image. motion_prompt: type "$lil_yachty_stage_entrance". background: select "From template" . finetune: select "On" . Hit Enter or click on the submit button to send the command. Wait for approximately 1 to 5 minutes for the AI animation to be generated. 沒畫面的話可能還是會不太清楚呢，沒關係，我直接把操作步驟拍成教學影片了，只要照著這些步驟做，連從沒接觸過AI的人都能成功產出一個成品： 教學影片 為什麼會紅到日本？ 這個不斷被二創的影片其實來自美國歌手 Lil Yachty 在演唱會的一段影片： Lil Yachty with the HARDEST walk out EVER 。 在「Viggle AI」出現在後，就從歐美紅到日本去了，大多人使用的素材都是動漫人物、Vtuber、親友或自己。
READ THIS »