วิธีการ Track URL Fragment ให้แสดงผลเป็น Pageviews

0
1195
Google Tag Manager
Google Tag Manager

เราสามารถพบ url fragment ได้กับเว็บไซต์แบบ one-page หรือเว็บไซต์ที่พัฒนาโดยภาษา angular อยู่อย่างเสมอ สามารถสังเกตุได้ง่ายๆว่า url ที่มีเครื่องหมาย # hashtag อยู่ใน url ด้วยนั่นเอง

โครงสร้างของ url แบบย่อๆครับ
โครงสร้างของ url แบบย่อๆครับ

โดยส่วนที่ตามหลัง # เราจะเรียกว่า fragment identifier ปกติจะไว้ใช้ระบุตำแหน่งของ html ให้เรากระโดดไปยังบางส่วนของหน้าเว็บไซต์ได้โดยที่ไม่ต้อง reload page


ใน Google Analytics (GA) การเปลี่ยนแปลงของ fragment นั้นจะไม่ได้ถูกนำมาคิด pageview เพราะว่ามันไม่มีการโหลดหน้าเว็บไซต์ขึ้นมาใหม่ หากเข้าไปดูในหน้ารายงาน จะพบเพียงข้อมูลของ url เท่านั้น อะไรที่ตามหลัง # จะไม่ปรากฎอยู่ในหน้ารายงานครับ

All Pages ภายใต้ Site Content ในรายงาน Behaviour | วิธีการ สร้าง Virtual Pageview ด้วย Google Tag Manager
All Pages ภายใต้ Site Content ในรายงาน Behaviour ของ Google Analytics

เมื่อไม่มีการโหลดหน้าเว็บไซต์ขึ้นมาใหม่ ก็จะไม่มีการเก็บ pageview ใน GA แต่ว่าเว็บเบราเซอร์ยังคงเก็บข้อมูล browser history change ทุกครั้งที่มีการเปลี่ยนแปลงของ fragment indentifier ซึ่งข้อมูลในส่วนนี้เราสามารถนำมาใช้ประโยชน์ได้ด้วยความช่วยเหลือจาก Google Tag Manager (GTM) ที่เราจะพูดถึงในหัวข้อถัดๆไปครับ

วิธีการ สร้าง Virtual Pageview ด้วย Google Tag Manager

เพราะว่าการใช้ url fragment นั้นไม่เกิดการ reload หน้าเว็บไซต์ เราจึงไม่สามารถใช้ trigger แบบ All Page View ได้ แต่โชคดีที่ใน GTM นั้นจะมี trigger ที่ชื่อว่า History Change Trigger สร้างไว้เป็นค่าตั้งต้นให้ใช้งานได้เลยครับ โดย trigger ตัวนี้นั้นจะทำงานเมื่อเกิดเหตุการณ์ browser history change หรือในบทความนี้ มันจะทำงานเมื่อ fragment identifier เปลี่ยนแปลง

ใน Google Tag Manager จะมี History Change Trigger ให้ใช้งานครับ
ใน Google Tag Manager จะมี History Change Trigger ให้ใช้งานครับ

การสร้าง virtual pageview และการส่งข้อมูลขึ้นไปแสดงผลใน GA นั้นจำเป็นที่คุณจะต้องทำการตั้งค่าให้กับ Tag,Trigger และมีการสร้าง Custom JavaScript Variable ขึ้นมา โดยผมจะอธิบายว่าแต่ละส่วนทำงานสัมพันธ์กันอย่างไรแยกเป็นหัวข้อๆ เพื่อความง่ายในการทำความเข้าใจ และเพื่อที่คุณสามารถนำไปดัดแปลงแก้ไขตามความต้องการได้นะครับ


จากนี้ไปเราจะใช้ตัวอย่าง user paths ตามนี้นะครับ เพื่อความง่ายในการทำความเข้าใจ ผมขายหลักสูตรโฆษณาอยู่ 2 ตัวด้วยกัน โดยใช้ form ในการขอข้อมูลเป็นชุดเดียวกัน แต่ใช้ fragment identifier ชี้ไปยังคนละส่วนของหน้าเว็บไซต์ รวมถึงหน้า thankyou page ของผมด้วย

www.example.com/course
www.example.com/course#facebook-ads
www.example.com/course#google-ads
www.example.com/course#thankyou

Custom JavaScript Variable

หากย้อนขึ้นไปอ่านในช่วงต้นของบทความ ผมจะอธิบายไปว่า ข้อมูลหลัง # hashtag จะไม่ถูกนำมาแสดงผลบนหน้ารายงาน GA จะเห็นแต่ www.example.com/course ได้เท่านั้น มันทำให้เราไม่สามารถวัดผลแยกกันได้ว่า ผมขาย facebook ads หรือ google ads ได้ดีกว่ากัน

ดังนั้นเราจำเป็นจะต้องสร้าง javascript ชุดหนึ่งขึ้นมาบันทึกข้อมูลของ fragment identifier หรือข้อมูลหลัง # hashtag แล้วให้ทาง GTM ช่วยนำข้อมูลที่เราบันทึกนั้น ส่งต่อไปยัง GA แสดงผลเป็นชื่อ page ของ virtual pageview ของเรา

เราจำเป็นจะต้องสร้าง Variable มาเก็บข้อมูล โดยเลือกประเภทของ Variable แบบ Custom Javascript
เราจำเป็นจะต้องสร้าง Variable มาเก็บข้อมูล โดยเลือกประเภทของ Variable แบบ Custom Javascript

เริ่มต้นใน GTM ด้วยการสร้าง User-Defined Variables เลือกประเภทเป็น custom javascript แล้วนำ code ชุดที่เห็นด้านล่างนี้ไปวางไว้นะครับ ขออธิบายคร่าวๆว่า javascript นี้ทำหน้าที่อะไรนะครับ (สามารถคลิ๊กลิงค์ไปศึกษาเพิ่มที่ w3schools ได้ครับ)

window.location.pathname

ชุดนี้จะส่งค่า path ไปเก็บในตัวแปรที่เราสร้างมาครับ ในตัวอย่างคือ /course

window.location.search

ชุดนี้จะส่งค่า path และข้อมูลหลัง ? มาด้วยครับ (พวก utm parameter)

window.location.hash

ชุดนี้จะส่งข้อมูลหลัง hash ไปเก็บไว้ในตัวแปรครับ เช่น #thankyou

window.location.hash.replace(/^#/, "/")

ชุดนี้จะส่งค่า hash ไปเก็บ และ เปลี่ยน # เป็น / จะได้ /thankyou

สร้าง Variable มา 1 ตัว แบบ Custom Javascript แล้วเลือกใส่ชุด code ตามที่เราต้องการ
สร้าง Variable มา 1 ตัว แบบ Custom Javascript แล้วเลือกใส่ชุด code ตามที่เราต้องการ

ในส่วนนี้ต้องดัดแปลงเอานิดหน่อยตามโครงสร้างของ url ของแต่ละท่านนะครับ แต่ชุด javascript ที่แจ้งไปน่าจะครอบคลุมแล้วครับ ตัวแปรของผมมีชื่อว่า No Hash สร้างโดยใส่ชุด code ตามรูปเลยครับ แล้วเดี๋ยวเราจะนำไปใช้งานต่อไปครับ

History Change Trigger

ในส่วนของ trigger นั้นจะตั้งค่าได้ง่ายดังนี้ครับ ให้คุณสร้าง trigger ใหม่ขึ้นมาแล้วตั้งชื่อตามต้องการ ของผมเอาให้เข้าใจง่ายๆ ก็ตั้งว่า History Change Trigger แล้วเลือกประเภทของ trigger เป็น History Change

สร้าง trigger ขึ้นมาใหม่แบบ history change trigger เราต้องการให้มันทำงานเมื่อ # เปลี่ยนแปลง
สร้าง trigger ขึ้นมาใหม่แบบ history change trigger เราต้องการให้มันทำงานเมื่อ # เปลี่ยนแปลง

เลือกให้ fires แบบ some history changes โดยมีเงือนไขดังนี้ครับ History Source equals popstate หมายความว่ามันจะทำงานเมื่อ history มีการเปลี่ยนแปลงครับ

Google Analytics Tag

จุดสุดท้ายที่เราจะต้องตั้งค่า ก่อนที่ virtual pageview ของเราจะทำงานนั่นก็คือ การนำค่าจากตัวแปร ที่เราสร้างไปตั้งเป็นชื่อ page เพื่อแสดงผลใน Google Analytics โดยเข้าไปที่ tag configuration ครับ มองหา More Settings/Fields to Set แล้วกด Add Field

Field Name = page

Value = ตัวแปรที่เราสร้างในหัวข้อที่ผ่านมาครับ {{No Hash}}

การส่งข้อมูลให้ Google Analytics รับรู้ว่า ให้นำข้อมูลจากตัวแปรมาแทนที่ page ในหน้ารายงาน เพื่อสร้าง virtual pageview ครับ
การส่งข้อมูลให้ Google Analytics รับรู้ว่า ให้นำข้อมูลจากตัวแปรมาแทนที่ page ในหน้ารายงาน เพื่อสร้าง virtual pageview ครับ

แต่ว่าในตัวอย่างของผมนั้นมันมี page path เกิดขึ้นก่อน # hashtag ด้วยคือ /course ดังนั้นผมจึงต้องใส่ value เป็นแบบนี้ครับ {{Page Path}}{{No Hash}} ถึงจะเห็นเป็น /course/google-ads ไม่อย่างนั้นจะเห็นแค่ /google-ads นะครับ

การส่งข้อมูลเพื่อให้ Google Analytics รับรู้ว่า เอาไปทั้ง Path และ Fragment Indentifier นะ
การส่งข้อมูลเพื่อให้ Google Analytics รับรู้ว่า เอาไปทั้ง Path และ Fragment Indentifier นะ

เราเลือกให้ tag นี้ทำงานเมื่อมีการ load page โดยใช้ All Page Views หรือใช้ trigger ที่เราสร้างขึ้นมาแบบ history change เมื่อตั้งค่าเรียบร้อย virtual pageview ของคุณก็พร้อมจะ go live แล้วล่ะครับ อย่าลืมใช้ Preview Mode ใน GTM เพื่อตรวจสอบข้อมูลที่มีการบันทึกค่าด้วยนะครับว่าถูกต้องมั้ย

Preview Mode ใน Google Tag Manager | Virtual Pageview
Preview Mode ใน Google Tag Manager จะสามารถดูได้ว่าในแต่ละการเปลี่ยนแปลงบน browser ตัวแปรนั้นเก็บข้อมูลอะไรไว้บ้าง

บทส่งท้าย

เพราะว่า Google Analytics โดยปกติจะไม่เก็บหน้า pageview จาก url fragment ทำให้เราจำเป็นจะต้องสร้าง virtual pageview ขึ้นมาเอง โดยใช้ความสามารถของ Google Tag Manager เข้ามาช่วยด้วย โดย flow ของการทำงานจะเป็นประมาณนี้ครับ

  • เมื่อเข้าสู่เว็บไซต์ www.example.com/course all page trigger ใน GTM จะทำงาน ชื่อ page ใน GA จะเป็น /course
  • เมื่อคลิ๊ก www.example.com/course#facebook-ads History Source เปลี่ยนแปลง history change trigger ใน GTM จะทำงาน ชื่อ page ใน GA จะเป็น /course/facebook-ads

ผลลัพธ์ที่ได้จะทำให้คุณเห็น pageview ที่แท้จริงครับ และยังสามารถนำไปทำ Goal Funnel รวมถึงการตั้งค่า Goal แบบ destination ได้อีกด้วย อ้อ! Virtual pageview นั้นไม่ถูก index โดย google นะครับ หมายความว่าอะไรที่ตามหลัง # hashtag นั้นจะไม่ถูก crawl โดย googlebot นั่นเอง

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

Tae

ถ้าสงสัยกับวิธีทำงานก็สอบถามมาทาง Facebook ได้นะครับ หรือลองอ่านบทความ การติดตั้ง GA ด้วย GTM ในนี้ก่อนได้ครับ