ทำตามขั้นตอนต่อไปนี้เพื่อติดตั้งข้อมูลโค้ดที่จำเป็นสำหรับคอนเทนเนอร์ Google Tag Manager ของเว็บไซต์ของคุณ ดูขั้นตอนที่คล้ายกันในการตั้งค่า Tag Manager สําหรับคอนเทนเนอร์ประเภทอื่นๆ ได้จากแหล่งข้อมูลต่อไปนี้
- iOS: Google Tag Manager สำหรับ iOS
- Android: Google Tag Manager สำหรับ Android
- AMP: คู่มือการตั้งค่า AMP และ Tag Manager
- เซิร์ฟเวอร์: Tag Manager ฝั่งเซิร์ฟเวอร์
ก่อนเริ่มต้น
- คุณต้องสร้างบัญชีและคอนเทนเนอร์ Tag Manager
- คุณต้องเข้าถึงโค้ดของเว็บไซต์ได้
ขั้นตอน
- ไปที่ https://tagmanager.google.com
- ลงชื่อเข้าใช้บัญชี Google ดูวิธีสร้างบัญชี Google
- เปิดคอนเทนเนอร์ Tag Manager ที่ต้องการแก้ไข
- ในแท็บพื้นที่ทำงาน ให้เลือกรหัสคอนเทนเนอร์ (ซึ่งขึ้นต้นด้วย "GTM")
- ในกล่องโต้ตอบติดตั้ง Google Tag Manager ให้ทำตามขั้นตอนต่อไปนี้สำหรับแต่ละหน้าของเว็บไซต์
หมายเหตุ: หากเว็บไซต์สร้างขึ้นโดยใช้เครื่องมือสร้างเว็บไซต์หรือระบบจัดการเนื้อหา (CMS) เช่น Wordpress, Shopify หรือ Wix คุณสามารถตั้งค่าแท็ก Google ด้วยการผสานรวมได้โดยที่คุณไม่จำเป็นต้องอัปเดตโค้ดในหน้าเว็บแต่ละหน้าของเว็บไซต์ ดูวิธีติดตั้งแท็ก Google ด้วยเครื่องมือสร้างเว็บไซต์หรือ CMS
- คัดลอกโค้ดบล็อกแรก แล้ววางไว้ในแท็ก
<head>ให้สูงที่สุดเท่าที่จะเป็นไปได้ตัวอย่าง
ในโค้ด HTML ตัวอย่างต่อไปนี้ คุณจะต้องวางข้อมูลโค้ดแรกของ Google Tag Manager ที่ด้านหลังแท็ก HTML เปิด<head> โปรดทราบว่าตัวอย่างต่อไปนี้ใช้ "GTM-ABCDEFGH" แต่คุณต้องแทนที่รหัสด้วยรหัสคอนเทนเนอร์<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ABCDEFGH');</script>
<!-- End Google Tag Manager -->
<title>Example Webpage</title>
</head>
<body>
<!-- Content of your website -->
<h1>ยินดีต้อนรับสู่เว็บไซต์ของฉัน</h1>
<p>นี่คือย่อหน้าตัวอย่างบนหน้าเว็บของฉัน</p>
</body>
</html> - คัดลอกโค้ดบล็อกที่ 2 แล้ววางไว้ต่อจากแท็กเปิด
<body>ตัวอย่าง
ในโค้ด HTML ตัวอย่างต่อไปนี้ คุณจะต้องวางข้อมูลโค้ดที่ 2 ของ Google Tag Manager ต่อจากแท็ก HTML เปิด<body> โปรดทราบว่าตัวอย่างต่อไปนี้ใช้ "GTM-ABCDEFGH" แต่คุณต้องแทนที่รหัสด้วยรหัสคอนเทนเนอร์<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ABCDEFGH');</script>
<!-- End Google Tag Manager -->
<title>Example Webpage</title>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ABCDEFGH"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Content of your website -->
<h1>ยินดีต้อนรับสู่เว็บไซต์ของฉัน</h1>
<p>นี่คือย่อหน้าตัวอย่างบนหน้าเว็บของฉัน</p>
</body>
</html> - ทดสอบเว็บไซต์โดยป้อนลิงก์ของเว็บไซต์ แล้วคลิกทดสอบ
- คัดลอกโค้ดบล็อกแรก แล้ววางไว้ในแท็ก
- คลิกตกลง
ขั้นตอนถัดไป
ใช้ Google Tag Manager เพื่อตั้งค่าและจัดการแท็ก