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

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

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

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

เมื่อไม่มีการโหลดหน้าเว็บไซต์ขึ้นมาใหม่ ก็จะไม่มีการเก็บ 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 เปลี่ยนแปลง

การสร้าง 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 ของเรา

เริ่มต้นใน 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

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

History Change Trigger

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

เลือกให้ 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}}

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

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

บทส่งท้าย

เพราะว่า 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 ในนี้ก่อนได้ครับ