[GA4] ตั้งการกำหนดค่าด้วยตัวเอง (Tag Manager)

This feature is part of an open beta. Keep in mind that the feature is subject to change.

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

ภาพรวม

คุณควรอัปเดตโค้ดในหน้าที่รวบรวมข้อมูลที่ได้จากผู้ใช้ เช่น หน้าลงชื่อสมัครใช้ หน้าการสร้างผู้มีโอกาสเป็นลูกค้า หน้าชำระเงิน หรือหน้าอื่นๆ ที่คล้ายกัน คุณสามารถส่งข้อมูลได้มากกว่า 1 ครั้งภายในเซสชันเพื่อให้ระบบส่งข้อมูลไปยัง Analytics

ก่อนเริ่มต้น

คำสั่งเหล่านี้จะถือว่าคุณมี

• สิทธิ์ในการเข้าถึงคอนเทนเนอร์ Tag Manager สำหรับเว็บไซต์
• เปิดใช้งานการเก็บรวบรวมข้อมูลที่ได้จากผู้ใช้และความสามารถของข้อมูลที่ได้จากผู้ใช้ที่อนุญาต
• ตั้งค่า Google Analytics: แท็กเหตุการณ์ GA4 ในคอนเทนเนอร์ Tag Manager

 วิธีการ

1. ลงชื่อเข้าใช้ Google Tag Manager
2. คลิกแท็กทางด้านซ้าย จากแท็บ Workspace
3. เปิดแท็ก Google Analytics: เหตุการณ์ GA4 ที่คุณรวบรวมข้อมูลลูกค้า
4. เลือกรวมข้อมูลที่ได้จากผู้ใช้จากเว็บไซต์ของคุณ
   
5. เลือกหรือสร้างตัวแปรข้อมูลที่ได้จากผู้ใช้ในเมนูแบบเลื่อนลงข้อมูลผู้ใช้
6. เลือกการกำหนดค่าด้วยตนเองในตัวแปรข้อมูลที่ได้จากผู้ใช้
   
7. ขยายเมนูแบบเลื่อนลงและเลือกตัวแปรสำหรับแต่ละช่อง
8. หากคุณสร้างตัวแปรสำหรับช่องข้อมูล ให้ทำตามขั้นตอนต่อไปนี้
   1. คลิกการกำหนดค่าตัวแปร > องค์ประกอบ DOM
   2. กรอกชื่อตัวแปรด้านบน
   3. เลือกตัวเลือก CSS ในช่องวิธีการเลือก
   4. ใส่ตัวเลือก CSS ที่อ้างอิงข้อมูลลูกค้าในช่องตัวเลือกองค์ประกอบ ดูวิธีระบุตัวเลือก CSS สำหรับช่องข้อมูลที่ได้จากผู้ใช้
   5. เว้นช่องชื่อแอตทริบิวต์ให้ว่างไว้
   6. ให้ข้ามช่องค่ารูปแบบเพื่อหลีกเลี่ยงปัญหาที่อาจเกิดขึ้นในการตั้งค่า
   7. บันทึกตัวแปรองค์ประกอบ DOM
   8. ทำขั้นตอนเหล่านี้ซ้ำสำหรับแต่ละช่องที่ต้องการรวบรวม
9. ข้ามช่องค่ารูปแบบในตัวแปรข้อมูลที่ได้จากผู้ใช้
10. บันทึกแท็กเหตุการณ์
11. คลิกส่งที่ด้านขวาบนเพื่อเผยแพร่การเปลี่ยนแปลง

Identify CSS selectors for user-provided data fields

To identify the CSS selectors to input into the fields, complete these steps for each field. If you already have unhashed variables in your code, you can select those instead of creating new CSS variables.

Note: If you’re using JavaScript variables, it’s likely easiest to ask your developer which variables should be added to these fields. If you’re using CSS Selectors, you can follow the steps below.

1. Open a Google Chrome browser window.
2. Go to your website, but keep Google Tag Manager open.
3. Identify the customer data you want to send to Google Analytics. For example, if you want to send an email address, identify where the email address is present on the page.
4. Right click the field and select Inspect. For example, if you are trying to capture an email address, make sure you are right clicking the email address.
5. On the Chrome Developer Tools page, you will see a portion of the code highlighted. This code is the page element where you need to extract CSS Selectors for the customer data.
6. Hover your mouse over the highlighted code and right-click it.
7. Scroll down to "Copy", then select Copy Selector.
8. Paste the copied text in the corresponding field in Google Analytics or Tag Manager.
   • The copied text should look something like the following:

     tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > custEmail

Next steps

Validate that user-provided data collection is set up correctly. Show me how.