Google 標記管理器 - 入門

上一頁
下一頁

本章概述瞭如何開始使用 Google 標記管理器，新增標籤並分析其完整性。

在整個過程中，我們將使用部落格（在上一章中建立）來演示不同的步驟。

Workspace

步驟 1 - 如上圖所示，點選右上角容器程式碼 (GTM-XXXXXXX)，位於標籤“工作區更改：0”旁邊。

您將看到“安裝 Google 標記管理器”對話方塊。

Install GTM

現在，我們想在我們的部落格上安裝 Google 標記管理器程式碼。

步驟 2 - 要將上圖中的 GTM 程式碼新增到部落格中，請訪問 https://Blogger.com 並使用您的憑據登入。

您將看到如下所示的螢幕，其中列出了您的部落格文章名稱。

GTM Code

步驟 3 - 從左側面板中，找到選項：主題。

您將看到以下螢幕。

Option

步驟 4 - 點選“編輯 HTML”以編輯部落格的 HTML 程式碼。您將看到部落格的 HTML 原始碼，如下圖所示。

Click Edit HTML

在這裡，我們想安裝 Google 標記管理器程式碼。根據 GTM 的說明，我們需要在以下位置插入程式碼 -

  • 在 <head> 標籤中儘可能靠上的位置
  • 在 <body> 標籤中

步驟 5 - 在上面的 HTML 程式碼中找到 <head> 標籤。返回到 https://tagmanager.google.com 並複製步驟 1 中“安裝 Google 標記管理器”對話方塊中的程式碼。將複製的程式碼貼上到 <head> 標籤開啟標籤的正下方。

步驟 6 - 同樣，在 HTML 程式碼中找到 <body> 標籤。

注意 - 您可以使用快捷鍵 Ctrl + F 查詢 <head> 和 <body> 標籤。瀏覽器的搜尋功能將有助於查詢這些標籤。

找到 <body> 標籤後，重複上述步驟，從 Google 標記管理器複製與 <body> 標籤關聯的程式碼。

為了便於定位標籤，通常 <body> 標籤以 <body expr:class = '"loading" + data:blog.mobileClass'> 開頭。

將所需的程式碼貼上到 <body> 標籤下，然後點選“儲存主題”。

它將顯示以下錯誤，出現此錯誤是正常的。

Save Theme

步驟 7 - 要解決此問題，在 <head> 標籤下的 Google 標記管理器程式碼中，找到包含以下內容的行 -

j = d.createElement(s),dl = l != 'dataLayer'?' &l = '+l:'';j.async = true;j.src =

將上面一行中下劃線的 & 替換為 &amp;，然後點選“儲存主題”。錯誤將得到解決。

至此，將 Google 標記管理器程式碼新增到您的部落格的過程結束。

標籤簡介

正如 Google 標記管理器支援網站上簡單地說明的那樣，標籤是一段將資訊傳送到第三方（例如 Google Analytics）的程式碼。

由此出發，對於特定的分析工具，可以有多個標籤關聯。將它們全部放在一個頁面上確實是一個優勢，因為產品營銷人員將能夠看到與頁面關聯的多個指標。

但是，這裡還有一個同樣重要的要點需要注意，網站上的標籤不要過多。這不僅增加了管理標籤時的混淆，而且使區分來自各個標籤的資料變得繁瑣。

以下程式碼，正如我們在“安裝 Google 標記管理器”對話方塊中看到的那樣，實際上是一個標籤。

<!-- Google Tag Manager -->
<script>
   (function(w,d,s,l,i){
      w[l] = w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});
      var f = d.getElementsByTagName(s)[0], j = d.createElement(s),
      dl = l != 'dataLayer'?' &l = '+l:'';
      j.async = true;
      j.src = 'https://#/gtm.js?id='+i+dl;
      f.parentNode.insertBefore(j,f);
   })
   (window,document,'script','dataLayer','GTM-M8QLQCZ');
</script>
<!-- End Google Tag Manager -->

標籤的位置

標籤的位置可以是頁面原始碼中的任何位置。它可以位於頂部，如上所示，也可以位於頁尾，傳輸所需的資訊。

至此，對標籤的快速介紹以及如何建立標籤的介紹結束。

觸發器

觸發器實際上檢測何時觸發標籤。它們是一組用於配置標籤觸發的規則。例如，觸發器可以決定當使用者執行“Y”操作時，特定的標籤“X”將被觸發。更具體地說，觸發器可以指示標籤在單擊特定表單中的特定按鈕時觸發。

觸發器是可附加到標籤以使其按預期方式工作的條件。舉一個現實世界的例子，假設正在為電子商務頁面上的成功交易配置標籤。

該標籤將指示交易是否成功執行。為此，將建立一個觸發器，它將說明，僅當向用戶顯示交易確認頁面時才觸發該標籤。

更突出地，假設您希望跟蹤部落格/網站的所有頁面瀏覽量。因此，具體來說，您可以使用 Google Analytics 建立一個標籤，當用戶訪問部落格/網站上的任何頁面時，該標籤將被觸發。在這種情況下，觸發器將是通用的，表示在所有頁面上觸發此標籤。觸發器將相應地設定。

觸發器有時會變得複雜。例如，如果某人在特定頁面上單擊按鈕，則觸發標籤。

如下圖所示，您可以透過單擊螢幕左側面板上的“觸發器”來訪問觸發器。

Clicking Triggers

由於尚未配置任何觸發器，因此您在觸發器上將看不到任何結果。

Triggers

變數

從本質上講，變數是可以更改的值。

例如，讓我們考慮一個簡單的連結點選。當單擊連結時，會收集與此點選事件相關的幾個內建變數。這些變數最終可用於記錄使用者單擊特定連結按鈕時重定向的連結。

詳細一點，您還可以使用變數記錄被點選元素的特定 div 類。它們被稱為變數，因為如果頁面上有 10 個不同的連結按鈕，則來自這些連結按鈕的重定向將發生變化，具體取決於單擊了哪些元素。

您可以使用左側面板並點選“變數”來訪問變數。

Variables

Google 標記管理器提供兩種型別的變數 -

  • 內建變數
  • 使用者定義變數

顧名思義，您可以使用 Google 標記管理器提供的現有變數，也可以建立自己的變數。

讓我們考慮一個示例，並瞭解標籤如何工作。我們現在將使用 Google 標記管理器除錯標籤。

除錯標籤

在本章的初始部分，我們花時間將 Google 標記管理器跟蹤程式碼新增到 Blogger.com 上的部落格中。

這是讓 Google 標記管理器識別我們的跟蹤程式碼的第一步。如果您仔細觀察，在包含在 <head> 標籤中的指令碼中，存在格式為 GTM-XXXXXXX 的 Google 標記管理器跟蹤程式碼。

現在，在除錯標籤時，使用 Google 標記管理器介面非常簡單。我們將使用基本的 Google Analytics 標籤進行演示。我們假設 Google Analytics 帳戶已存在。

建立基本的 Google Analytics 標籤

在 Google 標記管理器中，要建立標籤，需要執行多個步驟。為了詳細瞭解每個步驟，讓我們考慮以下螢幕。

Create Tag

步驟 1 - 點選“新增新標籤”按鈕。

右側將滑出一個面板，開始建立新標籤的過程。這將顯示一個未命名的空白標籤，供您配置。

Add Tag

步驟 2 - 為您的標籤提供一個名稱。讓我們將其命名為 - 第一個標籤。

步驟 3 - 完成後，點選文字/圖示 - 選擇標籤型別以開始設定……。

右側將滑出另一個面板，其中將顯示以下標籤型別。

Panel

正如我們在定義中看到的，有不同的標籤與不同的分析工具相關聯。在此特定步驟中，Google 標記管理器要求您指定要建立的標籤的確切型別。

您將注意到一些標籤型別，如下所示 -

  • 通用分析
  • 經典 Google Analytics
  • AdWords 再營銷
  • Google Optimize

注意 - 通用分析是 Google Analytics 的增強版且最流行的版本。但是，許多網站使用經典 Google Analytics。

對於此示例，讓我們繼續指定通用分析。

步驟 4 - 點選“通用分析”繼續。控制元件將切換回上一個螢幕，您需要選擇要跟蹤的內容。請參閱以下螢幕截圖以供參考。

Click Universal Analytics

步驟 5 - 選中“在此標籤中啟用覆蓋設定”。

注意 - 我們使用此步驟是為了更快地熟悉標籤建立。您也可以在不選中上述複選框的情況下繼續建立 Google Analytics 設定變數。

步驟 6 - 開啟 Google Analytics 介面。在 Google Analytics 中，找到首頁上的“管理”按鈕。在“屬性”部分下，點選“屬性設定”。您將能夠看到類似於以下內容的螢幕。

Google Analytics Interface

步驟 7 - 複製跟蹤 ID。跟蹤 ID 的格式為 UA-XXXXX-X。

步驟 8 - 複製跟蹤 ID 後，返回到 Google 標記管理器介面。如前所述，將跟蹤 ID 貼上到關聯的文字框中。

現在，我們將配置標籤的重要元素 - 觸發器。

我們將指示 Google 標記管理器，如果使用者檢視頁面，則應觸發該標籤。為此，我們應該使用螢幕上的下一部分配置觸發器。

步驟 9 - 點選“選擇觸發此標籤的觸發器…”

左側將滑出一個對話方塊，要求您選擇一個觸發器。它將顯示如下螢幕截圖所示的觸發器。

Trigger Display

步驟 10 - 點選“所有頁面”。

控制元件將返回到標籤配置螢幕。點選右上角的藍色“儲存”按鈕。您已成功配置了第一個標籤！

步驟 11 - 現在，對於除錯模式，點選灰色的“預覽”按鈕。

PREVIEW button

如上截圖所示，會出現一個橙色的框。這表示除錯模式已開啟。請使用提供的連結訪問您的部落格。

步驟 12 − 現在，當您訪問部落格時，應該能夠在您的部落格上看到一個顯示 Google 標記管理器除錯部分的區域。

Debug Section

此外，如果您仔細觀察，會在“此頁面上觸發的標記”下顯示第一個標記。這表示我們的標記在頁面成功檢視後已觸發。

步驟 13 − 在除錯部分，點選“變數”。然後，在左側面板上點選“視窗載入”。此操作表示我們正在選擇一個操作來分析由於該操作而載入的變數。

它將顯示“變數”部分，如以下螢幕截圖中的綠色框所示。

Variables section

當我們進入下一章時，您可以更清楚地分析這些變數。

列印頁面
上一步
下一步
廣告

© . All rights reserved.