วิธีติดตามการส่งแบบฟอร์ม Elementor ในเหตุการณ์ Google Analytics โดยใช้ JQuery
ฉันได้ทำงานในไซต์ WordPress ของลูกค้าในช่วงสองสามสัปดาห์ที่ผ่านมาซึ่งมีความซับซ้อนค่อนข้างน้อย พวกเขากำลังใช้ WordPress ด้วยการบูรณาการกับ ActiveCampaign เพื่อการบำรุงเลี้ยงผู้มุ่งหวังและ Zapier บูรณาการกับ Zendesk ขาย ผ่านทาง แบบฟอร์มองค์ประกอบ. เป็นระบบที่ยอดเยี่ยม… เริ่มต้นแคมเปญแบบหยดสำหรับผู้ที่ขอข้อมูลและผลักดันลูกค้าเป้าหมายไปยังตัวแทนฝ่ายขายที่เหมาะสมเมื่อมีการร้องขอ ฉันประทับใจมากกับความยืดหยุ่นของรูปร่างและรูปลักษณ์ของ Elementor
ขั้นตอนสุดท้ายคือการจัดเตรียมแดชบอร์ดการวิเคราะห์สำหรับลูกค้าผ่าน Google Analytics ซึ่งมอบประสิทธิภาพการส่งแบบฟอร์มแบบเดือนต่อเดือนให้กับลูกค้า พวกเขาติดตั้ง Google Tag Manager ไว้ ดังนั้นเราจึงได้บันทึกธุรกรรมอีคอมเมิร์ซและกิจกรรมการดู YouTube บนไซต์แล้ว
ฉันพยายามใช้ DOM ทริกเกอร์ และเหตุการณ์ต่างๆ ภายใน Google Tag Manager หลายครั้งเพื่อบันทึกการส่งแบบฟอร์มที่ประสบความสำเร็จสำหรับ Elementor แต่ไม่มีโชคเลย ฉันได้ทดสอบวิธีต่างๆ มากมายในการตรวจสอบหน้าเว็บ โดยดูข้อความแสดงความสำเร็จที่จะปรากฏขึ้นผ่าน AJAX และมันก็ใช้งานไม่ได้ ดังนั้น… ฉันค้นหาและพบวิธีแก้ปัญหาที่ยอดเยี่ยมจาก Tracking Chef ที่เรียกว่า การติดตามแบบฟอร์ม Bulletproof Elementor ด้วย GTM.
สคริปต์ใช้ jQuery และ Google Tag Manager เพื่อผลักดัน เหตุการณ์ Google Analytics เมื่อส่งแบบฟอร์มเรียบร้อยแล้ว ด้วยการแก้ไขเล็กน้อยและการปรับปรุงไวยากรณ์หนึ่งครั้ง ฉันมีทุกสิ่งที่ต้องการ นี่คือรหัส:
<script>
jQuery(document).ready(function($) {
$(document).on('submit_success', function(evt) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'ga_event',
'eventCategory': 'Form ',
'eventAction': evt.target.name,
'eventLabel': 'Submission'
});
});
});
</script>
เก่งมาก ดูซับส่งสำเร็จแล้วผ่าน ฟอร์ม เป็นหมวดหมู่ the ชื่อปลายทาง เป็นการกระทำและ การยอม เป็นฉลาก เมื่อสร้างเป้าหมายแบบเป็นโปรแกรม คุณสามารถมีโค้ดนี้ที่ส่วนท้ายของทุกหน้าเพื่อสังเกตการส่งแบบฟอร์ม ดังนั้น… เมื่อคุณเพิ่มหรือแก้ไขแบบฟอร์ม คุณจะไม่ต้องกังวลกับการอัปเดตสคริปต์หรือเพิ่มไปยังหน้าอื่น
ติดตั้งสคริปต์ผ่าน Elementor Custom Code
หากคุณเป็นเอเจนซี่ ฉันขอแนะนำการอัปเกรดและใช้งาน Elementor แบบไม่จำกัดสำหรับลูกค้าทั้งหมดของคุณ เป็นแพลตฟอร์มที่แข็งแกร่งและจำนวนการผสานรวมพันธมิตรยังคงพุ่งสูงขึ้นอย่างต่อเนื่อง จับคู่กับปลั๊กอินเช่น แบบฟอร์มการติดต่อ DB และคุณยังสามารถรวบรวมการส่งแบบฟอร์มทั้งหมดของคุณได้อีกด้วย
Elementor Pro มีตัวเลือกการจัดการสคริปต์ที่ยอดเยี่ยมในตัว คุณสามารถป้อนรหัสดังนี้:
- นำทางไปยัง Elementor > รหัสที่กำหนดเอง
- ตั้งชื่อรหัสของคุณ
- กำหนดตำแหน่งในกรณีนี้คือจุดสิ้นสุด แท็กร่างกาย.
- กำหนดลำดับความสำคัญถ้าคุณมีมากกว่าหนึ่งสคริปต์ที่คุณต้องการแทรกและตั้งค่าลำดับของสคริปต์
- คลิกอัปเดต
- ระบบจะขอให้คุณตั้งค่าเงื่อนไขและตั้งค่าเป็นค่าเริ่มต้นของทุกหน้า
- รีเฟรชแคชของคุณและสคริปต์ของคุณพร้อมใช้งานแล้ว!
ดูตัวอย่างการผสานรวม Google Tag Manager ของคุณ
Google Tag Manager มีกลไกที่ยอดเยี่ยมในการเชื่อมต่อกับอินสแตนซ์ของเบราว์เซอร์และทดสอบโค้ดของคุณจริงๆ เพื่อดูว่ามีการส่งตัวแปรอย่างเหมาะสมหรือไม่ นี่เป็นสิ่งสำคัญเนื่องจาก Google Analytics ไม่ใช่เรียลไทม์ คุณสามารถทดสอบ ทดสอบ และทดสอบ และรู้สึกหงุดหงิดจริงๆ ที่ข้อมูลไม่แสดงใน Google Analytics หากคุณไม่ทราบเรื่องนี้
ฉันจะไม่ให้การกวดวิชาที่นี่เกี่ยวกับวิธีการ ดูตัวอย่างและแก้ไขข้อบกพร่องของ Google Tag Manager… ฉันจะถือว่าคุณรู้ ฉันสามารถส่งแบบฟอร์มในหน้าทดสอบที่เชื่อมต่อแล้วดูข้อมูลที่ส่งไปยังข้อมูล GTM ได้ตามต้องการ:
ในกรณีนี้ หมวดหมู่ถูกฮาร์ดโค้ดเป็นฟอร์ม เป้าหมายคือแบบฟอร์มติดต่อเรา และป้ายกำกับคือการส่ง
ใน Google Tag Manager ตั้งค่าตัวแปรข้อมูล เหตุการณ์ ทริกเกอร์ และแท็ก
ขั้นตอนสุดท้ายคือการตั้งค่า Google Tag Manager เพื่อบันทึกตัวแปรเหล่านั้นและส่งไปยังแท็ก Google Analytics ที่ตั้งค่าสำหรับเหตุการณ์ Elad Levy ให้รายละเอียดขั้นตอนเหล่านี้ในโพสต์อื่นของเขา - การติดตามเหตุการณ์ทั่วไปใน Google Tag Manager.
เมื่อตั้งค่าแล้ว คุณจะเห็นเหตุการณ์ใน Google Analytics!
การเปิดเผยข้อมูล: ฉันใช้ลิงค์พันธมิตรตลอดบทความนี้