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