轉換現有代碼

在本指南中，您將瞭解如何轉換現有的自訂 HTML 標記，以使用沙箱 JavaScript。

本教學課程將使用 injectScript API。injectScript 是一種常見的 API，可用來轉換依賴第三方指令碼的現有標記。這類標記通常會在指令碼載入時設定基本功能，然後在指令碼載入後以額外功能增強這類功能。

注意： 實際上，您應該避免使用 injectScript()，而是直接在沙箱 JavaScript 中實作目標指令碼。這種做法對第三方的信任程度較低，因此較有可能由強制執行政策允許。

原始代碼

注意： 這裡會使用 analytics.js 指令碼做為範例，但請勿在實際工作環境中使用此指令碼。請改為參閱「使用代碼管理工具部署 Google Analytics (分析)」一文。

<!-- Google Analytics -->
<script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXXX-1', 'auto');
  ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

轉換程式碼

考慮上述代碼的 JavaScript 部分：

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');

如要建立必要的沙箱 JavaScript，請查看這個指令碼使用的原生 JavaScript API，然後將程式碼轉換為使用對等的沙箱 JavaScript API。

例如，在 analytics.js 標記中，會使用下列原生 JavaScript API：

原生 JavaScript	沙箱模式 JavaScript
window.ga	setInWindow
arguments	createArgumentsQueue
+ new Date	getTimestamp

如要在指令碼中使用沙箱式 JavaScript API，您必須對 API 進行 require 處理。舉例來說，如要使用 setInWindow() API，請將其新增至指令碼頂端：

const setInWindow = require('setInWindow');

接著，轉換 window.ga：

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}
// becomes
const createArgumentsQueue = require('createArgumentsQueue');
const ga = createArgumentsQueue('ga', 'ga.q');

然後轉換 ga.l 作業：

ga.l=+new Date;
// becomes
const getTimestamp = require('getTimestamp');
setInWindow('ga.l', getTimestamp(), true);

最後，將兩個呼叫轉換為 ga()：

ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
// becomes
const trackingId = data.trackingId;
ga('create', trackingId, 'auto');
ga('send', 'pageview');

如要使用 data.trackingId，請在範本中新增欄位：

1. 前往「Fields」分頁，然後按一下 Add Field。

   

2. 選擇 Text input 欄位類型。

   

3. 將 ID 從 text1 變更為 trackingId。

   

您現在已轉換第一個 <script/> 標記，但也需要在支援指令碼中載入。

步驟如下：

<script async src='https://www.google-analytics.com/analytics.js'></script>

// becomes
const injectScript = require('injectScript');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);

注意： 指令碼網址通常是良好的 cacheToken 值。

將 cacheToken 傳遞至 injectScript() 會啟用最佳化功能。在下列情況下，analytics.js 指令碼只會載入一次：

• 執行多次的代碼
• 同一個容器中的多個代碼。
• 其他使用 injectScript() 和相同 cacheToken 的自訂範本

注意： 提醒您，別忘了將 data.gtmOnSuccess 回呼提供給 injectScript()。您必須為所有自訂範本呼叫 data.gtmOnSuccess。如果您自行提供成功回呼，請確認該回呼呼叫 data.gtmOnSuccess。

權限

如果您嘗試在此之前執行這個程式碼，可能會發現主控台出現一些錯誤。

沙箱的 JavaScript 會要求您宣告自己存取的值和網址，因此系統會顯示這些錯誤。在這個範例中，您需要存取 ga.q、ga.l 和 ga 全域變數，且想插入由 https://www.google-analytics.com/analytics.js 代管的指令碼。

如何設定 Global Variables 權限：

1. 前往「Permissions」分頁，展開 Accesses Global Variables，然後按一下 Add Key。

   

2. 使用 ga 做為索引鍵，並勾選 Read、Write 和 Execute 的方塊。

   

3. ga.q 和 ga.l 請重複此程序。請注意，這些欄位不需要 Execute 權限。

   

此時，如果您再次點選「Run Code」，控制台中就會顯示新的錯誤。這次錯誤提及 Inject Scripts。

如要設定 Inject Scripts 權限：

1. 在 Allowed URL Match Patterns 中新增 https://www.google-analytics.com/analytics.js。

   

   注意： URL Match Patterns 允許子網域和路徑使用萬用字元，因此您可以使用 https://www.google-analytics.com/*。不過，請盡量使用更具體的比對模式。如需完整的政策詳細資料，請參閱 inject_script 政策。

現在當您點選「Run Code」時，控制台中不會再顯示任何錯誤。您已成功將標記轉換為自訂範本。按一下 Save，並使用新代碼的方式和使用 Google 代碼管理工具中任何其他代碼一樣。

已完全轉換的代碼

最終的沙箱 JavaScript 結果應如下所示：

const setInWindow = require('setInWindow');
const copyFromWindow = require('copyFromWindow');
const createArgumentsQueue = require('createArgumentsQueue');
const getTimestamp = require('getTimestamp');
const injectScript = require('injectScript');
const trackingId = data.trackingId;

const ga = createArgumentsQueue('ga', 'ga.q');
setInWindow('ga.l', getTimestamp(), false);
ga('create', trackingId, 'auto');
ga('send', 'pageview');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);