API ของแท็ก Google (gtag.js) ประกอบด้วยฟังก์ชันเดียวคือ gtag() ซึ่งมีไวยากรณ์ดังนี้
gtag(<command>, <command parameters>);
<command>คือคำสั่งใดคำสั่งหนึ่งต่อไปนี้<command parameters>คือพารามิเตอร์ที่คุณส่งไปยังgtag()ได้ พารามิเตอร์คำสั่งจะแตกต่างกันไปตามคำสั่ง โปรดดูข้อมูลอ้างอิงคำสั่ง
คุณเรียกใช้คำสั่ง gtag() ได้ทุกที่ในหน้าเว็บ ตราบใดที่คำสั่งปรากฏอยู่ใต้ข้อมูลโค้ดแท็ก Google ดูวิธีเพิ่มข้อมูลโค้ดลงในหน้าเว็บได้ที่คู่มือการติดตั้ง
ขอบเขตของพารามิเตอร์
คุณสามารถกำหนดขอบเขตค่าพารามิเตอร์ให้กับเหตุการณ์แต่ละรายการ เหตุการณ์ทั้งหมดที่ส่งไปยัง <TARGET_ID> ที่เฉพาะเจาะจง หรือเหตุการณ์ทั้งหมดทั่วโลก ซึ่งทำได้โดยใช้คำสั่ง event, config และ set
ค่าพารามิเตอร์ที่ตั้งค่าไว้ในขอบเขตหนึ่งจะไม่แก้ไขค่าที่ตั้งไว้สำหรับพารามิเตอร์เดียวกันในขอบเขตอื่น ในตัวอย่างต่อไปนี้ คำสั่ง config จะไม่แก้ไขค่าส่วนกลางสำหรับ campaign_id ที่กำหนดไว้ก่อนหน้านี้ด้วยคำสั่ง set หลังจากดำเนินการทั้ง 2 คำสั่งแล้ว ค่าส่วนกลางของ campaign_id จะยังคงเป็น '1234'
// Set global campaign ID
gtag('set', { 'campaign_id': '1234' });
// Set campaign ID for <TARGET_ID>
gtag('config','<TARGET_ID>', { 'campaign_id': 'ABCD' });
ลำดับความสำคัญของพารามิเตอร์
หากมีการกำหนดค่าที่แตกต่างกันให้กับพารามิเตอร์เดียวกันในขอบเขตที่ต่างกัน ระบบจะใช้ค่าเดียวเท่านั้นเมื่อประมวลผลเหตุการณ์ ค่าพารามิเตอร์ที่กำหนดขอบเขตเป็น event จะมีลำดับความสำคัญเหนือกว่าพารามิเตอร์ที่กำหนดขอบเขตเป็น config และพารามิเตอร์ config จะมีลำดับความสำคัญเหนือกว่าพารามิเตอร์ที่กำหนดขอบเขตทั่วโลกโดยใช้ set
// Set campaign information at the global scope
gtag('set', { 'campaign_name': 'Black Friday Sale' });
// Set currency for <TARGET_ID1> to 'USD'
gtag('config','<TARGET_ID1>', { 'currency': 'USD' });
// Process a conversion event with currency: 'GBP'
gtag('event','conversion', { 'currency': 'GBP', 'send_to': '<TARGET_ID1>' });
// Process a conversion event with currency: 'EUR'
gtag('event','conversion');
// Process a conversion event with currency: 'USD'
gtag('event','conversion', { 'send_to': '<TARGET_ID1>' });
config
ช่วยให้คุณเพิ่มข้อมูลการกำหนดค่าเพิ่มเติมลงในเป้าหมายได้ โดยปกติแล้ว การกำหนดค่านี้จะเจาะจงสำหรับผลิตภัณฑ์หนึ่งๆ แต่คุณต้องกำหนดค่าเพียงครั้งเดียวหากใช้ทั้ง Google Ads และ Google Analytics
gtag('config', '<TARGET_ID>', {<additional_config_info>});
ประเด็นสำคัญเกี่ยวกับ <TARGET_ID>
<TARGET_ID>ในคำสั่งgtag('config', <TARGET_ID>, ...)คือรหัสแท็กที่ระบุตำแหน่งที่gtag.jsควรส่งข้อมูลเหตุการณ์ ซึ่งอาจเป็นปลายทาง เช่น พร็อพเพอร์ตี้ Google Analytics, บัญชี Google Ads, การกำหนดค่า Floodlight หรือแท็ก Google ที่มีปลายทางหลายแห่งรหัสแท็ก เช่น
GT-XXXXXX,G-XXXXXXหรือAW-YYYYYYเป็นตัวระบุแท็ก Google คุณเพิ่มรหัสนี้ลงในโค้ดของเว็บไซต์เพื่อโหลดแท็ก Googleแท็ก Google รายการเดียว (ระบุด้วยรหัสแท็ก) สามารถกําหนดค่าให้ส่งข้อมูลไปยังปลายทางหลายแห่งได้ แม้ว่ารหัสแท็กบางรหัสอาจดูเหมือนรหัสปลายทาง เช่น
G-XXXXXXสำหรับพร็อพเพอร์ตี้ Google Analytics หรือAW-YYYYYYสำหรับบัญชี Google Ads แต่<TARGET_ID>ในคำสั่งconfigหมายถึงอินสแตนซ์เฉพาะของแท็ก Google ที่โหลดในหน้าเว็บคำสั่ง
gtag('config', ...)จะกำหนดค่าลักษณะการทำงานของแท็ก Google ที่เชื่อมโยงกับ<TARGET_ID>นั้นๆ แม้ว่ารหัสแท็กที่รวมอยู่ในสคริปต์srcมักจะโหลดแท็ก Google แต่คุณสามารถใช้รหัสแท็กที่ถูกต้องซึ่งเชื่อมโยงกับบัญชีของคุณในคำสั่งgtag('config')ได้แท็ก Google รายการเดียวสามารถมีรหัสแท็กที่เชื่อมโยงได้หลายรหัส ซึ่งมักเกิดจากการรวมแท็ก คุณสามารถใช้รหัสที่เชื่อมโยงเหล่านี้ในพารามิเตอร์สคริปต์
srcเพื่อโหลดแท็ก Google ได้หากคุณส่งข้อมูลไปยังปลายทางหลายแห่งหรือใช้แท็กหลายรายการ คุณจะต้องใส่ข้อมูลโค้ดแท็ก Google รายการเดียวที่มีรหัสแท็ก 1 รายการในสคริปต์
srcเท่านั้น จากนั้นคุณใส่คำสั่งgtag('config')สำหรับรหัสแท็กหรือปลายทางเพิ่มเติมแต่ละรายการ
<additional_config_info> คือคู่พารามิเตอร์-ค่าอย่างน้อย 1 คู่
ตัวอย่างนี้กําหนดค่าแท็กเพื่อส่งข้อมูลไปยังบัญชี Google Ads
gtag('config', 'TAG_ID');
โดยที่ "TAG_ID" คือรหัสแท็กของแท็ก Google
ตัวอย่างต่อไปนี้แสดงวิธีกำหนดค่าแท็กเพื่อส่งข้อมูลไปยังบัญชี Analytics ด้วยพารามิเตอร์ send_page_view ที่ส่งค่า false และพารามิเตอร์ groups ที่ส่งค่า 'agency' เพื่อสาธิตวิธีส่งข้อมูลการกำหนดค่าเพิ่มเติม
gtag('config', 'TAG_ID', {
'send_page_view': false,
'groups': 'agency'
});
get
ช่วยให้คุณได้รับค่าต่างๆ จาก gtag.js ซึ่งรวมทั้งชุดค่าที่มีคำสั่ง set ด้วย
gtag('get', '<target>', '<field_name>', callback)
| อาร์กิวเมนต์ | ประเภท | ตัวอย่าง | คำอธิบาย |
|---|---|---|---|
| <target> | string |
G-XXXXXXXXXX |
เป้าหมายในการดึงค่ามา |
| <field_name> | FieldName | client_id | ชื่อช่องที่จะได้รับ |
| callback | Function |
(field) => console.log(field) |
ฟังก์ชันที่จะเรียกใช้พร้อมช่องที่ขอ หรือ |
FieldName
ชื่อช่องอาจเป็นชื่อของช่องที่กำหนดเองที่คุณตั้งค่าด้วยคำสั่ง gtag('set') หรือค่าใดค่าหนึ่งต่อไปนี้
| ชื่อช่อง | เป้าหมายที่รองรับ |
|---|---|
| client_id |
|
| session_id |
|
| session_number |
|
| gclid |
|
ตัวอย่าง
รับค่าเป็น Promise
const gclidPromise = new Promise(resolve => {
gtag('get', 'DC-XXXXXXXX', 'gclid', resolve)
});
gclidPromise.then((gclid) => {
// Do something with gclid...
})
ส่งเหตุการณ์ไปยัง Measurement Protocol
gtag('get', 'G-XXXXXXXXXX', 'client_id', (clientID) => {
sendOfflineEvent(clientID, "tutorial_begin")
});
function sendOfflineEvent(clientID, eventName, eventData) {
// Send necessary data to your server...
}
รับค่าที่คุณตั้งไว้
gtag('set', {campaign_name: 'Spring_Sale'});
gtag('get', 'G-XXXXXXXXXX', 'campaign_name', (campaign_name) => {
// Do something with currency value you set earlier.
})
set
คําสั่ง set ช่วยให้คุณกําหนดพารามิเตอร์ที่จะเชื่อมโยงกับเหตุการณ์ที่ตามมาทุกรายการในหน้าเว็บได้
gtag('set', {<parameter-value-pair>, <parameter-value-pair>});
เช่น คุณสามารถแชร์พารามิเตอร์แคมเปญเพื่อให้แท็กหลายรายการในหน้าเดียวกันเข้าถึงได้
ตัวอย่างต่อไปนี้แสดงการตั้งชื่อและรหัสแคมเปญสําหรับกิจกรรมช็อปปิ้งแบล็กฟรายเดย์ เนื่องจากคุณใช้ set แท็กอื่นๆ ทั้งหมด เช่น แท็กเหตุการณ์ GA4 หรือแท็กรีมาร์เก็ตติ้ง Google Ads จึงเข้าถึงข้อมูลนี้ได้
gtag('set', 'campaign', {
'id': 'abc',
'source': 'google',
'name': 'black_friday_promotion',
'term': 'running+shoes',
});
event
ใช้คำสั่ง event เพื่อส่งข้อมูลเหตุการณ์
gtag('event', '<event_name>', {<event_params>});
<event_name> เป็นอย่างใดอย่างหนึ่งต่อไปนี้
- เหตุการณ์ที่แนะนํา เหตุการณ์ที่แนะนําแต่ละรายการสามารถใช้พารามิเตอร์ที่แนะนําได้
- เหตุการณ์ที่กำหนดเอง เหตุการณ์ที่กำหนดเองคือชื่อเหตุการณ์ที่กำหนดเองซึ่งคุณสร้างขึ้นพร้อมพารามิเตอร์ที่กำหนดเอง ดูข้อมูลเพิ่มเติมได้ที่ตั้งค่าเหตุการณ์
<event_params> คือคู่พารามิเตอร์-ค่าอย่างน้อย 1 คู่ โดยแต่ละคู่จะคั่นด้วยคอมมา
คำสั่ง event ต่อไปนี้จะเริ่มเหตุการณ์ที่แนะนำ screen_view โดยมีพารามิเตอร์ 2 รายการ ได้แก่ app_name และ screen_name
gtag('event', 'screen_view', {
'app_name': 'myAppName',
'screen_name': 'Home'
});
consent
ใช้คำสั่ง consent เพื่อกำหนดค่าความยินยอม
gtag('consent', {<consent_arg>}, {<consent_params>});
ดูข้อมูลเพิ่มเติมเกี่ยวกับลักษณะการทำงานที่พารามิเตอร์เหล่านี้กำหนดค่าได้ที่ความยินยอมในศูนย์ช่วยเหลือ
<consent_arg> เป็นหนึ่งใน 'default' หรือ 'update' 'default' ใช้เพื่อตั้งค่าพารามิเตอร์ความยินยอมเริ่มต้นที่ควรใช้ และ 'update' ใช้เพื่ออัปเดตพารามิเตอร์เหล่านี้เมื่อผู้ใช้ระบุความยินยอม
ระบบรองรับ <consent_params> ต่อไปนี้
| ชื่อช่อง | ค่าที่อนุญาต | คำอธิบาย |
|---|---|---|
ad_storage |
'granted' | 'denied' |
เปิดใช้พื้นที่เก็บข้อมูล เช่น คุกกี้ (เว็บ) หรือตัวระบุอุปกรณ์ (แอป) ที่เกี่ยวข้องกับการโฆษณา |
ad_user_data |
'granted' | 'denied' |
ตั้งค่าความยินยอมในการส่งข้อมูลผู้ใช้ไปยัง Google เพื่อวัตถุประสงค์ในการโฆษณา |
ad_personalization |
'granted' | 'denied' |
ตั้งความยินยอมสำหรับโฆษณาที่ปรับตามโปรไฟล์ของผู้ใช้ |
analytics_storage |
'granted' | 'denied' |
เปิดใช้พื้นที่เก็บข้อมูล เช่น คุกกี้ (เว็บ) หรือตัวระบุแอป (แอป) ที่เกี่ยวข้องกับข้อมูลวิเคราะห์ เช่น ระยะเวลาการเข้าชม |
wait_for_update |
จำนวนเต็มบวกใดๆ | ตั้งค่าเวลาเป็นมิลลิวินาทีเพื่อรอการเรียกใช้การอัปเดตความยินยอม |