在 Nuxt.js 加入 Google Tag Manager(GTM) 及開啟頁面追蹤

Rick 已發佈 2019-10-17

在 Nuxt.js 加入 Google Tag Manager(GTM) 及開啟頁面追蹤

前言

在公司的網站中我們是使用 Google Tag Manager　(以下簡稱 GTM )　來安裝 Google Analytics　(以下簡稱 GA )，那網站使用的框架就如標題所說是使用 Nuxt.js ，因為我們在網站上線後發生了一個問題，就是：

為什麼在 Nuxt.js 換頁的時候不會被 GA 偵測？

這是很嚴重的一個問題，因為 GA 那邊只會有使用者進來的第一頁，假如使用者透過 <nuxt-route> 到了下一頁，那這個時候就不會被 GA 偵測到，其實仔細想想很合理；因為透過 <nuxt-route> 換頁其實是使用 Client Side Render 的方式換頁，所以 GA 只會被觸發第一次而已，那該如何解決這個方法呢？很簡單：就是每次換頁的時候都要主動通知一次 GTM 讓他知道我們已經換頁了，在本篇中會先簡單介紹如何在 Nuxt.js 加入 GTM，再來就是開啟最重要的頁面追蹤，那就讓我們開始吧！

如何在 Nuxt.js 加入 GTM

安裝 GTM 的部分是使用 Nuxt.js 官方的 @nuxtjs/google-tag-manager 進行安裝

1. 使用 npm install

npm install @nuxtjs/google-tag-manager --save

2. 在 nuxt.config.js 的 module 中加入 `@nuxtjs/google-tag-manager`

modules: [
  // GTM-XXXXXXX 是你的 GTM ID
  ['@nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX' }]
]

引入的設定中還有很多選項用，詳細可以看 GitHub

3. 這樣就完成基本的安裝了，可以用 Google 提供的 Tag Assistan 做檢查

開啟頁面追蹤

接下來就是頁面追蹤的部分了，根據 GitHub 中有一段說明是這樣寫的：

You can optionally set pageTracking option to true to track page views.

WOW～只要 pageTracking 為 true 就可以了耶，那我們就馬上開始動作吧！

我們先回到安裝 GTM 的第二步：
找到在 nuxt.config.js 的 module 中我們加入 @nuxtjs/google-tag-manager 的部分裡面在多加上 pageTracking: true

modules: [
  // GTM-XXXXXXX 是你的 GTM ID
  ['@nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX', pageTracking: true }]
]

這樣就完成了

嗎？

這時候興高采烈地去打開 GA，就會發現：好哦，怎麼跟設定前一樣不會動，我不是開啟 pageTracking 了嗎？

很遺憾，事情並沒有那麼簡單QQ

這時候我們打開 source code，看看開啟 pageTracking 後到底發生了什麼事，打開 plugin.js 我們會發現在打開 pageTracking 後會執行一個 initPageTracking() 的 function，那這段 function 裡面有一段看起來跟 GTM 有關的程式碼：

window[this.options.layer].push(to.gtm || { event: this.options.pageViewEventName, pageType: 'PageView', pageUrl: to.fullPath, routeName: to.name })

從後面送出的物件可以看的出來，我們預設送出給 GTM 的資料格式會長這樣：

{
  // this.options.pageViewEventName 預設帶入 nuxtRoute
  event: 'nuxtRoute',
  pageType: 'PageView',
  pageURL: to.fullPath,
  routeName: to.name
}

所以接下來我們要到 GTM 中將這些資料都接起來：
首先我們先新增一個觸發條件

images

左上角是這個觸發條件的名稱可以隨便取，但設定面的事件名稱就是要跟上面送出的 event 是同一個名稱，這樣 GTM 才知道是要被哪一個事件觸發。

接下來我們到變數裡面新增一個使用者定義的變數去取得pageURL

images

左上角名稱一樣可以隨便取，那資料層變數名稱就是要跟上面送出的資料一樣才拿的到資料，routeName 就用一樣的方式新增一個

接下來我們就要到 GTM 中新增 GA 啦，一樣先上畫面圖：

images

比較重點的地方有幾個：

追蹤類型要選到網頁瀏覽 (pageView)
在這個代碼中啟用覆寫設定要打勾，才能使用我們剛剛自己設定的變數哦
在更多設定 -> 要設定的欄位 -> 欄位名稱的部分選擇 page，後面值的地方就選擇我們設定的 pageURL ，假設值的地方要使用 routeName 的話，就是欄位名稱的地方設定成 title 就可以了哦
最後就是觸發條件要設定成我們一開始自訂的 nuxtRoute

這樣就大功告成囉！回到網頁可以看到點擊 <nuxt-route> 後會被 GA 偵測到換頁了

參考資料

Can anyone help implementing Nuxt.js Google Tag Manager?

Nuxt SPAのPVを @nuxtjs/google-tag-manager を利用して計測する

關於筆者

暱稱：Rick

JavaScript 的 if 條件式

## 運算子要來正式介紹 `if` 條件式之前，必須要先來介紹運算子，因為 `if` 條件式內的條件會由運算子來進行比較與運算。 ### 比較運算子 * `==` 與 `!=` 僅單純比較運算元不包含型別 1. `==` 運算元 ***等於***，回傳 `true`，不等於回傳 `false`，無關型別 2. `!=` 運算元 ***不等於***，回傳 `false`，不等於回傳 `true`，無關型別 `==` 與 `!=` 是拿來做比較用的，比較什麼東西呢？比較是否一樣與不一樣，也就是是否等於和是否不等於，但是只限於運算元的值來做比較，不包含型別，那麼比較出來的值只有 Yes 或是 No 而已，但是屆時 console 卻不是顯示 Yes 或是 No，而是顯示 `true` 或是 `false`，這個叫做布林值 (Boolean)，布林值就是只有 `true` 和 `false` 兩種值而已。 * 所以是怎麼個比法呢？就像下面這樣 ```js= var A = 1; // 數字 1 var B = 2; // 數字 2 var C = 2; // 數字 2 var D = '1'; // 字串 1 var check1 = A == B; var check2 = B == C; var check3 = A != C; var check4 = B != C; var check5 = A == D; console.log(check1); // console 顯示 false console.log(check2); // console 顯示 true console.log(check3); // console 顯示 true console.log(check4); // console 顯示 false console.log(check5); // console 顯示 true https://www.jb51.net/article/93426.htm(依照此文章說明修改!=與!==用法) ``` * 這邊來進行一個白話文解析的動作首先我們先宣告 `A`、`B`、`C` 及 `D` 四個變數，讓他們分別 `var A = 1;`、`var B = 2;`、`var C = 2;`及`var D = '1'`，然後我們再宣告五個變數 `check1`、`check2`、`check3`、`check4` 及 `check5`。 `A == B;` 的意思是說，請問 A 的運算元是否等於 B 的運算元，由於 A 是 1 而 B 是 2，所以 A、B 等於這件事情不正確，所以會得到一個 `false`。 `B == C;` 的意思是說，請問 B 的運算元是否等於 C 的運算元，由於 B 是 2 而 C 也是 2，所以 B、C 相等這件事情正確，所以會得到一個 `true`。 `A != C;` 的意思是說，請問 A 的運算元是否**不**等於 C，由於 A 是 1 而 C 是 2，所以 A、C 不等於這件事情正確，所以會得到一個 `true`。 `B != C;` 的意思是說，請問 B 的運算元是否**不**等於 C，由於 B 是 2 而Ｃ也是 2，所以 B、C 不等於這件事情不正確，所以會得到一個 `false`。 `A == D` 的意思是說，請問 A 的運算元是否等於 D 的運算元，由於 A 是 1 而 D 也是 1，雖然 A 是數字，D 是字串，他們的型別不同，但是他們的運算元仍是相同的，所以 A、D 等於這件事情正確，所以會得到一個 `true`。 * `===` 與 `!==` 除了運算元以外還包含型別一起比較 1. `===` ***嚴格等於***，運算元及型別皆須相等則回傳 `true`，否則有一任何不相等則回傳 `false` 2. `!==` ***嚴格不等於*** 會回傳 `true` 的條件有下面這三個： a. 運算元不相等，型別相等，舉例 `'1' !== '2'` b. 運算元不相等，型別不相等，舉例 `1 !== '2'` c. 運算元相等，型別不相等，舉例 `1 !== '1'` 會回傳 `false` 的條件只有下面這一個： d.運算元相等，型別相等，舉例 `1 !== 1` ```js= var A = 1; var B = '1'; var C = 2; var D = '2'; var check1 = A === B; var check2 = C === D; var check3 = A !== C; var check4 = B !== D; var check5 = A !== D; var check6 = B !== C; console.log(check1); // console 顯示為 false console.log(check2); // console 顯示為 false console.log(check3); // console 顯示為 true console.log(check4); // console 顯示為 true console.log(check5); // console 顯示為 true console.log(check6); // console 顯示為 true ``` * 這邊我們仍來進行一個白話文解析的動作首先我們先宣告 `A`、`B`、`C` 及 `D` 四個變數，讓他們分別 `var A = 1;`、`var B = '1';`、`var C = 2;`及`var D = '2'`，然後我們再宣告六個變數 `check1`、`check2`、`check3`、`check4`、`check5` 及 `check6`。 `A === B;` 的意思是說，請問 A 的運算元與型別是否皆等於 B 的運算元與型別，由於 A 是 `1` 的數字而 B 是 `'1'` 的字串，所以 A、B 嚴格等於這件事情不正確，所以會得到一個 `false`。 `C === D;` 的意思是說，請問 C 的運算元與型別是否皆等於 D 的運算元與型別，由於 C 是 `2` 的數字而 D 是 `'2'` 的字串，所以 C、D 嚴格等於這件事情不正確，所以會得到一個 `false`。 `A !== C;` 的意思是說，請問 A 的運算元與型別是否有任一不等於 C 的運算元與型別，由於 A 是 `1` 的數字而 C 是 `2` 的數字，符合條件 ***運算元不相等，型別相等***，A、C 嚴格不等於這件事情正確，所以會得到一個 `true`。 `B !== D;` 的意思是說，請問 B 的運算元與型別是否有任一不等於 D 的運算元與型別，由於 B 是 `'1'` 的字串而 D 是 `'2'` 的字串，符合條件 ***運算元不相等，型別相等***，B、D 嚴格不等於這件事情正確，所以會得到一個 `true`。 `A !== D;` 的意思是說，請問 A 的運算元與型別是否有任一不等於 D 的運算元與型別，由於 A 是 `1` 的數字而 D 是 `'2'` 的字串，符合條件 ***運算元不相等，型別不相等***，A、D 嚴格不等於這件事情正確，所以會得到一個 `true`。 `B !== C;` 的意思是說，請問 B 的運算元與型別是否有任一不等於 C 的運算元與型別，由於 B 是 `'1'` 的字串而 C 是 `2` 的數字，符合條件 ***運算元不相等，型別不相等***，B、C 嚴格不等於這件事情正確，所以會得到一個 `true`。 * `>` 與 `<` 還有 `>=` 與 `<=` 這個很簡單，就是 ***大於*** 和 ***小於*** 以及 ***大於等於*** 還有 ***小於等於***，沒啥特別的，下面的範例程式碼應該也很好理解，就不再做多餘的解釋了。 ```js= var A = 30; var B = 30; var C = 50; var D = 60; var check1 = A > B; var check2 = A >= B; var check3 = C < B; var check4 = C < D; console.log(check1); // console 顯示 false console.log(check2); // console 顯示 true console.log(check3); // console 顯示 false console.log(check4); // console 顯示 true ``` ### 邏輯運算子 * `&&` 這個叫做 AND 的意思用法是這樣的，重點在於條件必須同時成立。 ```js= var A = 30; var B = 30; var C = 50; var D = 60; var check1 = C > B && C < D; var check2 = B >= A && B < C; var check3 = D > C && A > B; var check4 = A <= B && A > D; console.log(check1); // console 顯示 true console.log(check2); // console 顯示 true console.log(check3); // console 顯示 false console.log(check4); // console 顯示 false ``` * 這裡我們仍來進行一個白話文解析的動作首先我們先宣告 `A`、`B`、`C` 和 `D` 四個變數，讓他們分別 `var A = 30;`、`var B = 30;`、`var C = 50;` 還有 `var D = 60;`，然後我們再宣告四個變數 `check1`、`check2`、`check3`、`check4`。 `C > B && C < D` 的意思是說，請問 `C = 50` 是否大於 `B = 30` 而且 `C = 50` 是否小於 `D = 60`，經比較後，這兩件事情皆成立，所以會得到一個 `true`。 `B >= A && B < C` 的意思是說，請問 `B = 30` 是否大於等於 `A = 30` 而且 `B = 30` 是否小於 `C = 50`，經比較後，這兩件事情皆成立，所以會得到一個 `true`。 `D > C && A > B` 的意思是說，請問 `D = 60` 是否大於 `C = 50` 而且 `A = 30` 是否大於 `B = 30`，經比較後，這兩件事情僅 `D > C` 成立，所以會得到一個 `false`。 `A <= B && A > D` 的意思是說，請問 `A = 30` 是否小於等於 `B = 30` 而且 `A = 30` 是否大於 `D = 60`，經比較後，這兩件事情僅 `A <= B` 成立，所以會得到一個 `false`。 * `||` 這個叫做 OR 的意思用法是這樣的，重點在於條件擇一成立即可。 ```js= var A = 30; var B = 30; var C = 50; var D = 60; var check1 = C > B || C < D; var check2 = B >= A || B < C; var check3 = D > C || A > B; var check4 = A <= B || A > D; console.log(check1); // console 顯示 true console.log(check2); // console 顯示 true console.log(check3); // console 顯示 true console.log(check4); // console 顯示 true ``` 所以我們用相同的範例再來解釋一次，當我們把 `&&` 都改成 `||` 後，原本條件僅有一個成立的 `check3` 及 `check4` 都從 `false` 變成了 `true` 了。 * `!` 這個叫做 NOT 的意思用於反轉傳回的值，本來是 `true` 會變成 `false`，本來是 `false` 會變成 `true`。 ```js= var A = 1; var B = '1'; check1 = !(A == B); console.log(check1); // console 顯示為 false check2 = !(A === B); console.log(check2); // console 顯示為 true ``` 之前在介紹 `===` 有用過了這個例子，現在我們加上了 `!` 以後，本來是 `true` 的變成了 `false`，本來是 `false` 的就變成了 `true` 了。 ## if 條件式終於我們要來正式介紹 if 條件式了，if 條件式未來會廣泛的運用在各個地方，用來進行很多條件的判斷。 ### if 寫法 ```js= var weather = '太陽'; if (weather == '太陽'){ console.log('今天晴空萬里'); }else{ console.log('今天天氣不是很好'); } // console 顯示 '今天晴空萬里' ``` 首先我們先 `var weather = '太陽';`，再來開始我們的 `if`，後面接著就是比較的條件，我們的條件是 `(weather == '太陽')`，若比較出來是 `true`，就執行後面 `{}` 內的程式 `console.log('今天晴空萬里')`，後接一個 `else{console.log('今天天氣不是很好');}` 的意思是說，如果前面的條件比較得到 `false`，那就執行這個 `console.log('今天天氣不是很好');`。 ### else if 寫法，多條件比較 ```js= var temp = 28; // 氣溫 function weather(clothes){ console.log('我今天想穿' + clothes); } if (temp <= 20){ weather('羽絨衣毛褲'); }else if (temp <= 30 && temp > 20){ weather('短T恤長褲'); }else if (temp > 30){ weather('短褲短袖'); }else{ console.log('我不知道要穿什麼，怎麼辦呢？') } // console 顯示 '我今天想穿短T恤長褲' ``` 首先，`var temp = 28;`，然後再寫一個 `function weather(clothes)`，等後面的 `if` 比較出條件後回過來執行這個 `function`，再來就是 `if`，後面比較的條件是 `(temp <= 20)`，若是 `true`，就執行 `weather('羽絨衣毛褲');`，若是 `false`，就繼續後接的 `else if`，繼續下一個比較條件 `(temp <= 30 && temp > 20)`，若是 `true`，就執行 `weather('短T恤長褲');`，若是 `false`，就繼續後接的 `else if`，繼續下一個比較條件 `(temp > 30)`，若是 `true`，就執行 `weather('短褲短袖');`，若是 `false`，就執行最後接的`else{console.log('我不知道要穿什麼，怎麼辦呢？')}`，意思就是前面的筆記條件全部都是 `false` 的話，就執行 `console.log('我不知道要穿什麼，怎麼辦呢？')`。 ### switch 寫法這是啥？怎麼跑來了一個和 `if` 不相干的東西呢？`switch` 是一個和 `if` 有類似功能的語法，但與 `if` 不一樣的是，`if` 的小括弧 `()` 內條件若成立，才會跑後面大括弧 `{}` 內的程式，而 `switch` 僅有 `case` 成立時，才會跑後面的 `function`，然後因為後面接了一個 `break`，所以程式就會在這邊跳出，反觀 `if` 則會全部跑完，所以在編譯的速度上來說，`switch` 比較不耗資源。 * 這個就是使用 `switch` 寫法 ```js= var weather = '下雨'; var clothes = ['遮陽帽', '薄外套', '雨傘']; function putonClothes (fitting){ console.log('今天要帶' + fitting); } switch (weather){ case '太陽': putonClothes (clothes[0]); break; case '陰天': putonClothes (clothes[1]); break; case '下雨': putonClothes (clothes[2]); break; default: console.log ('天氣不穩定，通通都帶好了'); break; } // console 顯示今天要帶雨傘 ``` 一樣的，我們先把需要的變數 `var weather` 與 `var clothes` 宣告好，然後 `function putonClothes (fitting)` 也寫好，再來後面就開始我們的 `switch` 了，後面的 `()` 內要放進去的是要比對的值，我們這邊放的是 `(weather)` 這個變數，接下來 `{}` 內就是要開始和前面的 `(weather)` 進行比對了，`case '太陽': putonClothes (clothes[0])`，這個的意思是 `weather` 若等於 `'太陽'`，則執行 `putonClothes (clothes[0])`，後接 `break` 是指若比對成功，則程式就從這個地方跳出，不執行後面的 `case` 了，若比對不成功，則繼續往後面的 `case '陰天': putonClothes (clothes[1]);` 進行比對，若成功一樣就跳出，若比對不成功，就往下一個 `case '下雨': putonClothes (clothes[2]);`進行比對，若成功一樣就跳出，若不成功則往後執行 `default: console.log ('天氣不穩定，通通都帶好了');`，這個 `default` 的意思就是，前面的 `case` 全部都沒有比對成功，所以就執行這個 `console.log ('天氣不穩定，通通都帶好了');`的意思，所以，經比對結果，Console 顯示 ``'今天要帶傘'``。若改用 `if` 改寫來得到相同的產出呢？就變成下面這樣了， ```js= var weather = '下雨'; var clothes = ['遮陽帽', '薄外套', '雨傘']; function putonClothes (fitting){ console.log('今天要帶' + fitting); } if (weather == '太陽'){ putonClothes (clothes[0]); }else if (weather == '陰天'){ putonClothes (clothes[1]); }else if (weather == '下雨'){ putonClothes (clothes[2]); }else{ console.log ('天氣不穩定，通通都帶好了'); } ``` 所以甚麼時候用 `if`，什麼時候用 `switch` 呢？ * 若是判斷的值可以計算，或是介於一個區間，可使用 ***大於***、***小於*** 這類運算子，簡單來說像是數字類型的，請用 `if`。 * 若是判斷的值可以用比對的方式來看相同不相同，就像是字串一樣，那就可以用 `switch` 了。以上就是今天介紹的 `if` 條件式，謝謝大家。 ## 參考資料 * 六角學院課程：JavaScript 入門篇 - 學徒的試煉

在 Nuxt.js 加入 Google Tag Manager(GTM) 及開啟頁面追蹤

前言

如何在 Nuxt.js 加入 GTM

1. 使用 npm install

2. 在 nuxt.config.js 的 module 中加入 @nuxtjs/google-tag-manager

3. 這樣就完成基本的安裝了，可以用 Google 提供的 Tag Assistan 做檢查

開啟頁面追蹤

參考資料

關於筆者

標籤雲

文章列表

2. 在 nuxt.config.js 的 module 中加入 `@nuxtjs/google-tag-manager`