คู่มือเริ่มใช้งานฉบับย่อสำหรับเทมเพลตที่กำหนดเอง

เทมเพลตที่กำหนดเองช่วยให้คุณเขียนคำจำกัดความของแท็กและตัวแปรของตัวเอง เพื่อให้คนอื่นๆ ในองค์กรใช้แท็กและตัวแปรเหล่านี้พร้อมกับแท็กและเทมเพลตตัวแปรแบบบิวท์อินได้ ลักษณะของเทมเพลตที่กำหนดเองซึ่งเป็นแบบแซนด์บ็อกซ์และเน้นสิทธิ์เป็นหลักจะช่วยให้เขียนแท็กและตัวแปรที่กำหนดเองได้ด้วยวิธีที่ปลอดภัยและมีประสิทธิภาพมากกว่าการใช้แท็ก HTML ที่กำหนดเองและตัวแปร JavaScript ที่กำหนดเอง

เทมเพลตตัวแปรและแท็กที่กำหนดเองจะได้รับการกำหนดอยู่ในส่วนเทมเพลตของ Google Tag Manager หน้าจอเทมเพลตหลักจะแสดงรายการเทมเพลตแท็กหรือตัวแปร ที่ได้รับการกำหนดไว้ในคอนเทนเนอร์ของคุณแล้ว คุณยังสร้างเทมเพลตใหม่จากหน้าจอนี้ได้ด้วย

คุณสามารถส่งออกเทมเพลตและแชร์กับคนอื่นๆ ในองค์กร และระบบยังพัฒนาเทมเพลตให้เผยแพร่ในวงกว้างขึ้นในแกลเลอรีเทมเพลตชุมชนได้อีกด้วย

เครื่องมือแก้ไขเทมเพลต

เครื่องมือแก้ไขเทมเพลตช่วยให้คุณสร้าง แสดงตัวอย่าง และทดสอบเทมเพลตที่กำหนดเองได้ โดยจะมีข้อมูลหลัก 4 ส่วนสำหรับป้อนเพื่อช่วยคุณกำหนดเทมเพลตแท็ก ดังนี้

  • ข้อมูล - กำหนดพร็อพเพอร์ตี้พื้นฐานของเทมเพลต เช่น แท็กหรือชื่อตัวแปรและไอคอน
  • ช่อง - เป็นเครื่องมือแก้ไขภาพเพื่อเพิ่มช่องป้อนข้อมูลลงในเทมเพลตแท็ก
  • โค้ด - ป้อน JavaScript ที่แซนด์บ็อกซ์เพื่อกำหนดลักษณะการทำงานของแท็กหรือตัวแปร
  • สิทธิ์ - ดูและตั้งค่าขีดจำกัดว่าแท็กหรือตัวแปรได้รับอนุญาตให้ทำอะไร

สร้างเทมเพลตแท็กที่กำหนดเองรายการแรก

ตัวอย่างนี้จะแนะนำวิธีสร้างแท็กพิกเซลตัวอย่างพื้นฐาน เมื่อแท็กนี้เริ่มทำงานบนหน้าเว็บ ระบบจะส่ง Hit ที่มีข้อมูลบัญชีที่ถูกต้องไปยังเซิร์ฟเวอร์ของผู้ให้บริการแท็ก

1. ในการเริ่มต้นเทมเพลตแรก ให้คลิกเทมเพลตในการนำทางด้านซ้าย แล้วคลิกปุ่มใหม่ในส่วนเทมเพลตแท็ก

2. คลิกข้อมูลและกำหนดชื่อของแท็ก (ต้องระบุ) คำอธิบาย และไอคอน

ชื่อคือสิ่งที่จะแสดงต่อผู้ใช้เมื่อติดตั้งแท็กนี้ในอินเทอร์เฟซผู้ใช้ของ Tag Manager

คำอธิบายคือคำอธิบายสั้นๆ (ไม่เกิน 200 อักขระ) เกี่ยวกับการทำงานของแท็กนี้

ไอคอนช่วยให้คุณสามารถเลือกรูปภาพที่จะปรากฏเมื่อแท็กปรากฏในรายการที่รองรับคุณสมบัติไอคอน ภาพไอคอนควรเป็นไฟล์สี่เหลี่ยมจัตุรัสขนาด PNG, JPEG หรือ GIF ที่มีขนาดไม่เกิน 50 kB และอย่างน้อย 64 x 64 พิกเซล

3. คลิกรีเฟรชเพื่อดูตัวอย่างเทมเพลต

ที่ด้านขวาของช่องอินพุตจะมีหน้าต่างแสดงตัวอย่างเทมเพลต ปุ่มรีเฟรชจะปรากฏขึ้นทุกครั้งที่มีการเปลี่ยนแปลงในเครื่องมือแก้ไข คลิก รีเฟรชเพื่อดูว่าการเปลี่ยนแปลงของคุณส่งผลต่อลักษณะของแท็กอย่างไร

4. คลิกช่องเพื่อเพิ่มช่องลงในเทมเพลตแท็ก

แท็บช่องของเครื่องมือแก้ไขเทมเพลตช่วยให้คุณสร้างและแก้ไขช่องในเทมเพลตแท็กได้ ช่องใช้สำหรับป้อนข้อมูลที่กำหนดเอง เช่น รหัสบัญชี คุณสามารถเพิ่มองค์ประกอบของแบบฟอร์มมาตรฐาน เช่น ช่องข้อความ เมนูแบบเลื่อนลง ปุ่มตัวเลือก และช่องทำเครื่องหมาย

5. คลิกเพิ่มช่องและเลือกการป้อนข้อความ เปลี่ยนชื่อเริ่มต้น (เช่น "text1") ด้วย "accountId" ในตัวอย่างเทมเพลต ให้คลิกรีเฟรช

ช่องนี้จะมีไอคอนตัวเลือกตัวแปรที่คุ้นเคย (ไอคอนตัวเลือกตัวแปร) อยู่ข้างๆ ผู้ใช้เทมเพลตนี้สามารถคลิกไอคอนตัวเลือกตัวแปรเพื่อเลือกตัวแปรที่ใช้งานอยู่ในคอนเทนเนอร์นี้ได้

ขั้นตอนถัดไปคือการเพิ่มป้ายกำกับลงในช่อง ดังนี้

6. คลิกไอคอนขยาย (ไอคอนขยาย) ข้างช่องข้อความเพื่อเปิดตัวเลือกเพิ่มเติมสำหรับช่องนี้ ป้อน "รหัสบัญชี" ในช่องชื่อที่แสดง ในตัวอย่างเทมเพลต ให้คลิกรีเฟรช

ป้ายกำกับข้อความชื่อ "รหัสบัญชี" ควรปรากฏอยู่เหนือช่อง

7. คลิกแท็บโค้ด แล้วป้อน JavaScript ที่ทำแซนด์บ็อกซ์ในตัวแก้ไข

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

บรรทัดแรกของโค้ด const sendPixel = require('sendPixel') จะนําเข้า sendPixel API

โค้ดบรรทัดที่ 2 ซึ่งก็คือ const encodeUriComponent = require('encodeUriComponent') นําเข้า encodeUriComponent API

บรรทัดถัดไป const account = data.accountId; จะได้รับค่า accountId ที่สร้างขึ้นในขั้นตอนที่ 5 และจัดเก็บไว้ในค่าคงที่ account

โค้ดบรรทัดที่ 3 ซึ่งก็คือ const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account); จะกำหนดค่า url ที่เชื่อมต่อกันของปลายทาง URL คงที่ที่บันทึกข้อมูลวิเคราะห์และรหัสบัญชีที่เข้ารหัสซึ่งมีการกำหนดค่าแท็กไว้

ในบรรทัดสุดท้าย sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure) จะเรียกใช้ฟังก์ชัน sendPixel() ด้วยพารามิเตอร์ที่จำเป็น และส่งคำขอไปยัง URL ที่ระบุ ค่า data.gtmOnSuccess และ data.gtmOnFailure จะบอก Google Tag Manager เมื่อแท็กทำงานเสร็จหรือล้มเหลว จากนั้น Google Tag Manager จะใช้ สำหรับฟีเจอร์ต่างๆ เช่น ลำดับแท็กหรือโหมดแสดงตัวอย่าง

8. คลิกบันทึกเพื่อบันทึกความคืบหน้า ซึ่งจะโหลดสิทธิ์ที่ตรวจพบลงในเครื่องมือแก้ไขเทมเพลต

เทมเพลต API บางรายการมีสิทธิ์เชื่อมโยงอยู่ ซึ่งจะกำหนดสิ่งที่ทำได้หรือไม่ได้ เมื่อคุณใช้ API เทมเพลต เช่น sendPixel ในโค้ด Tag Manager จะแสดงสิทธิ์ที่เกี่ยวข้องในแท็บสิทธิ์

9. คลิกสิทธิ์เพื่อปรับแต่งโดเมนที่ sendPixel ได้รับอนุญาตให้ส่งข้อมูลได้ สำหรับรายการส่งพิกเซล ให้คลิกไอคอนขยาย (ไอคอนขยาย) แล้วป้อน https://endpoint.example.com/ ในรูปแบบการจับคู่ URL ที่อนุญาต

เมื่อกำหนดค่าเทมเพลตแท็กให้ส่งข้อมูล คุณต้องระบุรูปแบบการจับคู่ URL ที่อนุญาตภายใต้สิทธิ์ที่เกี่ยวข้องเพื่อจำกัดว่าจะส่งข้อมูลไปให้ที่ใด หาก URL ที่ระบุในโค้ดไม่ตรงกับรูปแบบการจับคู่ URL ที่อนุญาต การเรียก sendPixel จะล้มเหลว

รูปแบบการจับคู่ URL ต้องใช้ HTTPS และระบุทั้งรูปแบบโฮสต์และเส้นทาง โดยโฮสต์อาจเป็นโดเมน (เช่น "<br class.character-2-0"> <br.https://example.com/https://example.com/https://sub.example.com//*https://\*.example.com/test/\*.example.com/www.example.comshop.example.comblog.example.com\*https://example.com/\*

ระบุรูปแบบการจับคู่ URL เพิ่มเติมในแต่ละบรรทัดแยกกัน

10. คลิกเรียกใช้โค้ด แล้วมองหาปัญหาในหน้าต่างคอนโซล

ข้อผิดพลาดที่ตรวจพบจะปรากฏในหน้าต่างคอนโซล

11. คลิกบันทึก แล้วปิดเครื่องมือแก้ไขเทมเพลต

ตอนนี้เทมเพลตแท็กควรพร้อมใช้งานแล้ว

ใช้แท็กใหม่

กระบวนการสร้างแท็กใหม่ที่ใช้เทมเพลตแท็กที่กำหนดเองที่กำหนดใหม่ เหมือนกับแท็กอื่นๆ

  1. ใน Google Tag Manager ให้คลิกแท็ก > ใหม่
  2. แท็กใหม่จะปรากฏในส่วนกำหนดเองของหน้าต่างแท็กใหม่ คลิกปุ่มนั้นเพื่อเปิดเทมเพลตแท็ก
  3. กรอกข้อมูลในช่องที่จำเป็นสำหรับการกำหนดค่าเทมเพลตแท็ก
  4. คลิกการทริกเกอร์ และเลือกทริกเกอร์ที่เหมาะสมเพื่อกำหนดเวลาให้แท็กเริ่มทำงาน
  5. บันทึกแท็กและนำคอนเทนเนอร์ไปใช้จริง

สร้างเทมเพลตตัวแปรที่กำหนดเองรายการแรก

เทมเพลตตัวแปรที่กำหนดเองคล้ายกับเทมเพลตแท็ก โดยมีข้อแตกต่างสำคัญดังนี้

  • เทมเพลตตัวแปรที่กำหนดเองต้องแสดงค่า

    แทนที่จะเรียก data['gtmOnSuccess'] เพื่อระบุว่าเสร็จสิ้น ตัวแปรจะแสดงผลค่าโดยตรง

  • มีการใช้เทมเพลตตัวแปรที่กำหนดเองในส่วนต่างๆ ของ UI ของ Tag Manager

  • แทนที่จะไปที่แท็ก > ใหม่ เพื่อสร้างตัวแปรใหม่ตามตัวแปรที่กำหนดเอง ให้ไปที่ตัวแปร > ใหม่

ดูคำแนะนำทั้งหมดในการสร้างเทมเพลตตัวแปรที่กำหนดเองได้ที่สร้างตัวแปรที่กำหนดเอง

ส่งออกและนำเข้า

หากต้องการแชร์เทมเพลตที่กำหนดเองกับองค์กร คุณสามารถส่งออกเทมเพลตที่กำหนดเองและนำเข้าไปยังคอนเทนเนอร์ Tag Manager อื่นๆ วิธีส่งออกเทมเพลต

  1. คลิกเทมเพลตใน Tag Manager
  2. คลิกชื่อเทมเพลตที่คุณต้องการส่งออกจากรายการ ซึ่งจะเปิดเทมเพลตขึ้นมาในเครื่องมือแก้ไขเทมเพลต
  3. คลิกเมนูการทำงานเพิ่มเติม () แล้วเลือกส่งออก

วิธีนำเข้าเทมเพลต

  1. คลิกเทมเพลตใน Tag Manager
  2. คลิกใหม่ ซึ่งจะเปิดเทมเพลตเปล่าในเครื่องมือแก้ไขเทมเพลต
  3. คลิกเมนูการทำงานเพิ่มเติม () แล้วเลือกนำเข้า
  4. เลือกไฟล์ .tpl ที่ต้องการนำเข้า