สร้างตัวแปรสำหรับเว็บที่กำหนดโดยผู้ใช้เองใน Google Tag Manager เพื่อให้เหมาะกับความต้องการเฉพาะซึ่งตัวแปรที่มีในตัวอาจยังไม่ครอบคลุม
วิธีสร้างตัวแปรที่กำหนดโดยผู้ใช้ใหม่
- ในการนำทางด้านซ้าย คลิกตัวแปร
- ในส่วนตัวแปรที่กำหนดโดยผู้ใช้ คลิกใหม่
- คลิกการกำหนดค่าตัวแปร และเลือกประเภทตัวแปรที่ต้องการ
- ป้อนตัวเลือกการกําหนดค่าให้กับประเภทตัวแปรที่เลือก
- ตั้งชื่อตัวแปร ใช้รูปแบบการตั้งชื่อที่อธิบายถึงฟังก์ชันของตัวแปร เช่น "Data Layer Variable - Product Name"
- คลิกบันทึก
Tag Manager รองรับประเภทตัวแปรสำหรับเว็บที่กำหนดโดยผู้ใช้ต่อไปนี้
การไปยังส่วนต่างๆ
URL ที่มา HTTP
ค่านี้จะตั้งเป็นURL ที่มา HTTP ซึ่งก็คือ URL หน้าเว็บที่บุคคลนี้เข้าชมก่อนหน้านี้ ตัวอย่างเช่น หากมีผู้เข้าไปยังหน้าผลิตภัณฑ์หน้าหนึ่งจากหน้าแรก URL ที่มาจะเป็นหน้าแรก Tag Manager จะสร้างอินสแตนซ์ของตัวแปรประเภทนี้โดยอัตโนมัติ แต่คุณจะสร้างอินสแตนซ์เพิ่มได้หากต้องการเปิดเผยส่วนอื่นๆ ของ URL ที่มา
URL
ตัวแปรประเภทนี้ช่วยให้คุณแยกวิเคราะห์และเปิดเผยคอมโพเนนต์ URL ได้ คุณสร้างอินสแตนซ์เพิ่มเติมเพื่อแสดงส่วนต่างๆ ของ URL ได้ คอมโพเนนต์ของ URL ที่คุณเลือกได้คือ URL แบบเต็ม, โปรโตคอล, ชื่อโฮสต์, พอร์ต, เส้นทาง, นามสกุลไฟล์, การค้นหา และส่วนย่อย ค่าอินพุตที่กำหนดสำหรับตัวแปรประเภทนี้คือ URL ของหน้าเว็บปัจจุบันที่ผู้ใช้อยู่ (ดึงจาก document.location) ปรับแหล่งที่มาของ URL เพื่อบอกให้ Tag Manager ใช้ตัวแปรอื่นเป็นแหล่งที่มาของค่า URL
ตัวแปรของหน้าเว็บ
คุกกี้ของบุคคลที่หนึ่ง
ค่านี้ถูกกำหนดเป็นค่าของคุกกี้ของบุคคลที่หนึ่งที่มีชื่อโดเมนที่ผู้ใช้เปิดอยู่ในปัจจุบัน หากมีการใช้งานคุกกี้มากกว่า 1 รายการที่มีชื่อเดียวกันในโดเมนเดียวกัน ระบบจะเลือกค่าแรก ค่านี้จะเหมือนกับที่คุณเรียก document.cookie จากภายในหน้าเว็บและเลือกผลลัพธ์แรก
JavaScript ที่กำหนดเอง
ค่านี้จะตั้งเป็นผลลัพธ์ของฟังก์ชัน JavaScript โดย JavaScript นี้จะต้องอยู่ในรูปแบบของฟังก์ชันที่ไม่ระบุชื่อซึ่งส่งคืนค่า ตัวอย่างเช่น ระบบจะสร้างตัวแปร JavaScript ที่กำหนดเองได้เพื่อแปลงอินสแตนซ์ทั้งหมดของตัวแปร {{url}} ที่กำหนดไว้ล่วงหน้าให้เป็นตัวพิมพ์เล็ก
function () {
return {{url}}.toLowerCase();
}
ชั้นข้อมูล
ระบบจะตั้งค่าเมื่อมีการพุชข้อมูลไปยังชั้นข้อมูลผ่านการเรียก dataLayer.push() ดังนี้
dataLayer.push({"Data Layer Name": "value"})
คุณระบุวิธีที่ Tag Manager ตีความเครื่องหมายจุด (".") ในชื่อคีย์ได้ ดังนี้
- รูปแบบ 1: อนุญาตให้ใช้เครื่องหมายจุดในชื่อคีย์ เช่น ใน
dataLayer.push("a.b.c": "value")ให้ตีความชื่อของคีย์เป็น "a.b.c" (นั่นคือ{"a.b.c": "value"}) - รูปแบบ 2: ตีความเครื่องหมายจุดเป็นค่าเชิงซ้อน เช่น ตีความ
dataLayer.push({"a.b.c": "value"})เป็นการซ้อนกัน 3 ระดับ นั่นคือ{a: {b: {c: "value"}}}
ตัวแปร JavaScript
ค่านี้จะตั้งเป็นตัวแปร JavaScript ร่วมที่คุณระบุ หากไม่ได้ตั้งค่าที่กำหนดในชั้นข้อมูล (ดูตัวแปรชั้นข้อมูล) และไม่ปรากฏใน DOM (ดูเพิ่มเติมที่ตัวแปรองค์ประกอบ DOM) คุณอาจได้รับค่าจากตัวแปร JavaScript ใช้ตัวแปรประเภทนี้ หากคุณหาค่าในซอร์สโค้ดของหน้าเว็บในฐานะที่เป็นตัวแปร JavaScript ร่วมได้
องค์ประกอบของหน้า
ตัวแปรเหตุการณ์อัตโนมัติ
จับข้อมูลเกี่ยวกับรายการที่ทำให้เกิดเหตุการณ์ (เช่น การคลิก การส่งแบบฟอร์ม การเปิดเผยองค์ประกอบ ฯลฯ)
- องค์ประกอบ: แสดงผลออบเจ็กต์องค์ประกอบ พิจารณาได้ว่าเหมือนกับออบเจ็กต์สำหรับ JavaScript ที่กำหนดเอง เช่น
{{Element}}.titleหรือในตัวเลือก CSS เช่น {{Element}} ตรงกับตัวเลือก CSSdiv.foo - ประเภทองค์ประกอบ: แสดงผลค่า
element.tagNameเช่น "A", "BUTTON", "IMG" - แอตทริบิวต์องค์ประกอบ: ระบุชื่อแอตทริบิวต์และตัวเลือกนี้จะแสดงผลค่าของแอตทริบิวต์นั้น
- คลาสองค์ประกอบ: แสดงผลรายการของคลาสที่พบในแอตทริบิวต์
classขององค์ประกอบ - รหัสองค์ประกอบ: แสดงผลค่าของแอตทริบิวต์
id - เป้าหมายองค์ประกอบ: แสดงผลค่าของแอตทริบิวต์
targetเช่น "_blank" - ข้อความองค์ประกอบ: แสดงผลค่าของเนื้อหาข้อความขององค์ประกอบ
- URL องค์ประกอบ: แสดงผล URL ขององค์ประกอบที่รวบรวมจากแอตทริบิวต์
hrefหรือaction - ส่วนย่อย URL ใหม่ของประวัติ: แสดงผลส่วนย่อย URL ใหม่จากประวัติเบราว์เซอร์ เช่น "#summary"
- ส่วนย่อย URL เก่าของประวัติ: แสดงผลส่วนย่อย URL เก่าจากประวัติเบราว์เซอร์ เช่น "#intro"
- สถานะใหม่ของประวัติ: ออบเจ็กต์สถานะประวัติใหม่ ซึ่งควบคุมโดยการเรียก
pushStateของเว็บไซต์ - สถานะเก่าของประวัติ: ออบเจ็กต์สถานะประวัติเก่า ซึ่งควบคุมโดยการเรียก
pushStateของเว็บไซต์ - แหล่งที่มาการเปลี่ยนแปลงประวัติ: แสดงผลเหตุการณ์ที่ก่อให้เกิดการเปลี่ยนแปลงประวัติ เช่น "pushState", "replaceState" ฯลฯ
องค์ประกอบ DOM
ค่านี้จะตั้งเป็นข้อความขององค์ประกอบ DOM (แบบจำลองออบเจ็กต์เอกสาร) หรือค่าของแอตทริบิวต์องค์ประกอบ DOM ที่ระบุ หากไม่ได้ตั้งค่าที่ต้องการในชั้นข้อมูล (ดูตัวแปรชั้นข้อมูล) ก็อาจดึงค่านี้ได้จาก DOM ใช้ตัวแปรประเภทนี้หากคุณพบค่าใน DOM
หากมีการตั้งค่าชื่อแอตทริบิวต์ซึ่งไม่บังคับ ค่าของตัวแปรจะส่งคืนค่าที่ระบุจากแอตทริบิวต์นั้น (เช่น data-food="cupcake") ไม่เช่นนั้น ค่าจะเป็นข้อความที่อยู่ภายในองค์ประกอบ DOM
การแสดงองค์ประกอบ
ค่านี้ตั้งขึ้นโดยอิงตามสถานะการแสดงขององค์ประกอบ DOM ที่ระบุ ตัวแปรการเปิดเผยองค์ประกอบเดียวจะรายงานการเปิดเผยได้องค์ประกอบเดียวเท่านั้น ไม่เหมือนกับทริกเกอร์การเปิดเผยองค์ประกอบ เลือกว่าจะเลือกองค์ประกอบตามรหัสองค์ประกอบหรือตัวเลือก CSS หากมีองค์ประกอบหลายรายการที่จับคู่โดยตัวเลือก CSS ที่ระบุ ระบบจะใช้องค์ประกอบแรกที่ตรงกัน
คุณเลือกประเภทเอาต์พุตสำหรับตัวแปรนี้ได้ ดังนี้
- จริง/เท็จ: ค่าบูลีนที่ระบุว่าจะมองเห็นองค์ประกอบที่เลือกหรือไม่เมื่อมีการอ้างอิงตัวแปร
- เปอร์เซ็นต์: ค่าเปอร์เซ็นต์ระหว่าง 0 ถึง 100 ซึ่งระบุจำนวนองค์ประกอบที่เลือกที่จะมองเห็นได้บนหน้าจอเมื่อมีการอ้างอิงตัวแปร
หากคุณเลือกจริง/เท็จเป็นประเภทเอาต์พุต คุณยังระบุเปอร์เซ็นต์ขั้นต่ำที่มองเห็นได้ เพื่อระบุจำนวนองค์ประกอบที่เลือกที่จะต้องมองเห็นได้บนหน้าจอเพื่อให้ตัวแปรแสดงค่า "จริง"
ยูทิลิตี
ค่าคงที่
ค่านี้จะตั้งเป็นสตริงที่คุณระบุ โดยทั่วไปแล้วจะใช้ตัวแปรสตริงค่าคงที่เมื่อมีหลายแท็กที่ใช้หมายเลขบัญชีเดียวกัน ดูเพิ่มเติมที่การตั้งค่า Google Analytics
เหตุการณ์ที่กำหนดเอง
ค่านี้จะตั้งเป็นชื่อของเหตุการณ์ที่กำหนดเองที่ถูกพุชไปยังชั้นข้อมูล
ชื่อสภาพแวดล้อม
แสดงชื่อของสภาพแวดล้อมที่มองเห็นในโหมดแสดงตัวอย่าง
การตั้งค่า Google Analytics
ตัวแปรการตั้งค่า Google Analytics จะใช้ในแท็ก Universal Analytics ในคอนเทนเนอร์บนเว็บและอุปกรณ์เคลื่อนที่ (Firebase) เพื่อกำหนดค่าจากส่วนกลางและแชร์การตั้งค่า Google Analytics ที่พบบ่อยที่ใช้ในแท็กหลายๆ แท็ก เมื่อคุณสร้างแท็ก Google Analytics โดยใช้ Universal Analytics แล้ว Tag Manager จะแจ้งให้คุณเลือกหรือสร้างตัวแปรการตั้งค่า Google Analytics ดูข้อมูลเพิ่มเติม
แท็ก Google: การตั้งค่าการกำหนดค่า
ตัวแปรนี้ช่วยให้คุณตั้งค่าพารามิเตอร์ระดับการกําหนดค่าได้เมื่อแท็ก Google โหลดขึ้นมา
ตัวอย่างเช่น สมมติว่าคุณเผยแพร่เว็บไซต์ในหลายภาษาและต้องการแบ่งกลุ่มเป้าหมายตามภาษาที่อ่าน คุณสามารถสร้างตัวแปรการกําหนดค่าด้วยพารามิเตอร์language และนำไปใช้กับแท็ก Google แทนการอัปเดตแต่ละแท็กด้วยตนเอง
แท็ก Google: การตั้งค่าเหตุการณ์
ตัวแปรนี้ช่วยให้คุณตั้งค่าพารามิเตอร์ระดับเหตุการณ์เพื่อส่งข้อมูลเพิ่มเติมพร้อมเหตุการณ์ GA4
ตัวอย่างเช่น สมมติว่าคุณเป็นเจ้าของร้านค้าออนไลน์และกำลังลดราคา จึงต้องการติดตามจํานวนคนที่ใช้รหัสส่วนลดที่ให้ไว้ คุณสามารถใช้พารามิเตอร์ discount ซ้ำด้วยตัวแปรแท็ก Google: การตั้งค่าเหตุการณ์ แทนที่จะนำไปเพิ่มในแท็กแต่ละรายการด้วยตนเอง
ตารางตรวจสอบ
ค่านี้จะตั้งตามวิธีการในตารางตรวจสอบ ตารางตรวจสอบประกอบด้วย 2 คอลัมน์ (ตารางว่างเปล่าเพื่อแสดงวิธีการใช้ข้อมูลในภายหลัง)
| เมื่อ [ตัวแปรที่เลือก] เท่ากับ | ตั้ง [ตัวแปรนี้] เป็น |
|---|---|
ตารางตรวจสอบช่วยให้คุณสร้างตัวแปรที่มีค่าผันแปรไปตามค่าในตัวแปรอื่นได้ ซึ่งจะมีประโยชน์หากเว็บไซต์ได้รับการตั้งค่าให้จับคู่ค่าที่เหมาะสม (เช่น รหัส Conversion) กับ URL, องค์ประกอบ DOM หรือส่วนอื่นๆ ในหน้าเว็บ ในตัวอย่างนี้มีการสร้างตัวแปรชื่อ รหัส Conversion หาก URL ประกอบด้วย "/thanks/buy1.html" ค่าจะตั้งเป็น “12345" แต่หาก URL ประกอบด้วย "thanks/buy2.html" ค่าจะตั้งเป็น "34567"
| เมื่อ {{url}} ประกอบด้วย | ตั้ง {{รหัส Conversion}} เป็น |
|---|---|
| /thanks/buy1.html | 12345 |
| /thanks/buy2.html | 34567 |
| /thanks/buy3.html | 56789 |
ตัวเลขสุ่ม
ค่านี้จะตั้งเป็นตัวเลขสุ่มที่อยู่ระหว่าง 0 ถึง 2147483647
ตารางนิพจน์ทั่วไป
ตัวแปรตารางนิพจน์ทั่วไปทำงานคล้ายกับตัวแปรตารางตรวจสอบ ทั้งยังเรียกใช้รูปแบบนิพจน์ทั่วไปสำหรับรายการที่คุณต้องการจับคู่อีกด้วย
สำหรับการกำหนดค่าตารางนิพจน์ทั่วไปนี้
| รูปแบบ | เอาต์พุต |
|---|---|
.*/page[1-3]\.html.* |
foo |
.*/page[4-6]\.html.* |
bar |
.*/page[7-9]\.html.* |
baz |
ค่าเอาต์พุตของตัวแปรจะเป็นดังนี้
| ผลลัพธ์ที่ตรงกัน | ค่า |
|---|---|
| http://example.com/page1.html | foo |
| http://www.example.com/page1.html | foo |
| http://example.com/page2.html#detail | foo |
| http://example.com/page5.html | bar |
| http://example.com/page5.html?status=new | bar |
| http://example.com/page6.html | bar |
| https://example.com/page9.html | baz |
การค้นหาตารางนิพจน์ทั่วไปจะทำงานจากด้านบนสุดของรายการไปที่ด้านล่าง ค่าเอาต์พุตที่เกี่ยวข้องจะแสดงผลเมื่อพบรูปแบบที่ตรงกัน
เลือกกำหนดค่าเริ่มต้นเพื่อกำหนดค่าเอาต์พุตเมื่อไม่พบว่ามีค่าที่ตรงกัน
โดยค่าเริ่มต้น รูปแบบต้องตรงกับสตริงอินพุตทั้งหมดและไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ โดยสามารถปรับตัวเลือกนี้ได้ในการตั้งค่าขั้นสูง ดังนี้
-
ไม่คำนึงถึงตัวพิมพ์เล็กหรือใหญ่: รูปแบบจะจับคู่ตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก โดยไม่ต้องสร้างในนิพจน์ทั่วไปอย่างชัดแจ้ง
-
การจับคู่แบบเต็มรูปแบบเท่านั้น: หากเปิดใช้ รูปแบบต้องตรงกับอินพุตทั้งหมด ซึ่งเท่ากับรูปแบบมีจุดยึดเริ่มต้น (
^) และจุดสิ้นสุด ($) โดยปริยาย หากปิดใช้ รูปแบบจะได้รับการจับคู่เมื่อพบที่ใดก็ตามในอินพุต -
ฟังก์ชันแคปเจอร์กรุ๊ปและการแทนที่: หากเปิดใช้ คุณจะใช้ชุดคำสั่งตามรูปแบบไวยากรณ์ที่ใช้การแทนที่เครื่องหมายดอลลาร์ เพื่อรวมส่วนของอินพุต (เช่น จากแคปเจอร์กรุ๊ปในรูปแบบที่ตรงกัน) ภายในเอาต์พุตได้ ตัวอย่างเช่น หากนิพจน์ทั่วไปที่ตรงกันคือ
/(news)/page(2)\.htmlคุณจะใช้$1เพื่อหมายถึงแคปเจอร์กรุ๊ปที่ 1 ("news") และ$2เพื่อหมายถึงแคปเจอร์กรุ๊ปที่ 2 ("2")
ข้อมูลที่ได้จากผู้ใช้
รวบรวมข้อมูลจากแบบฟอร์มติดต่อ เช่น อีเมล หมายเลขโทรศัพท์ ชื่อ และที่อยู่ ระบุข้อมูลที่จะบันทึกโดยใช้โหมดใดโหมดหนึ่งต่อไปนี้
- การกําหนดค่าอัตโนมัติ: ตรวจหาช่องของแบบฟอร์มในเว็บไซต์และรายการใหม่โดยอัตโนมัติ
- การกําหนดค่าด้วยตนเอง: ให้คุณแมปตัวแปร Tag Manager ที่มีอยู่กับช่องข้อมูลที่ได้จากผู้ใช้ที่เกี่ยวข้อง เช่น อีเมล หมายเลขโทรศัพท์ ชื่อ และที่อยู่
- โค้ด: ให้คุณระบุตัวแปรชั้นข้อมูลหรือตัวแปร JavaScript ที่กําหนดเองซึ่งจะแสดงผลออบเจ็กต์ข้อมูลแบบมีโครงสร้างซึ่งได้จากผู้ใช้
ข้อมูลคอนเทนเนอร์
รหัสคอนเทนเนอร์
แสดงผลรหัสของคอนเทนเนอร์ Tag Manager เช่น "GTM-101010"
หมายเลขเวอร์ชันคอนเทนเนอร์
เมื่อคอนเทนเนอร์อยู่ในโหมดแสดงตัวอย่าง ตัวแปรเวอร์ชันคอนเทนเนอร์จะแสดงผลหมายเลขเวอร์ชันตัวอย่างของคอนเทนเนอร์นั้น แต่หากไม่ได้อยู่ในโหมดแสดงตัวอย่าง ตัวแปรนี้จะแสดงผลหมายเลขเวอร์ชันที่ใช้จริงของคอนเทนเนอร์
โหมดแก้ไขข้อบกพร่อง
ค่านี้จะตั้งเป็นจริง หากคอนเทนเนอร์อยู่ในโหมดแสดงตัวอย่างและแก้ไขข้อบกพร่อง และค่าจะเป็นเท็จ หากไม่ใช่