หน้านี้ได้รับการแปลโดย Cloud Translation API

แปลงแท็กที่มีอยู่

ในคู่มือนี้ คุณจะได้ดูวิธีแปลงแท็ก HTML ที่กําหนดเองที่มีอยู่เพื่อใช้ JavaScript แบบแซนด์บ็อกซ์

บทแนะนำนี้จะใช้ประโยชน์จาก API ของ injectScript 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 แบบแซนด์บ็อกซ์ในสคริปต์ คุณต้องrequire ตัวอย่างเช่น หากต้องการใช้ setInWindow() API ให้เพิ่ม 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
เปลี่ยนรหัสจาก 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 จะโหลดเพียงครั้งเดียว

แท็กที่ทำงานหลายครั้ง
มีแท็กมากกว่า 1 รายการจากเทมเพลตที่กำหนดเองนี้ในคอนเทนเนอร์เดียวกัน
เทมเพลตที่กำหนดเองอื่นๆ ที่ใช้ injectScript() ที่มี cacheToken เดียวกัน

สิทธิ์

หากพยายามเรียกใช้โค้ดนี้ก่อนถึงจุดนี้ คุณอาจพบข้อผิดพลาดบางอย่างในคอนโซล

เกิดข้อผิดพลาดในการเข้าถึง globals

ข้อผิดพลาดเหล่านี้ปรากฏขึ้นเนื่องจาก JavaScript ที่ทำแซนด์บ็อกซ์กำหนดให้คุณประกาศค่าและ URL ที่คุณเข้าถึง ในตัวอย่างนี้ คุณต้องเข้าถึงตัวแปรร่วม 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

ณ จุดนี้ หากคลิกเรียกใช้โค้ดอีกครั้ง คุณจะได้รับข้อผิดพลาดใหม่ในคอนโซล ตอนนี้ ข้อผิดพลาดระบุถึง Inject Scripts

ข้อผิดพลาดคอนโซลการแทรกสคริปต์

วิธีกำหนดค่าสิทธิ์ Inject Scripts

เพิ่ม https://www.google-analytics.com/analytics.js ไปยัง Allowed URL Match Patterns

หมายเหตุ: URL Match Patterns อนุญาตให้ใช้ไวลด์การ์ดสำหรับโดเมนย่อยและเส้นทาง คุณจึงใช้ https://www.google-analytics.com/* แล้ว อย่างไรก็ตาม ขอแนะนำให้ใช้รูปแบบการทำงานที่เฉพาะเจาะจงมากขึ้นหากเป็นไปได้ ดูรายละเอียดนโยบายทั้งหมดได้ที่นโยบาย inject_script

เมื่อคลิกเรียกใช้โค้ด ก็จะไม่มีข้อผิดพลาดในคอนโซล คุณได้แปลงแท็กเป็นเทมเพลตที่กำหนดเองเรียบร้อยแล้ว คลิก Save และใช้แท็กใหม่เหมือนกับแท็กอื่นๆ ใน Google Tag Manager

แท็กที่แปลงอย่างสมบูรณ์แล้ว

ผลลัพธ์สุดท้ายของ 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);