如何在 WordPress 安裝 Google Tag Manager 代碼?

google tag manager 代碼管理工具-安裝教學
google tag manager 代碼管理工具-安裝教學

 

如果你的網站是用 WordPress 做的,要如何在 WordPress 裡加入 Google Tag Manager 代碼呢?(這篇要介紹的做法不是使用外掛,而是直接修改程式碼喔。)

說直接修改程式碼,好像會讓不懂程式的人怕怕!

別怕,站長我也不懂程式碼,跟著以下的步驟,你也可以順利埋設 GTM 程式碼喔!

 

Step 1. 先登入 Google 代碼管理工具(傳送門:https://tagmanager.google.com

Step 2. 在工作區找到我們要安裝的 GTM 代碼,GTM 代碼位於右上方,如下圖箭頭標示處。

google tag manager 代碼管理工具安裝教學
google tag manager 代碼管理工具安裝教學

 

點擊 GTM 代碼後會看到要安裝的程式碼。

程式碼分為兩段,第一段要貼在 <head> 中,第二段要貼在 <body> 裡。然後,每個頁面都要貼到!!!但由於 WordPress 是用 php 寫的,我們只要貼一次就可以了!

google tag manager 代碼管理工具-安裝教學
google tag manager 代碼管理工具-安裝教學

 

Step 3. 登入到自己網站的 WordPress 後台。

Step 4. 在「外觀」底下找到「主題編輯器」。

接者,在右側找到「佈景主題頁首 (header.php)」

google tag manager 代碼管理工具-安裝教學
google tag manager 代碼管理工具-安裝教學

 

Step 5. 在佈景主題頁首中,加入兩段程式碼。

<1> 在 <head> 後方加入 GTM 的第一段程式碼。

google tag manager 代碼管理工具-安裝教學
google tag manager 代碼管理工具-安裝教學

<2> 在 <body> 後貼上 GTM 的第二段程式碼。

google tag manager 代碼管理工具-安裝教學
google tag manager 代碼管理工具-安裝教學

<3> 更新檔案。

 

 

Step 6. 怎麼確認更新的檔案有 GTM 碼?

<1> 回到網站前台,重新整理網頁後,在網頁中按右鍵「檢視網頁原始碼」。可以透過「尋找」功能來找 GTM 代碼,以下範例的 GTM 代碼是 GTM-59KZSB。

正常來說會搜到兩個符合,因為我們剛剛貼了兩段的程式碼,而這兩段的程式碼都有 GTM 代碼,一個在 <head> ,一個在 <body> 裡。

google tag manager 代碼管理工具-安裝教學
google tag manager 代碼管理工具-安裝教學

<2> 透過 Chrome 的擴充功能 Tag Assistant 查看。(傳送門:Tag Assistant (by Google)

 

Step 7. 發佈 GTM。

回到 Google 代碼管理工具,在右上方找到發佈,點擊發佈。

google tag manager 代碼管理工具-安裝教學
google tag manager 代碼管理工具-安裝教學

再按一次發佈。

google tag manager 代碼管理工具-安裝教學
google tag manager 代碼管理工具-安裝教學

發佈時可以設定發佈的版本名稱。

google tag manager 代碼管理工具-安裝教學
google tag manager 代碼管理工具-安裝教學

 

GTM 有個好處,就是在正式發布之前,可以先預覽檢查代碼是否有問題。開啟預覽的位置在發佈右邊的箭頭裡。

google tag manager 代碼管理工具-安裝教學
google tag manager 代碼管理工具-安裝教學

點擊預覽之後, GTM 的工作區會顯示「正在預覽工作區」,這個時候利用「同一個」瀏覽器查看網頁,就會在網頁下方出現 GTM 的預覽區塊。

google tag manager 代碼管理工具-安裝教學
google tag manager 代碼管理工具-安裝教學

每一頁有安裝的代碼都會在下方顯示。

google tag manager 代碼管理工具-安裝教學
google tag manager 代碼管理工具-安裝教學

 

要關掉預覽模式,只要回到 GTM 工作區,點擊「離開預覽模式」即可。

 

GTM 程式碼到這邊就安裝完成了!接下來就是新增各個追蹤代碼,例如:Google Analytics、Adwords、FB 像素、再行銷、電子商務等等,或是設定事件追蹤。

 

WordPress 也有 GTM 相關的外掛,請自行搜索囉!

 

GTM 相關文章:

  1. Google Tag Manager – 輕鬆管理第三方追蹤工具的代碼管理系統
  2. Google Tag Manager 新手教學(一):申請帳戶

You may also like

10 篇迴響

    1. 您好,
      您問的是「 Step 5. 在佈景主題頁首中,加入兩段程式碼。」當中的「 <3> 更新檔案。」嗎?
      在各個外觀模板的下方都有個更新檔案~
      如果您還是無法處理的話,可以截圖寄信給我:startdo.tw@gmail.com
      謝謝~

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *