วิธีติดตามการส่งแบบฟอร์ม Elementor ในเหตุการณ์ Google Analytics โดยใช้ JQuery

วิธีติดตามการส่งแบบฟอร์ม Elementor ในเหตุการณ์ Google Analytics

ฉันได้ทำงานในไซต์ 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

  • นำทางไปยัง Elementor > รหัสที่กำหนดเอง
  • ตั้งชื่อรหัสของคุณ
  • กำหนดตำแหน่งในกรณีนี้คือจุดสิ้นสุด แท็กร่างกาย.
  • กำหนดลำดับความสำคัญถ้าคุณมีมากกว่าหนึ่งสคริปต์ที่คุณต้องการแทรกและตั้งค่าลำดับของสคริปต์

การส่งแบบฟอร์ม Elementor ไปยังกิจกรรม GA ผ่าน GTM

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

ดูตัวอย่างการผสานรวม Google Tag Manager ของคุณ

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

ฉันจะไม่ให้การกวดวิชาที่นี่เกี่ยวกับวิธีการ ดูตัวอย่างและแก้ไขข้อบกพร่องของ Google Tag Manager… ฉันจะถือว่าคุณรู้ ฉันสามารถส่งแบบฟอร์มในหน้าทดสอบที่เชื่อมต่อแล้วดูข้อมูลที่ส่งไปยังข้อมูล GTM ได้ตามต้องการ:

ชั้นข้อมูลตัวจัดการแท็กของ Google

ในกรณีนี้ หมวดหมู่ถูกฮาร์ดโค้ดเป็นฟอร์ม เป้าหมายคือแบบฟอร์มติดต่อเรา และป้ายกำกับคือการส่ง

ใน Google Tag Manager ตั้งค่าตัวแปรข้อมูล เหตุการณ์ ทริกเกอร์ และแท็ก

ขั้นตอนสุดท้ายคือการตั้งค่า Google Tag Manager เพื่อบันทึกตัวแปรเหล่านั้นและส่งไปยังแท็ก Google Analytics ที่ตั้งค่าสำหรับเหตุการณ์ Elad Levy ให้รายละเอียดขั้นตอนเหล่านี้ในโพสต์อื่นของเขา - การติดตามเหตุการณ์ทั่วไปใน Google Tag Manager.

เมื่อตั้งค่าแล้ว คุณจะเห็นเหตุการณ์ใน Google Analytics!

รับ Elementor Pro

การเปิดเผยข้อมูล: ฉันใช้ลิงค์พันธมิตรตลอดบทความนี้

6 คอมเมนต์

  1. 1
  2. 3

    ฉันใช้หลายขั้นตอนในรูปแบบองค์ประกอบหรือ แต่ฉันต้องการติดตามเหตุการณ์เมื่อผู้ใช้คลิกปุ่มถัดไป
    คุณรู้จักฉันไหมเหตุการณ์นี้ ขอบคุณ!

  3. 5

คุณคิดอย่างไร?

ไซต์นี้ใช้ Akismet เพื่อลดสแปม เรียนรู้วิธีการประมวลผลข้อมูลความคิดเห็นของคุณ.