Paano Subaybayan ang Mga Pagsumite ng Elementor Form sa Mga Kaganapan sa Google Analytics gamit ang JQuery

Paano Subaybayan ang Mga Pagsumite ng Elementor Form sa Mga Kaganapan sa Google Analytics

Nagtatrabaho ako sa isang site ng client ng WordPress sa huling ilang linggo na may ilang mga pagkakumplikado. Ginagamit nila WordPress na may isang pagsasama sa ActiveCampaign para sa pag-aalaga ng mga lead at a Zapier pagsasama sa Ibenta ang Zendesk sa pamamagitan ng Mga Elemento Form. Ito ay isang mahusay na sistema ... pagsisimula drip kampanya sa mga taong humiling ng impormasyon at itulak ang humantong sa naaangkop na kinatawan ng mga benta kapag hiniling. Talagang napahanga ako sa kakayahang umangkop ng Elementor at hitsura at pakiramdam.

Ang huling hakbang ay ang pagbibigay ng isang dashboard ng analytics para sa kliyente sa pamamagitan ng Google Analytics na nagbigay sa kanila ng pagganap na buwan-buwan sa mga pagsumite ng form. Na-install ang Google Tag Manager, kaya nakakakuha na kami ng mga transaksyong e-commerce at aktibidad ng pagtingin sa YouTube sa site.

Gumawa ako ng maraming pagtatangka upang magamit ang DOM, mga pag-trigger, at kaganapan sa loob ng Google Tag Manager upang makuha ang matagumpay na pagsusumite ng form para sa Elementor ngunit wala naman palang swerte. Sinubukan ko ang isang tonelada ng iba't ibang mga paraan upang masubaybayan ang pahina, nanonood para sa mensahe ng tagumpay na mai-popup sa pamamagitan ng AJAX at hindi ito gumagana. Kaya ... gumawa ako ng ilang paghahanap at natagpuan ang isang mahusay na solusyon mula sa Pagsubaybay sa Chef, na tinawag Pagsubaybay sa form na Bulletproof Elementor kasama ang GTM.

Gumagamit ang script jQuery at Google Tag Manager upang itulak ang Kaganapan sa Google Analytics kapag matagumpay na naisumite ang form. Sa ilang mga menor de edad na pag-edit at isang pagpapabuti ng syntax, mayroon ako ng lahat ng kailangan ko. Narito ang code:

<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>

Ito ay medyo mapanlikha, pinapanood ang matagumpay na pagsumite, pagkatapos ay pumasa Anyo bilang kategorya, ang pangalan ng patutunguhan bilang ang Aksyon, at Paghaharap bilang tatak. Sa pamamagitan ng paggawa ng target na programmatic, maaari mo lamang magkaroon ng code na ito sa footer ng bawat pahina upang obserbahan ang isang pagsumite ng form. Kaya ... sa pagdaragdag o pagbago mo ng mga form, hindi ka na mag-aalala tungkol sa pag-update ng script o pagdaragdag nito sa ibang pahina.

I-install ang Script Sa pamamagitan ng Elementor Custom Code

Kung ikaw ay isang ahensya, lubos kong inirerekumenda ang walang limitasyong pag-upgrade at paggamit ng Elementor para sa lahat ng iyong mga kliyente. Ito ay isang solidong platform at ang bilang ng mga pagsasama ng kasosyo ay patuloy na tumataas. Paresin ito sa isang tulad ng Plugin Makipag-ugnay sa Form DB at maaari mo ring kolektahin ang lahat ng iyong mga pagsusumite ng form.

Elementor Pro mayroong isang mahusay na pagpipilian sa pamamahala ng script na nakapaloob. Narito kung paano mo mailalagay ang iyong code:

Custom Code ng Elementor

  • Mag-navigate sa Elementor> Pasadyang Code
  • Pangalanan ang iyong code
  • Itakda ang lokasyon, sa kasong ito ang pagtatapos tag ng katawan.
  • Magtakda ng isang priyoridad kung mayroon kang higit sa isang script na nais mong ipasok at itakda ang pagkakasunud-sunod ng mga ito.

Pagsusumite ng Form ng Elementor sa Kaganapan sa GA sa pamamagitan ng GTM

  • I-click ang update
  • Hihilingin sa iyo na itakda ang kundisyon at itakda lamang ito sa default ng lahat ng mga pahina.
  • I-refresh ang iyong cache at ang iyong script ay live!

Suriin ang Iyong Pagsasama ng Google Tag Manager

Ang Google Tag Manager ay may kamangha-manghang mekanismo para sa pagkonekta sa isang instance ng browser at talagang pagsubok ang iyong code upang maingat kung maipapadala o hindi ang mga variable. Mahalaga ito dahil ang Google Analytics ay hindi real-time. Maaari mong subukan at subukan at subukan at talagang mabigo na hindi nagpapakita ang data sa Google Analytics kung hindi mo namalayan ito.

Hindi ako magbibigay ng isang tutorial dito kung paano i-preview at i-debug ang Google Tag Manager... Ipagpalagay ko alam mo. Maaari kong isumite ang aking form sa aking konektadong pahina ng pagsubok at makita ang data na itinulak sa data ng GTM ayon sa kinakailangan:

layer ng data ng manager ng google tag

Sa kasong ito, ang kategorya ay hard-code bilang Form, ang target ay ang form na Makipag-ugnay sa Amin, at ang label ay Pagsumite.

Sa Google Tag Manager Mag-set Up ng Mga Variable ng Data, Kaganapan, Trigger, at Tag

Ang huling hakbang dito ay upang i-set up ang Google Tag Manager upang makuha ang mga variable na iyon at ipadala ang mga ito sa isang naka-set up na Google Analytics Tag para sa isang kaganapan. Inilahad ni Elad Levy ang mga hakbang na ito sa kanyang iba pang post - Pangkalahatang Pagsubaybay sa Kaganapan Sa Google Tag Manager.

Kapag na-set up na ang mga iyon, makikita mo ang Mga Kaganapan sa Google Analytics!

Kunin ang Elementor Pro

Pagbubunyag: Ginagamit ko ang aking mga kaakibat na link sa buong artikulong ito.

6 Comments

  1. 1
  2. 3

    Gumagamit ako ng multi step sa elementor form, ngunit gusto kong subaybayan ang kaganapan kapag nag-click ang user sa Next Button.
    Maaari mo bang kilalanin ako sa kaganapang ito. Salamat!

  3. 5

Ano sa tingin ninyo?

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.