วิธีติดตั้ง Google Tag Manager บนไซต์ของคุณ

เผยแพร่แล้ว: 2022-04-12

Google Tag Manager (GTM) เป็นบริการฟรีที่ช่วยให้การทำงานกับแท็กบนเว็บไซต์และในแอปพลิเคชันมือถือง่ายขึ้นอย่างมาก ด้วย GTM คุณสามารถเปลี่ยนโค้ดบนหน้าเว็บ เพิ่มส่วนย่อยใหม่ และรวมไซต์ของคุณเข้ากับระบบการวิเคราะห์ การโฆษณา และบริการอื่นๆ ได้อย่างง่ายดาย

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

กล่าวโดยย่อ ในการติดตั้ง Google Tag Manager คุณจะต้อง:

สร้างบัญชีและคอนเทนเนอร์ใน Google Tag Manager
ติดตั้งโค้ด Google Tag Manager บนไซต์ของคุณ
เผยแพร่คอนเทนเนอร์
ตรวจสอบ Google Tag Manager

1. สร้างบัญชีและคอนเทนเนอร์ใน Google Tag Manager

ในหน้าแรกของเครื่องจัดการแท็ก ให้คลิกปุ่ม ลงทะเบียน และลงชื่อเข้าใช้โดยใช้ที่อยู่ Gmail ของคุณหรือบัญชี Google อื่นๆ:

ตอนนี้ คุณต้องสร้างบัญชีในเครื่องจัดการแท็กโดยตรง ในการดำเนินการนี้ ให้คลิก ลงชื่อเข้าใช้เครื่องจัดการแท็ก :

จากนั้น คลิก สร้างบัญชี :

คิดชื่อสำหรับบัญชีของคุณ — สะดวกที่สุดในการใช้ชื่อบริษัทของคุณ จากนั้นเลือกประเทศ ทำเครื่องหมายที่ช่องถัดจาก แบ่งปันข้อมูลโดยไม่ระบุชื่อกับ Google และบริการอื่นๆ (ไม่บังคับ) แล้วคลิก ดำเนินการ ต่อ :

ตอนนี้คุณต้องกำหนดค่าคอนเทนเนอร์ หากคุณเปรียบเทียบโครงสร้างของ Google Tag Manager กับโครงสร้างของ Google Analytics คอนเทนเนอร์จะเทียบเท่ากับทรัพยากรใน GA มันเก็บแท็ก ทริกเกอร์ และตัวแปรสำหรับทั้งไซต์ ในบัญชี GTM บัญชีเดียวสามารถมีคอนเทนเนอร์ได้หลายคอนเทนเนอร์: สำหรับเว็บไซต์ สำหรับแอปพลิเคชันมือถือ สำหรับหน้า AMP และอื่นๆ เพื่อให้สะดวก ควรตั้งชื่อคอนเทนเนอร์ตามทรัพยากรที่สร้างขึ้น ตัวอย่างเช่น นี่อาจเป็นที่อยู่ของไซต์ของคุณ

หลังจากที่คุณป้อนชื่อคอนเทนเนอร์แล้ว ให้เลือกตำแหน่งที่จะใช้ (ในตัวอย่างของเราคือ Web ) แล้วคลิก Create :

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

หลังจากนี้ คุณจะเห็นหน้าต่างพร้อมส่วนย่อยของโค้ด GTM ที่ต้องติดตั้งบนเว็บไซต์ของคุณ:

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

2. ติดตั้งโค้ด Google Tag Manager บนไซต์ของคุณ

หากคุณคุ้นเคยกับการพัฒนาเว็บไซต์และสามารถเข้าถึงแผงการดูแลระบบ คุณสามารถเพิ่มโค้ดเครื่องจัดการแท็กได้อย่างง่ายดาย นี่คือตัวอย่างวิธีการทำสิ่งนี้ผ่าน WordPress มิฉะนั้น คุณยังคงต้องขอความช่วยเหลือจากโปรแกรมเมอร์ มิฉะนั้น อาจมีความเสี่ยงที่จะทำลายซอร์สโค้ดของหน้า

โค้ด Google Tag Manager ประกอบด้วยส่วนย่อยสองส่วนและโหลดแบบอะซิงโครนัส นั่นคือ ส่วนหลักของหน้ายังคงโหลดต่อไปโดยไม่ต้องรอให้คอนเทนเนอร์ GTM โหลด ส่วนแรกของโค้ดควรอยู่ในส่วนหัวของหน้า ให้ใกล้กับแท็กเปิด <head> มากที่สุด:

เนื่องจากยิ่งตำแหน่งของแฟรกเมนต์แรกสูงเท่าใด มันก็จะโหลดเร็วขึ้นเท่านั้น หากคุณแทรกลงในแท็ก <body> คุณอาจเสี่ยงที่จะสูญเสียข้อมูลเกี่ยวกับผู้ใช้ที่ออกจากหน้าก่อนที่จะโหลดแท็กนี้

ส่วนที่สองของโค้ดทำงานเป็นตัวสำรองและช่วยในการติดตามการทำงานของผู้ใช้ที่ปิดใช้งาน JavaScript ต้องวางไว้หลังแท็กเปิด <body> ทันที:

สิ่งสำคัญ!

ต้องวางโค้ด GTM โดยตรงบนหน้าที่คุณกำลังจะติดตาม หรืออีกนัยหนึ่งคือบนไซต์ทั้งหมดของคุณ การวางโค้ดใน iframe ที่ซ่อนอยู่หรือปรับใช้ในระบบการจัดการแท็กอื่นจะไม่อนุญาตให้ติดตามแท็กในหน้าหลักอย่างถูกต้อง

การติดตั้ง Google Tag Manager บนหน้า AMP

หากคุณใช้เทคโนโลยี AMP เพื่อโหลดและปรับหน้าเว็บสำหรับอุปกรณ์เคลื่อนที่อย่างรวดเร็ว ควรวางส่วนแรกของโค้ดไว้หน้าแท็กปิด < /head>:

และส่วนที่สองของรหัสควรแทรกทันทีหลังจากแท็กเปิด <body>:

3. เผยแพร่คอนเทนเนอร์

แม้ว่าคุณจะไม่ได้เพิ่มแท็กเดียวลงในคอนเทนเนอร์ เราขอแนะนำให้เผยแพร่ทันทีหลังจากติดตั้งโค้ด GTM บนไซต์ของคุณ มิฉะนั้น คอนเทนเนอร์จะทำให้เกิดข้อผิดพลาด 404 นี้ไม่สำคัญอย่างไรก็ตาม หากคุณกำลังติดตามข้อผิดพลาด JavaScript โดยใช้บริการบางอย่าง เช่น TrackJS ข้อผิดพลาด 404 จะทำให้รายงานของคุณหมด เพื่อไม่ให้เกิดความเครียดโดยไม่จำเป็นสำหรับนักพัฒนา จะเป็นการดีกว่าที่จะเผยแพร่คอนเทนเนอร์เปล่า — ไม่เป็นอันตรายต่อใคร

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

เลือก เผยแพร่และสร้างเวอร์ชัน เนื่องจากนี่เป็นคอนเทนเนอร์เวอร์ชันแรกของคุณ ฟิลด์ คำอธิบายเวอร์ชัน สามารถเว้นว่างไว้ได้ ถัดไป คลิก เผยแพร่ :

เสร็จแล้ว. คอนเทนเนอร์ได้รับการเผยแพร่แล้ว

4. ลองใช้ Google Tag Manager

หลังจากเพิ่มโค้ดเครื่องจัดการแท็กในเว็บไซต์ของคุณแล้ว คุณจะตรวจสอบได้ว่าข้อมูลได้รับการถ่ายโอนอย่างถูกต้องหรือไม่โดยใช้ส่วนขยายพิเศษของผู้ช่วยแท็กของ Google นี่เป็นส่วนเสริมของเบราว์เซอร์ Chrome ที่แสดงแท็กของผลิตภัณฑ์ Google ที่ติดตั้งบนไซต์ของคุณและวิธีการทำงาน

หลังจากดาวน์โหลดและติดตั้งส่วนเสริมแล้ว คุณจะเห็นไอคอนนี้ในแถบเครื่องมือ Chrome . คลิกที่มันและเลือกแท็กระบบที่คุณต้องการตรวจสอบและหน้าใด คลิก เสร็จสิ้น

จากนั้นไปที่หน้าที่คุณต้องการตรวจสอบแล้วคลิกไอคอนผู้ช่วยแท็ก หากต้องการเปิดใช้งานส่วนขยาย ให้คลิก เปิดใช้งาน :

รีเฟรชหน้าปัจจุบันและตัวช่วยแท็กจะแสดงว่าแท็กใดถูกติดตั้งบนหน้าและทำงานอย่างไร ไอคอนสีเขียวแสดงว่ามีการส่งข้อมูลโดยไม่มีการร้องเรียนใด ๆ สีน้ำเงินแสดงว่าไม่มีปัญหาร้ายแรง และสีแดงแสดงถึงปัญหาร้ายแรง:

หากคุณคลิกที่แท็กใดแท็กหนึ่ง คุณจะเห็นสาเหตุที่เป็นไปได้ของข้อผิดพลาดและคำแนะนำในการแก้ไข:

ดูข้อมูลเพิ่มเติมเกี่ยวกับผู้ช่วยแท็กได้ในความช่วยเหลือของ Google

เคล็ดลับอีกสองสามข้อ

เมื่อติดตั้งโค้ด GTM บนไซต์ของคุณ ให้ขอให้นักพัฒนาของคุณเพิ่มข้อมูลโค้ด Google Optimize พร้อมกัน นี่เป็นความคิดที่ดีแม้ว่าคุณจะไม่ได้ทำการทดสอบกับเนื้อหาบนไซต์ของคุณในขณะนี้ เมื่อใดก็ตามที่คุณต้องการทำการทดสอบ A/B ทุกอย่างจะพร้อม

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

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

อะไรต่อไป

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

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

รับรายการตรวจสอบ