Global Site Tag โค้ด Google Analytics ที่สมบูรณ์แบบและง่ายสำหรับผู้เริ่มต้น

gtag

โดยปกติแล้วผมมักจะแนะนำให้ติดตั้ง Google Analytics ผ่าน GTM (Google Tag Manager) ซึ่งเป็นวิธีที่ดีและยืดหยุ่นกับการใช้งานด้านอื่นๆในอนาคต แต่สำหรับผู้เริ่มต้นอาจจะเป็นการยากอยู่สักหน่อยที่จะต้องศึกษาทั้งสองอย่างไปพร้อมๆ กัน และในกรณีที่เว็บไม่ได้มีความซับซ้อนอะไร ไม่ได้ต้องการแทรคข้อมูลอะไรพิเศษ ผมก็มักจะแนะนำให้ติดโค้ด GA โดยตรงที่หน้าเว็บเลยซึ่งเป็นวิธีที่ง่ายและเบสิคที่สุดแล้ว ที่อยากจะบอกก็คือไม่ใช่แค่ง่ายนะครับโค้ด GA เวอร์ชั่นใหม่นี้มีฟีเจอร์ดีๆ หลายอย่างที่หลายคนที่ใช้ GTM อยู่ยังต้องอิจฉากันเลยล่ะ สำหรับใครที่อ่านบทความนี้แล้วยังไม่เคยติดตั้ง Google Analytics สามารถอ่านวิธีการสมัครและติดตั้งได้ที่ลิงค์นี้ วิธีการติดตั้ง Google Analytics อย่างถูกต้อง เข้าใจง่าย ทำได้เอง ในขั้นสุดท้ายของการสมัครเราจะได้จาวาสคริปต์มาชุดหนึ่ง ซึ่งเวอร์ชั่นล่าสุดนี้มีชื่อว่า Global Site Tag หรือ gtag.js นั่นเอง

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

Global Site Tag (gtag.js) ติดตั้งอย่างไร

<!-- Global site tag (gtag.js) - Google Analytics -->
 async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID">

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');

ด้านบนเป็นหน้าตาของโค้ดที่เราจากขั้นตอนการสมัคร หลายคนที่เพิ่งเคยเห็นครั้งแรกก็ไม่ต้องตกใจไปนะครับ ถ้าเราไม่ใช่โปรแกรมเมอร์เราก็ไม่จำเป็นต้องไปเข้าใจความหมายอะไร เราแค่เอาไปติดในเว็บหรือส่งต่อให้โปรแกรมเมอร์ก็พอ วิธีการติดตั้งก็ให้เอาโค้ดชุดที่ได้มาไปวางไว้ในเว็บไซต์ของเราทุกหน้า พอมีคนเข้าเว็บไซต์เราโค้ดชุดนี้จะทำงานโดยไปโหลด gtag.js มาและทำการส่ง pageview หน้าที่มีคนดูไปยังระบบของ Google analytics เท่านี้เราก็จะได้สามารถเข้าไปดูรีพอร์ทที่มีมากมายใน Google Analytics กันได้แล้ว  ส่วนใครคุ้นๆ กับโค้ดชุดเก่าอาจจะพอจำได้ว่ามีโค้ดอยู่บรรทัดหนึ่งที่ทำหน้าที่ส่ง pageview ไป แต่ในเวอร์ชั่นนี้มันได้หายไปแว้วว จริงๆ มันก็ส่งไปในบรรทัดสุดท้ายที่มี Tracking ID นั่นแหละครับ

จะส่งข้อมูลไป 2 properties พร้อมกันได้ไหม ได้สิ ง่ายด้วย 🙂

หลายคนมักมีคำถามถามเข้ามาว่า ถ้าอยากจะส่งข้อมูลไปทีเดียว 2 property ทำได้ไหม เพราะมีแผนกอื่นหรือบริษัทอื่นที่จำเป็นต้องดูข้อมูล Google Analytics เหมือนกัน แต่เราอาจจะไม่อยากให้เข้ามาใช้ Property ของเรา ถ้าเป็นเมื่อก่อนผมจะตอบว่าได้ แต่…มันมีรายละเอียดที่ต้องอธิบายเยอะ และมีความยากในการทำงานในหลายๆ จุด แต่ถ้าเป็นตอนนี้ผมตอบได้เลยว่าง่าย และง่ายมากกกด้วย ส่ิงที่เราทำก็เพียงแค่เอา Property ID อีกอันหนึ่งที่เราอยากจะส่งข้อมูลไปด้วยมาใส่ไว้อีกบรรทัดหนึ่งต่อจาก Property ID ตัวแรกเท่านั้น ตามภาพด้านล่าง จบนะ! ง่ายไหมล่ะครับ

<!-- Global site tag (gtag.js) - Google Analytics -->
 async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID">

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');
  gtag('config', 'GA_TRACKING_ID_2');

แล้วถ้าจะส่งไป 3 หรือ 4 Properties ทำได้ไหม ก็ได้อีกนั่นแหละครับ

จะกี่ Property ก็ได้ครับ วิธีทำก็แค่เพิ่มไปอีกบรรทัดหรือสองบรรทัดตามขั้นตอนเดิมเลย แต่ที่ง่ายกว่าเดิมนั่นก็คือเราสามารถที่จะส่งเป็น Group ได้อีกด้วย ตามภาพด้านล่างนี้จะสังเกตเห็นว่า Tracking ID ที่ 2 และ 3 จะมีการตั้งชื่อ Group เอาไว้ แล้วตอนส่ง Event Sign_in ก็เลือกส่งไปที่ชื่อ Group นั้น ข้อมูลที่เราส่งก็จะไปที่ Property ที่ 2 และ 3 ทีเดียวพร้อมกันเลย ง่ายไปอีกใช่ไหมครับ 🙂

// Configure a target
gtag('config', 'GA-TRACKING_ID-1');
gtag('config', 'GA-TRACKING_ID-2', { 'groups': 'agency' });
gtag('config', 'GA-TRACKING_ID-3', { 'groups': 'agency' });

// Route this sign_in event to tracking IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });

จริงๆ แล้วยังมีอีกหลายๆ เรื่องที่ทำได้ง่ายขึ้นกว่าเดิมมาก เอาไว้จะเขียนเพิ่มเติมให้อีกทีนะครับ บทความนี้ขอประมาณนี้ก่อนเพราะเป็นห่วงว่าหลายคนที่เป็น Marketer อ่านอยู่เห็นโค้ดเยอะๆ แล้วจะเวียนหัวครับ ปล. จริงๆ ก็อยากให้นักการตลาดทุกคนเรียนรู้ไว้สักหน่อยนะครับ เพราะต่อไปภาษาอังกฤษอาจจะไม่ใช่ภาษาที่สองที่ทุกคนจะต้องเรียนรู้กันแล้ว ภาษาโปรแกรมมิ่งนี่แหละครับที่อาจจะมาแทนที่ 🙂

Happy Analytics

Leave a Reply