Chuyển đổi thẻ hiện có

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.

Lưu ý: Trong thực tế, bạn nên tránh injectScript() mà thay vào đó hãy triển khai tập lệnh mục tiêu trực tiếp trong JavaScript hộp cát. Điều này đòi hỏi ít tin tưởng vào bên thứ ba hơn, nhờ đó tăng khả năng được Chính sách thực thi cho phép.

Thẻ gốc

Thận trọng: Bạn không nên dùng tập lệnh analytics.js trong phiên bản chính thức làm ví dụ. Thay vào đó, hãy làm theo bài viết Triển khai Google Analytics bằng Trình quản lý thẻ.

<!-- 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:

1. Chuyển đến thẻ Fields rồi nhấp vào Add Field.

   

2. Chọn loại trường Text input.

   

3. Thay đổi mã nhận dạng từ text1 thành trackingId.

   

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);

Lưu ý: URL của tập lệnh thường có giá trị cacheToken phù hợp.

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ùng cacheToken

Thận trọng: Hãy nhớ cung cấp lệnh gọi lại data.gtmOnSuccess cho injectScript(). Phải gọi data.gtmOnSuccess cho tất cả các mẫu tuỳ chỉnh. Nếu bạn tự cung cấp lệnh gọi lại thành công, hãy đảm bảo lệnh gọi lại đó gọi data.gtmOnSuccess.

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:

1. Chuyển đến thẻ Permissions, Mở rộng Accesses Global Variables rồi nhấp vào Add Key.

   

2. Sử dụng ga cho khoá và đánh dấu vào các hộp cho Read, Write và Execute.

   

3. 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ền Execute.

   

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:

1. Thêm https://www.google-analytics.com/analytics.js vào Allowed URL Match Patterns.

   

   Lưu ý: URL Match Patterns cho phép sử dụng ký tự đại diện cho miền con và đường dẫn, vì vậy bạn có thể sử dụng https://www.google-analytics.com/*. Tuy nhiên, bạn nên ưu tiên các mẫu khớp cụ thể hơn nếu có thể. Hãy xem Chính sách inject_script để biết toàn bộ thông tin chi tiết về chính sách.

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);