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

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

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

สุดท้าย แปลงการโทร 2 รายการเป็น 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 จะโหลดเพียงครั้งเดียว:

แท็กที่ทำงานหลายครั้ง
แท็กมากกว่าหนึ่งแท็กจากเทมเพลตที่กำหนดเองนี้ในคอนเทนเนอร์เดียวกัน
เทมเพลตที่กำหนดเองอื่นๆ ที่ใช้ 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

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

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