Trong hướng dẫn này, bạn sẽ tìm hiểu cách chuyển đổi một thẻ HTML tuỳ chỉnh hiện có để sử dụng JavaScript hộp cát.
Hướng dẫn này sẽ tận dụng API injectScript
. injectScript
là một API phổ biến dùng để chuyển đổi một thẻ hiện có dựa trên tập lệnh của bên thứ ba. Các thẻ này thường thiết lập chức năng cơ bản trong khi tập lệnh tải, sau đó bổ sung chức năng đó sau khi tập lệnh tải.
Thẻ gốc
<!-- 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 -->
Chuyển đổi mã
Hãy xem xét phần JavaScript của thẻ ở trên:
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
Để tạo JavaScript hộp cát cần thiết, hãy xem API JavaScript gốc mà tập lệnh này sử dụng và chuyển đổi mã của bạn để sử dụng các API JavaScript hộp cát tương đương.
Ví dụ: trong thẻ analytics.js
, các API JavaScript gốc sau đây được sử dụng:
JavaScript gốc | JavaScript hộp cát |
---|---|
window.ga |
setInWindow |
arguments |
createArgumentsQueue |
+ new Date |
getTimestamp |
Để sử dụng API JavaScript dạng hộp cát trong tập lệnh, bạn cần require
của các API đó.
Ví dụ: để sử dụng API setInWindow()
, hãy thêm API này vào đầu tập lệnh:
const setInWindow = require('setInWindow');
Tiếp theo, hãy chuyển đổi window.ga
:
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}
// becomes
const createArgumentsQueue = require('createArgumentsQueue');
const ga = createArgumentsQueue('ga', 'ga.q');
Sau đó, hãy chuyển đổi phép chỉ định ga.l
:
ga.l=+new Date;
// becomes
const getTimestamp = require('getTimestamp');
setInWindow('ga.l', getTimestamp(), true);
Cuối cùng, hãy chuyển đổi hai lệnh gọi thành ga()
:
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
// becomes
const trackingId = data.trackingId;
ga('create', trackingId, 'auto');
ga('send', 'pageview');
Để sử dụng data.trackingId
, hãy thêm một trường vào mẫu của bạn:
Chuyển đến thẻ
Fields
rồi nhấp vàoAdd Field
.Chọn loại trường
Text input
.Thay đổi mã nhận dạng từ
text1
thànhtrackingId
.
Tại thời điểm này, bạn đã chuyển đổi thẻ <script/>
đầu tiên, nhưng cũng cần tải tập lệnh hỗ trợ.
Để thực hiện việc này:
<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);
Việc truyền cacheToken
đến injectScript()
sẽ cho phép tối ưu hoá. Trong các trường hợp sau, tập lệnh analytics.js
sẽ chỉ được tải một lần:
- Thẻ chạy nhiều lần
- Nhiều thẻ từ mẫu tuỳ chỉnh này trong cùng một vùng chứa.
- Các mẫu tuỳ chỉnh khác sử dụng
injectScript()
có cùngcacheToken
Quyền
Nếu cố chạy mã này trước thời điểm này, thì có thể bạn đã nhận thấy một số lỗi trong bảng điều khiển.
Những lỗi này xuất hiện do JavaScript dạng hộp cát yêu cầu bạn khai báo các giá trị và URL mà bạn truy cập. Trong ví dụ này, bạn cần truy cập vào các biến toàn cục ga.q
,
ga.l
và ga
và muốn chèn tập lệnh được lưu trữ
tại https://www.google-analytics.com/analytics.js
.
Cách định cấu hình các quyền Global Variables
:
Chuyển đến thẻ
Permissions
, Mở rộngAccesses Global Variables
rồi nhấp vàoAdd Key
.Sử dụng
ga
cho khoá và đánh dấu vào các hộp choRead
,Write
vàExecute
.Lặp lại quá trình này cho
ga.q
vàga.l
. Lưu ý rằng các trường này không cần quyềnExecute
.
Tại thời điểm này, nếu nhấp lại vào Chạy mã, bạn sẽ thấy một lỗi mới trong bảng điều khiển.
Lần này, lỗi đề cập đến Inject Scripts
.
Cách định cấu hình quyền Inject Scripts
:
Thêm
https://www.google-analytics.com/analytics.js
vàoAllowed URL Match Patterns
.
Lúc này, khi bạn nhấp vào Run Code (Chạy mã), sẽ không có lỗi nào trong bảng điều khiển. Bạn đã chuyển đổi thành công thẻ này thành mẫu tuỳ chỉnh. Nhấp vào Save
rồi sử dụng thẻ mới giống như mọi Thẻ khác trong Trình quản lý thẻ của Google.
Thẻ đã chuyển đổi hoàn toàn
Kết quả JavaScript hộp cát cuối cùng của bạn sẽ có dạng như sau:
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);