ผู้จัดการด้านเทคนิคของ Google อินเทอร์เฟซทั้งหมด Google เครื่องจัดการแท็ก: ติดตามการคลิกลิงก์พันธมิตร

เราแจ้งให้คุณทราบ คำแนะนำทีละขั้นตอนสำหรับติดตั้งและกำหนดค่า Google Tag Manager (GTM) ที่นี่เราจะบอกวิธีเชื่อมต่อ Google Analytics และ Yandex Metrica โดยใช้ GTM

Google เครื่องจัดการแท็ก (GTM) - เครื่องมือหลายอย่างซึ่งช่วยให้คุณสามารถเพิ่มลงในไซต์หรือ แอพมือถือแท็กเพื่อวิเคราะห์การเข้าชม การแปลง และพฤติกรรมของผู้ใช้โดยไม่รบกวน แหล่งที่มาเว็บไซต์.

ในบทความเราจะอธิบายรายละเอียดเกี่ยวกับวิธีสร้างและกำหนดค่า GTM บนไซต์และวิธีเชื่อมต่อ Google Analytics และ Yandex Metrica โดยไม่รบกวนซอร์สโค้ดของไซต์

ประโยชน์ของจีทีเอ็ม

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

ก่อนดำเนินการติดตั้งเรามาทำความเข้าใจกับคำจำกัดความ:

• คอนเทนเนอร์เป็นรหัส JS ส่วนหนึ่งที่วางอยู่บนทุกหน้าของเว็บไซต์ คอนเทนเนอร์ประกอบด้วยข้อมูลเกี่ยวกับแท็กที่ทริกเกอร์อันเป็นผลมาจากการดำเนินการของกฎบางอย่างที่ระบุในทริกเกอร์และตัวแปร
• แท็ก– ส่วนของรหัสไซต์ที่ให้คุณติดตามปริมาณการใช้งานและวิเคราะห์พฤติกรรมของผู้ใช้ การแปลง ฯลฯ (ตัวอย่างเช่น รหัส Yandex Metrica)
• กำหนดเวลาที่จะเริ่มการทำงานของแท็กในเว็บคอนเทนเนอร์
• ตัวแปรเป็นคู่ค่าชื่อที่ใช้ในทริกเกอร์เป็นเงื่อนไขที่แท็กจะเริ่มทำงาน

วิธีติดตั้ง Google Tag Manager บนเว็บไซต์

1. สมัครบัญชี Google

หากบัญชีของคุณคือ กูเกิลแล้วลงทะเบียนและคุณเข้าสู่ระบบแล้ว ให้ข้ามขั้นตอนนี้ ถ้าไม่เข้าสู่ระบบหรือสร้างบัญชี

2. สร้างบัญชีกับ GTM

หลังจากให้สิทธิ์ใน Google แล้ว คุณจะดำเนินการสร้างบัญชีใน GTM ได้ ไปที่หน้า Google Tag Manager และคลิกที่ปุ่ม "สร้างบัญชี" จากนั้นป้อนชื่อบัญชีที่กำหนดเองและคลิกที่ปุ่ม "ถัดไป"

รูปภาพที่ 1

ในหน้าต่างที่ปรากฏขึ้น ให้ระบุชื่อที่ประดิษฐ์ขึ้นของคอนเทนเนอร์และเลือกตำแหน่งที่จะใช้ ในกรณีของเรา นี่คือปุ่ม "เว็บไซต์" หลังจากนั้นคลิกที่ปุ่ม "สร้าง"

รูปที่ 2

รูปที่ 3

3. เพิ่มโค้ด Tag Manager ที่ได้ลงในไซต์ของคุณ

หลังจากที่คุณยอมรับข้อตกลงการใช้งาน หน้าต่างรหัสจะปรากฏขึ้น

รูปที่ 4

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

รูปที่ 5

วางโค้ดจากบล็อกด้านล่างหลังแท็กเปิดโดยตรง

รูปที่ 6

หลังจากทำตามขั้นตอนเหล่านี้แล้ว ให้คลิกปุ่ม "เผยแพร่" ในแผง GTM

รูปที่ 7

4. ทดสอบ GTM เพื่อการทำงานที่ถูกต้อง

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

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

รูปที่ 8

จากภาพหน้าจอ เราเห็นว่าไอคอนเป็นสีเขียว ซึ่งหมายความว่าการติดตั้งเครื่องจัดการแท็กสำเร็จแล้ว หากไอคอนเป็นสีเหลืองหรือแดง แสดงว่าวางแท็กไม่ถูกต้อง
คำแนะนำของ Google

รูปที่ 9

เชื่อมต่อ Google Analytics ผ่าน GTM

ตอนนี้ขอตรงไปที่ การเชื่อมต่อของกูเกิลการวิเคราะห์ผ่าน GTM

1. ลงทะเบียน Google Analytics

หากคุณติดตั้ง Analytics บนไซต์ของคุณแล้ว คุณสามารถข้ามขั้นตอนนี้ได้ ถ้าไม่ ให้ดูวิธีลงทะเบียน Google.Analytics และลงทะเบียนให้เสร็จสมบูรณ์

บันทึก! หลังจากลงทะเบียน Google.Analytics แล้ว คุณไม่จำเป็นต้องวางโค้ดบนไซต์ เราต้องการเพียง ID ติดตามของ Google.Analytics ในภายหลัง หากมีการลงทะเบียน Google.Analytics ไว้ก่อนหน้านี้และวางโค้ดไว้บนไซต์แล้ว หลังจากเชื่อมต่อ Google.Analytics ผ่าน GTM แล้ว โค้ดการวิเคราะห์ที่วางก่อนหน้านี้จะถูกลบออก

2. ลงชื่อเข้าใช้บัญชีที่ลงทะเบียนไว้ก่อนหน้านี้ใน GTM และคลิกที่ลิงก์ "เพิ่มแท็กใหม่"

รูปที่ 10

3. เลือกประเภทแท็ก

ในกรณีนี้ เราจำเป็นต้องมี Universal Analytics

รูปที่ 11

4. ระบุรหัสติดตามไซต์ใน Google Analytics และประเภทการติดตามคือ "การดูหน้าเว็บ"

รูปที่ 12

คุณสามารถดูรหัสติดตามทรัพยากรได้ในการตั้งค่า Google Analytics

รูปที่ 13

5. ระบุทริกเกอร์ "ทุกหน้า"

เพื่อให้แท็กเริ่มทำงานในทุกหน้า ให้ระบุทริกเกอร์ "ทุกหน้า"

รูปที่ 14

6. บันทึกข้อมูลที่ป้อน

รูปที่ 15

7. ระบุชื่อแท็กและคลิกที่ปุ่ม "บันทึก"

รูปที่ 16

8. ตรวจสอบว่าแท็กทำงานถูกต้องหรือไม่

ในการทำเช่นนี้ ให้คลิกที่ลูกศรถัดจากปุ่ม "เผยแพร่" และเลือก "แสดงตัวอย่าง"

รูปที่ 17

ในคอนเทนเนอร์ "ดูตัวอย่าง" ที่มีการเปลี่ยนแปลงจะมีให้ใช้งานในเบราว์เซอร์ของคุณเท่านั้น

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

หากคอนเทนเนอร์ปรากฏใต้บรรทัด "แท็กที่ทำงานบนหน้านี้" แสดงว่าติดตั้ง Universal Analytics โดยไม่มีข้อผิดพลาด

รูปที่ 18

9. เผยแพร่ Universal Analytics

รูปที่ 19

ดังนั้นเราจึงเชื่อมต่อ Google Analytics กับไซต์ผ่าน GTM โดยไม่รบกวนซอร์สโค้ดของหน้าต่างๆ

การเชื่อมต่อ Yandex Metrics ผ่าน GTM

หากต้องการเชื่อมต่อ Yandex Metrica ให้ทำตามขั้นตอนเดียวกับ Google Analytics แต่เนื่องจากไม่มี Yandex Metrica เป็นค่าเริ่มต้นใน GTM ให้ระบุ "HTML ที่กำหนดเอง" เมื่อเลือกผลิตภัณฑ์

รูปที่ 20

เป็นผลให้หน้าต่างที่มีช่องว่างปรากฏขึ้น

รูปที่ 21

ในรูปแบบ HTML นี้ คุณต้องแทรกรหัสของตัวนับเมตริกของคุณ

หากมีการติดตั้ง Yandex Metrica บนไซต์แล้ว ให้คัดลอกโค้ดตัวนับจากซอร์สโค้ดของหน้า ถ้าไม่ ให้ดูวิธีสร้างและกำหนดค่าตัวนับ Yandex Metrica

บันทึก! เช่นเดียวกับ Google.Analytics ไซต์ไม่จำเป็นต้องใช้โค้ด รหัสผลลัพธ์เมื่อตั้งค่า Yandex Metrics จะต้องคัดลอกและเพิ่มลงในหน้าต่าง "HTML ที่กำหนดเอง" ซึ่งปรากฏในขั้นตอนก่อนหน้า

รูปที่ 22

ก่อนเผยแพร่ ตรวจสอบการทำงานที่ถูกต้องของแท็กโดยคลิกที่ปุ่ม "ดูตัวอย่าง"

รูปที่ 23

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

รูปที่ 24

หลังจากที่เรามั่นใจว่าแท็กทำงานในโหมดเบื้องต้น ให้คลิก "เผยแพร่"

ดังนั้นเราจึงเชื่อมต่อ Yandex Metrica บนไซต์โดยไม่รบกวนซอร์สโค้ดของหน้า

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

Google Tag Manager ช่วยให้คุณสามารถปรับแต่งและปรับใช้แท็ก รวมถึงสำหรับ โฆษณา Google , Google Analyticsและ ไฟน้ำท่วม, และ บุคคลที่สาม. หากต้องการใช้เครื่องจัดการแท็ก ให้ทำตามขั้นตอนเหล่านี้:

บัญชี – ระดับสูงสุดลำดับชั้นในเครื่องจัดการแท็ก ตามกฎแล้ว บัญชีเดียวก็เพียงพอแล้วสำหรับบริษัท บัญชีเครื่องจัดการแท็กของคุณมีตั้งแต่หนึ่งบัญชีขึ้นไป ตู้คอนเทนเนอร์. มีประเภทคอนเทนเนอร์สำหรับเว็บไซต์ หน้า AMP แอพพลิเคชั่นแอนดรอยด์และ iOS

วิธีสร้างบัญชีและคอนเทนเนอร์

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

วิธีเพิ่มคอนเทนเนอร์ในบัญชีที่มีอยู่

การติดตั้งตู้คอนเทนเนอร์

หน้าเว็บ

• วางข้อมูลโค้ดด้านบน (เริ่มต้นด้วย
  
  

  Если вам непонятно, то придется прибегнуть к услугам вебмастера. Но, поверьте мне, после этого обращаться к вебмастерам по пустяшным делам вы будете редко.

  Терминология Google Tag Manager

  Для того, чтобы разъяснить многие моменты и в то же время разобрать все самое необходимое для работы с Tag Manager, я решил дать небольшой список основных терминов. Итак:

  • Контейнер – это тот самый JavaScript-код, который нужно вставить на все страницы. В него будут входить все те кода, которые мы установим с помощью Диспетчера тегов;
  • Тег – это, непосредственно, сам код счетчика Google Analytics или Метрики;
  • Триггер – это условие, при выполнении, которого активируется тег;

  Установка счетчика Google Analytics

  Настройка Google Tag Manager у многих начинается с установки счетчика Analytics. Мы не исключение. Итак:

  

  Нехитрым способом мы установили счетчик Google Analytics. Как видите, это несложно.

  Установка счетчика Метрики

  Установить счетчик Метрики еще проще. Так же создаем тег и при выборе типа тега выбираем “Пользовательски HTML”:
  

  Затем просто вставляем код Метрики в поле HTML:
  

  Назначаем тот же триггер “All Pages”, даем название и сохраняем. Вот и все, теперь у нас в одном контейнере находится два счетчика:
  

  Сегодня вы узнали как разгрузить страницы своего сайта от лишнего кода. Можете удалять кода счетчиков и оставить только код Google Tag Manager.

  Как видите, настройка Google Tag Manager занимает всего пару минут.

  Ну а на этом все, дорогие друзья. До скорых встреч!

  Не забывайте подписываться на обновления блога.