สัปดาห์ที่ผ่านมา ทีม Adobe Dynamic Tag Management ชั้นนำได้เพิ่มคุณสมบัติใหม่ที่น่าสนใจให้กับกฎตามเหตุการณ์ของ DTM มีเหตุการณ์ใหม่ 2 ประเภทสำหรับกฎตามเหตุการณ์ที่คุณสามารถใช้ได้

1. กำหนดเอง
2. pushState หรือ hashchange

อ่านหัวข้อด้านล่างสำหรับข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์แต่ละประเภท

กฎตามเหตุการณ์: กำหนดเอง

ขั้นแรก ให้กำหนดเหตุการณ์ที่กำหนดเอง มาดูตัวอย่างเล็กๆ น้อยๆ ของกฎตามเหตุการณ์อื่นๆ ใน DTM ด้านล่างนี้คือรายการประเภทเหตุการณ์สำหรับกฎตามเหตุการณ์

เมื่อสร้างกฎตามเหตุการณ์ คุณสามารถตั้งค่าสำหรับเหตุการณ์เริ่มต้นที่เฉพาะเจาะจงได้ เบราว์เซอร์แต่ละตัว (แม้แต่ Internet Explorer) มีกิจกรรมเริ่มต้นที่สามารถเรียกใช้สำหรับการกระทำบางอย่าง สิ่งที่ง่ายบางอย่างคือ:

• คลิกเมาส์
• เมาส์โอเวอร์ (ชี้เมาส์เหนือบางสิ่งบนหน้า)
• โฟกัสฟิลด์ฟอร์ม (เคอร์เซอร์เข้าไปด้านในฟิลด์ฟอร์ม)
• ฟิลด์ฟอร์มเบลอ (เคอร์เซอร์ออกจากฟิลด์ฟอร์ม)
• ส่งแบบฟอร์ม
• เป็นต้น

ทั้งหมดนี้สมเหตุสมผล เป็นสิ่งที่เราทำทุกวันบนเว็บ บางครั้งคุณจำเป็นต้องติดตามบางสิ่งและแทบจะเป็นไปไม่ได้เลยที่จะทำอย่างถูกต้อง นี่คือเหตุผลที่ฉันชอบใช้เหตุการณ์ JavaScript คิดว่าเหตุการณ์เป็นคลื่นวิทยุ พวกเขาออกอากาศให้ทุกคนได้ยิน แต่คุณต้องปรับความถี่ให้เหมาะสมจึงจะได้ยิน หากคุณออกอากาศและไม่มีใครฟัง ก็ไม่ใช่เรื่องใหญ่ (อย่าบอกผู้โฆษณาทางวิทยุ) เช่นเดียวกับเหตุการณ์: คุณสามารถเรียกเหตุการณ์และจะไม่ก่อให้เกิดปัญหาใดๆ หรือส่งข้อผิดพลาดใดๆ หากไม่มีสิ่งที่รับฟัง และถ้าคุณรับฟังเหตุการณ์ที่ไม่เคยเกิดขึ้น มันจะไม่ก่อให้เกิดปัญหาหรือข้อผิดพลาดใดๆ

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

หากคุณคุ้นเคยกับกฎการโทรโดยตรงของ DTM คุณอาจถามตัวเองว่า "ทำไมไม่ใช้กฎการโทรโดยตรง" คำถามที่ถูกต้อง ปัญหาคือกฎการโทรโดยตรงสร้างการพึ่งพา DTM ถ้าฉันเป็นนักพัฒนาและมีคนบอกให้ฉันใส่โค้ดจำนวนมากที่อ้างอิงถึง _satellite.track ในโค้ดของฉัน ฉันจะตั้งคำถามและมักจะตอบว่าไม่! คุณสามารถใช้เหตุการณ์ซึ่งไม่มีการขึ้นต่อกันแทนได้

เพื่อให้สามารถฟังเหตุการณ์ได้ คุณต้องเรียกเหตุการณ์หนึ่งก่อน นักพัฒนาของคุณควรกำหนดเหตุการณ์ในโค้ดของไซต์ การระบุเวลาและตำแหน่งที่จะใช้อาจค่อนข้างยุ่งยาก แต่หลักการง่ายๆ คือหากมีสิ่งที่คุณต้องการติดตามและคุณไม่สามารถติดตามได้ด้วยประเภทเหตุการณ์ DTM ที่กำหนดไว้ล่วงหน้า ให้ใช้เหตุการณ์ที่กำหนดเอง เราสามารถหาข้อมูลที่ดีเกี่ยวกับวิธีการทำเช่นนี้ได้จาก Mozilla เหตุการณ์พื้นฐานมี 2 ประเภท:

• เหตุการณ์ – ทริกเกอร์ว่ามีบางอย่างเกิดขึ้นโดยไม่ส่งข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์
• CustomEvent – ​​เพิ่มข้อมูลบางอย่างลงในเหตุการณ์

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

 var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice}); document.getElementById('minicart').dispatchEvent(addToCart);

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

ต่อไปฉันจะกำหนดค่ากฎเพื่อฟังใน DTM:

1. เพิ่มกฎตามเหตุการณ์ใหม่
2. ตั้งชื่อให้มัน
3. เลือกประเภทเหตุการณ์ “กำหนดเอง” และป้อนชื่อเหตุการณ์ ซึ่งเรากำหนดให้เป็น “addToCart”
   
4. กำหนดแท็กหรือองค์ประกอบที่จะมีเหตุการณ์นี้ ใช้ตัวเลือก CSS นี่จะเป็น “#minicart”
   
5. กำหนดค่ากฎ นี่คือที่ที่มันเย็น คุณสามารถใช้ "รายละเอียด" ที่ให้ไว้ในงานและยังสามารถใช้เป็นวัตถุได้ ขอบคุณ ADOBE! ฉันกำลังส่งเหตุการณ์ Google Analytics พร้อมข้อมูลที่ฉันต้องการ คุณสามารถอ้างอิงข้อมูลได้โดยใช้ %event.detail% หรือหากคุณมีวัตถุ คุณสามารถอ้างอิงเป็น %event.detail.<<name>>% ดูตัวอย่างด้านล่าง
   
   ฉันอาจจะไม่ส่งกิจกรรมแบบนี้ แต่คุณเข้าใจว่ามันสามารถนำไปใช้ได้อย่างไร และหากคุณต้องการใช้ในโค้ดที่กำหนดเอง สมมติว่าสำหรับเครื่องมือ Adobe Analytics คุณสามารถอ้างอิงเป็น _satellite.getVar(“%event.detail.product_id%”) ซอสสุดยอด!!!

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

pushState หรือ hashchange

ผลักดันสถานะ

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

เมื่อตั้งค่ากฎ แน่นอนว่าคุณจะต้องเลือกประเภทเหตุการณ์ใหม่

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

เปลี่ยนแฮช

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

หากต้องการกำหนดค่ากฎใหม่ ให้เลือกประเภทเหตุการณ์เดียวกันกับ pushState ข้อแตกต่างเพียงอย่างเดียวคือตอนนี้คุณสามารถดูแฮชเป็นเกณฑ์ของคุณได้ ตัวอย่างเช่น:

บทสรุป

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