Elementor -lomakkeen lähetysten seuraaminen Google Analytics -tapahtumissa JQueryn avulla

Elementor -lomakkeen lähetysten seuraaminen Google Analytics -tapahtumissa

Olen työskennellyt WordPress -asiakassivustolla viime viikkoina, ja siinä on paljon monimutkaisuutta. He käyttävät WordPress integroinnin kanssa ActiveCampaign johtojen hoitamiseen ja a Zapier integrointi Zendesk myy kautta Elementor -lomakkeet. Se on loistava järjestelmä… käynnistää tiputuskampanjat ihmisille, jotka pyytävät tietoja, ja lähettää liidin asianmukaisen myyntiedustajan pyynnöstä. Olen todella vaikuttunut Elementorin muodon joustavuudesta ja ulkoasusta.

Viimeinen vaihe oli tarjota asiakkaalle analytiikan hallintapaneeli Google Analyticsin kautta, joka tarjosi hänelle lomakkeiden lähetysten tehokkuuden kuukausittain. Heihin on asennettu Google Tag Manager, joten tallennamme jo verkkokauppatapahtumia ja YouTube-katselutoimintaa sivustolla.

Yritin useita kertoja hyödyntää DOM -tunnisteita, laukaisimia ja tapahtumia Google Tag Managerissa kaapatakseen onnistuneen lomakkeen lähetyksen Elementorille, mutta minulla ei käynyt onni ollenkaan. Testasin paljon erilaisia ​​tapoja seurata sivua, odottaen menestysviestiä, joka ilmestyy AJAXin kautta, mutta se ei vain toiminut. Joten… Tein hakuja ja löysin loistavan ratkaisun seurantakokilta, nimeltään Luodinkestävä Elementor -lomakkeen seuranta GTM: llä.

Käsikirjoitus hyödyntää jQuery ja Google Tag Managerin avulla Google Analytics -tapahtuma kun lomake on lähetetty onnistuneesti. Pienillä muokkauksilla ja yhdellä syntaksin parannuksella minulla oli kaikki mitä tarvitsin. Tässä koodi:

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

Se on melko nerokas, odottaa onnistunutta lähetystä ja sitten ohittaa muoto luokana, kohteen nimi kuten toiminta, ja Submission kuin etiketti. Kun teet tavoitteen ohjelmalliseksi, voit yksinkertaisesti pitää tämän koodin jokaisen sivun alatunnisteessa lomakkeen lähettämistä varten. Joten… kun lisäät tai muokkaat lomakkeita, sinun ei tarvitse huolehtia komentosarjan päivittämisestä tai lisäämisestä toiselle sivulle.

Asenna komentosarja Elementorin mukautetun koodin kautta

Jos olet toimisto, suosittelen kaikille asiakkaillesi rajoittamatonta päivitystä ja Elementorin käyttöä. Se on vankka alusta ja kumppanien integrointien määrä kasvaa jatkuvasti. Yhdistä se laajennuksen kaltaiseen Yhteydenottolomake DB ja voit myös kerätä kaikki lomakkeet.

Elementor Pro on loistava komentosarjojen hallintavaihtoehto sisäänrakennettu. Voit kirjoittaa koodisi seuraavasti:

Elementorin mukautettu koodi

  • Navigoida johonkin Elementor> Oma koodi
  • Nimeä koodisi
  • Aseta sijainti, tässä tapauksessa loppu body -tunniste.
  • Aseta prioriteetti, jos haluat lisätä useita skriptejä, ja määritä niiden järjestys.

Elementor -lomakkeen lähettäminen GA -tapahtumaan GTM: n kautta

  • Napsauta päivitä
  • Sinua pyydetään asettamaan ehto ja asettamaan se vain kaikkien sivujen oletusarvoksi.
  • Päivitä välimuisti ja skriptisi on käynnissä!

Esikatsele Google Tag Managerin integrointia

Google Tag Managerilla on loistava mekanismi, jolla voidaan muodostaa yhteys selainilmentymään ja testata koodisi todentaakseen, lähetetäänkö muuttujat oikein. Tämä on välttämätöntä, koska Google Analytics ei ole reaaliaikainen. Voit testata ja testata ja testata ja todella turhautua siihen, että tiedot eivät näy Google Analyticsissa, jos et ymmärtänyt tätä.

En aio tarjota opetusohjelmaa täällä kuinka esikatsella ja korjata Google Tag Manageria… Oletan, että tiedät. Voin lähettää lomakkeen yhdistetyllä testisivullani ja nähdä tiedot, jotka on siirretty GTM -tietoihin sellaisina kuin niiden on oltava:

google tag manager -tietokerros

Tässä tapauksessa luokka oli koodattu kovalla lomakkeella, kohteena oli Ota yhteyttä -lomake ja tunniste on Submission.

Google Tag Managerissa määritä datamuuttujat, tapahtuma, käynnistin ja tagi

Viimeinen vaihe tässä on määrittää Google Tag Manager tallentamaan nämä muuttujat ja lähettämään ne tapahtumaa varten määritettyyn Google Analytics -tagiin. Elad Levy kertoo näistä vaiheista toisessa viestissään - Yleinen tapahtumaseuranta Google Tag Managerissa.

Kun ne on määritetty, näet tapahtumat Google Analyticsissa!

Hanki Elementor Pro

Ilmoitus: Käytän tytäryhtiölinkkejäni tässä artikkelissa.

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.