GTM教學-追蹤來自部落格轉換成效

想要追蹤來自部落格的轉換成效，本篇幫你整理好可行的方式。透過URL擷取字串，設定於GTM的變數中，再透過JS與Cookie存放，避免網頁多次跳轉的遺失，最後完成轉換動作，回傳到指定部落格參數，即可完成。

本篇會跟你解析透過GTM設定，來自部落格的成效﹐方式應該會有滿多種，本次我分享一個相對比較簡單的方式給大家自己設定。同時也能設定來源，從部落格哪篇文章，皆由自己決定。

章節內容

1 設定部落格的超連結
- 1.1 以UTM的形式設定超連結
2 GTM設定變數
3 撰寫自訂HTML
4 新增cookie變數
5 Debug模式檢查
6 於指定事件帶入該變數
7 購買測試
8 於GA4中設定自訂維度
9 於GA4查看即時報表
10 GA4目標對象

設定部落格的超連結

先將你網站的全部連結字尾，設定對應的查詢字串。

先到網站部落格的對內超連結設定exaple.com?blog=1，於你的連結後面新增「?blog=1」。當從部落格進來的流量，就會抓到1。

如果你的名稱不是跟我一樣打上blog，那接下來的步驟就需要換成對應的查詢key值。

日後的數據報表查看有多少1的參數，來辨別為公司所帶來的目標。

以UTM的形式設定超連結

例如exaple.com?blog=0105_dspider_post。日後可以從GA4的報表中看到哪幾篇文章，成功為你帶來轉換，並且次數是多少次。

但要注意的是，這個方法需要設定人員好好區隔，每一篇的超連結參數，設定起來時間較久，但資料會非常清楚。

GTM設定變數

前往Client的容器變數裡面，新增一個「網址」變數。並且選「查詢」，填入查詢值為「blog」。請注意，blog如果在超連結的查詢參數KEY值，不是這樣設定的。那你需要打上你對應的查詢參數名稱key值。

並且將下方格式，將undefined設定為0。這樣不是從部落格來的，我們都可以辨別為0，而不是undefined。

撰寫自訂HTML

你可能會有一個疑問，使用者從部落格進來，中間到購買產品，一定會有跳轉，那我的查詢參數不就消失了?沒錯，所以這時候我們要再來個補強的動作。

<script>   
function checkCookie() {
        var blogCookie = getCookie("blog");
        if ({{blog - URL}} != "0" ) {
            document.cookie = "blog=" + {{blog - URL}} + "; Max-Age=2592000; ;path=/";
            console.log("COOKIE 已創立");
        }
        else{
          console.log("沒有偵測到部落格參數");
        }
    }

    
    function getCookie(name) {
        var cookieValue = "";
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = cookie.substring(name.length + 1);
                break;
            }
        }
        return cookieValue;
    }
  checkCookie()
  
</script>

再你的GTM新增一個自訂JS，並且打上以下程式碼。

這個功能為抓到URL部落格的查詢鍵值，並且直接將他以第一方cookie的方式寫入在使用者的瀏覽器中，第一方瀏覽器，基本上不容易被阻擋，因此可以好好使用他。同時你也能打開F12的Console我有寫一行如果有成功執行對應的回傳。如下圖。