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

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

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

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

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

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

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

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

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

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

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

ชื่อ คือสิ่งที่จะแสดงแก่ผู้ใช้เมื่อนำแท็กนี้ไปใช้ ในอินเทอร์เฟซผู้ใช้ของ 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

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

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

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

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

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

รูปแบบการจับคู่ URL ต้องใช้ HTTPS และระบุทั้งรูปแบบโฮสต์และเส้นทาง โฮสต์สามารถเป็นโดเมน (เช่น "https://example.com/") หรือโดเมนย่อยที่เฉพาะเจาะจง (เช่น "https://sub.example.com/") เส้นทางต้องมีอย่างน้อย "/" ใช้เครื่องหมายดอกจัน (*) เป็นไวลด์การ์ดเพื่อระบุโดเมนย่อยหรือรูปแบบเส้นทางของ ความยาวเท่าใดก็ได้ (เช่น "https://\*.example.com/test/") ดอกจันคือไวลด์การ์ด ซึ่งจะจับรูปแบบต่างๆ ที่เป็นไปได้ เช่น "\*.example.com/" จะตรงกับ www.example.com, shop.example.com blog.example.com ฯลฯ เครื่องหมายดอกจันต้องกำหนดเป็นอักขระหลีกด้วยแบ็กสแลช (\) อักขระ: "\*" URL ที่ไม่มีอักขระเพิ่มเติม (เช่น "https://example.com/") จะถือว่าลงท้ายด้วยไวลด์การ์ด (เช่น เทียบเท่ากับ "https://example.com/\*"

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

10. คลิก Run Code แล้วตรวจสอบว่าหน้าต่างคอนโซลมีปัญหาหรือไม่

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

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

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

ใช้แท็กใหม่

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

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

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

เทมเพลตตัวแปรที่กำหนดเองคล้ายกับเทมเพลตแท็ก โดยมี 2-3 ประเภทที่โดดเด่น ความแตกต่าง:

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

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

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

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

ดูคําแนะนําฉบับเต็มในการสร้างตัวแปรที่กําหนดเองในหัวข้อสร้างตัวแปรที่กําหนดเอง เทมเพลต

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

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

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

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

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