自訂範本快速入門指南

自訂範本可讓你撰寫自己的代碼和變數定義, 機構中的其他成員可以同時使用這些範本 變數範本自訂範本以權限為中心、沙箱模式 讓您能以更安全有效率的方式編寫自訂代碼和變數 搭配自訂 HTML 代碼和自訂 JavaScript 變數。

您可以在 Google 代碼管理工具範本主要畫面會列出所有代碼或變數 您在容器中定義的範本您也可以建立 建立新範本

您可以匯出範本,與貴機構的其他人共用, 您可以運用如何開發更多範本 社群範本庫:

範本編輯器

範本編輯器可讓您建立、預覽及測試自訂範本。 這裡有四個主要區域,可協助您定義代碼範本:

  • 資訊 - 定義範本的基本屬性,例如標記或 變數名稱和圖示
  • 欄位 - 這個視覺編輯器可將輸入欄位新增至代碼範本。
  • 程式碼:輸入採用沙箱機制的 JavaScript,定義代碼或變數的方式 應該能正常運作
  • 權限:查看及設定代碼或變數的限制 來執行。

建立第一個自訂標記範本

這個範例將逐步說明如何建立基本的像素廣告代碼範例。時間 這個代碼在網頁上觸發後,該代碼就會傳送正確的帳戶命中 將相關資訊傳送給代碼供應商的伺服器

1. 如要開始建立第一個範本,請按一下左側導覽面板中的「範本」,然後 按一下「代碼範本」部分下方的「新增」按鈕。

2. 按一下「資訊」,然後定義代碼的名稱 (必填)、說明和 圖示。

名稱是使用者導入這個代碼時會看到的名稱 整個代碼管理工具使用者介面上的各個環節

說明顧名思義,就是簡短的「說明」(最多 200 個半形字元) 說明此代碼的用途

圖示可讓您選擇要在標記顯示內容時顯示的圖片 列出支援圖示屬性的清單圖示圖片應為正方形 PNG、JPEG 或 大小不超過 50 KB 且大小至少為 64 x 64 像素的 GIF 檔案。

3. 按一下「重新整理」即可預覽範本。

欄位輸入的右側會顯示「Template Preview」視窗。每次 每當在編輯器中進行變更時,系統就會顯示「重新整理」按鈕。按一下 重新整理即可查看您對代碼外觀所做的變更。

4. 按一下「欄位」,在代碼範本中新增欄位。

範本編輯器的「欄位」分頁可讓您建立及編輯代碼中的欄位 範本。欄位可用來輸入自訂資料,例如帳戶 ID。你可以 在文字欄位、下拉式選單、圓形按鈕等標準表單元素中 和核取方塊

5. 按一下「新增欄位」並選取「文字輸入」。替換預設名稱 (例如 "text1") 取代為 "accountId"。在「Template Preview」中,按一下「Refresh」。

這個欄位會有常用的變數選取器 (變數選取器圖示) 圖示 。這個範本的使用者只要按一下變數選取器圖示,即可 選擇這個容器中有效的變數。

下一步是在欄位中加入標籤:

6. 按一下文字欄位旁邊的「展開」圖示 展開圖示 即可開啟更多內容 來為這個欄位選取適當的選項輸入「帳戶 ID」。的值。於 按一下「範本預覽」,然後按一下「重新整理」。

標題為「帳戶 ID」的文字標籤。

7. 按一下「Code」分頁標籤,然後在編輯器中輸入採用沙箱機制的 JavaScript:

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

第一行程式碼 const sendPixel = require('sendPixel') 會匯入 sendPixel API。

第二行程式碼 const encodeUriComponent = require('encodeUriComponent') 會匯入 encodeUriComponent API。

下一行 const account = data.accountId; 會取得 accountId 的值 建立在步驟 5 中建立的,並儲存在名為 account 的常數中。

第三行程式碼 const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);, 設定 url 常數,用於串連記錄到 Analytics 資料和經過編碼的帳戶 ID 專案。

最後一行 sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure) 會執行 sendPixel() 函式搭配必要參數,然後向 指定網址。data.gtmOnSuccess 和 data.gtmOnFailure 值會指出 Google 代碼管理工具會在代碼完成或失敗工作時觸發 Google 代碼管理工具,用於執行代碼排序等功能 預覽模式。

8. 按一下「Save」(儲存) 即可儲存進度。這會載入所有偵測到的權限 複製到範本編輯器中

部分 Template API 具備相關聯的權限,而這些權限會決定哪些內容 能夠或不能執行的作業如果您將 sendPixel 等範本 API 用於 程式碼中,代碼管理工具會在「權限」分頁中顯示相關權限。

9. 按一下「權限」,修正「sendPixel」可傳送的網域 將資料傳送至在「Send Pixels」(傳送像素) 項目上,按一下展開圖示 (展開圖示) 然後 在「允許的網址比對模式」中輸入 https://endpoint.example.com/。

設定標記範本來傳送資料時,您必須指定允許 存取相關聯權限的網址格式,以限制資料的位置 。如果程式碼中指定的網址與允許的網址不符 比對模式,sendPixel 呼叫就會失敗。

網址比對模式必須使用 HTTPS,並同時指定主機和路徑模式。 主機可以是網域 (例如「https://example.com/」) 或特定子網域 (例如「https://sub.example.com/」)。路徑必須包含至少一個「/」。 使用星號 (*) 做為萬用字元來表示 任何長度 (例如「https://\*.example.com/test/」)。星號是萬用字元 字元,用於擷取各種可能模式,例如: 「\*.example.com/」將比對出「www.example.com」、「shop.example.com」 blog.example.com 等。星號必須使用反斜線逸出 字元:「\*」。沒有額外字元的網址 (例如 「https://example.com/」) 會視為結尾為萬用字元 (亦即相當於 「https://example.com/\*」。

分行指定額外的網址比對模式。

10. 按一下「Run Code」,然後查看「Console」視窗是否有任何問題。

所有偵測到的錯誤都會顯示在「Console」(控制台) 視窗中。

11. 按一下「儲存」,然後關閉範本編輯器。

代碼範本現在應該已可供使用。

使用新代碼

使用新定義的自訂標記範本建立新代碼的程序 就像任何其他代碼一樣:

  1. 在 Google 代碼管理工具中,按一下 [代碼] > 新功能:
  2. 新的代碼會顯示在「新增代碼」視窗的「自訂」部分。 按一下以開啟代碼範本。
  3. 填寫代碼範本設定的必填欄位。
  4. 按一下「觸發條件」,然後選取適當的代碼觸發時機 應會觸發。
  5. 儲存代碼並發布容器。

建立第一個自訂變數範本

自訂變數範本與標記範本類似,其實有幾個 差異:

  • 自訂變數範本必須傳回一個值。

    變數不要呼叫 data['gtmOnSuccess'] 表示完成 會直接傳回值。

  • 自訂變數範本在代碼管理工具的不同部分使用 第一種是使用無代碼解決方案 AutoML 透過使用者介面建立機器學習模型

  • 而不是前往 新增:根據 請前往 [變數] > [自訂變數]新功能

如需建立自訂變數的完整指南,請參閱「建立自訂變數」一文 範本。

匯出及匯入

如要與貴機構共用自訂範本,請匯出自訂範本 並匯入其他代碼管理工具容器。如何匯出範本:

  1. 在代碼管理工具中,按一下「範本」。
  2. 在清單中按一下想要匯出的範本名稱。這將 在範本編輯器中開啟範本。
  3. 按一下 [更多動作] 選單 (),然後 選取「匯出」。

如何匯入範本:

  1. 在代碼管理工具中,按一下「範本」。
  2. 按一下 [新增],系統隨即會在範本編輯器中開啟空白範本。
  3. 按一下 [更多動作] 選單 (),然後 選取「匯入」。
  4. 選取要匯入的 .tpl 檔案。