在本指南中,您將瞭解如何轉換現有的自訂 HTML 標記,以使用沙箱 JavaScript。
本教學課程將使用 injectScript
API。injectScript
是一種常見的 API,可用來轉換依賴第三方指令碼的現有標記。這類標記通常會在指令碼載入時設定基本功能,然後在指令碼載入後以額外功能增強這類功能。
原始代碼
<!-- 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
,請在範本中新增欄位:
前往「
Fields
」分頁,然後按一下Add Field
。選擇
Text input
欄位類型。將 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
傳遞至 injectScript()
會啟用最佳化功能。在下列情況下,analytics.js
指令碼只會載入一次:
- 執行多次的代碼
- 同一個容器中的多個代碼。
- 其他使用
injectScript()
和相同cacheToken
的自訂範本
權限
如果您嘗試在此之前執行這個程式碼,可能會發現主控台出現一些錯誤。
沙箱的 JavaScript 會要求您宣告自己存取的值和網址,因此系統會顯示這些錯誤。在這個範例中,您需要存取 ga.q
、ga.l
和 ga
全域變數,且想插入由 https://www.google-analytics.com/analytics.js
代管的指令碼。
如何設定 Global Variables
權限:
前往「
Permissions
」分頁,展開Accesses Global Variables
,然後按一下Add Key
。使用
ga
做為索引鍵,並勾選Read
、Write
和Execute
的方塊。ga.q
和ga.l
請重複此程序。請注意,這些欄位不需要Execute
權限。
此時,如果您再次點選「Run Code」,控制台中就會顯示新的錯誤。這次錯誤提及 Inject Scripts
。
如要設定 Inject Scripts
權限:
在
Allowed URL Match Patterns
中新增https://www.google-analytics.com/analytics.js
。
現在當您點選「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);