Elementor is een gebruiksvriendelijke editor voor WordPress die in korte tijd erg populair geworden is. Met deze editor kun je pixelperfect pagina’s bouwen. In de editor zie je precies wat je aan het bouwen bent zodat je meteen het eindresultaat ziet. Dit is bij veel andere editors wel anders.
Standaard zit er in Elementor een widget waarmee je gemakkelijk formulieren kunt maken. Het kan echter lastig zijn om conversies in bijv. Google Ads te meten aangezien conversiemeting geen standaard functionaliteit is van deze widget. Een mogelijkheid is om een losse bedank-pagina te maken en daar een conversietag neer te zetten. Gebruikers worden dan na het invullen van het formulier doorgestuurd naar deze bedank-pagina waar de conversietag gevuurd wordt. Deze manier heeft echter een aantal nadelen:
- Gebruikers kunnen de bedank-pagina verversen waardoor er dubbele conversies gemeten worden
- De pagina kan geïndexeerd worden waardoor gebruikers vanuit zoekmachines landen op deze pagina. Gevolg: onterechte metingen.
Met behulp van Google Tag Manager is het mogelijk om conversiemeting wel monkey-proof in te richten. Hiervoor wordt er gebruik gemaakt van CSS-selectors. Google Tag Manager checked de pagina of er specifieke classes in de code staan. Als deze class verschijnt of veranderd dan wordt de tag gevuurd. Conversiemeting van Elementor forms kun je op de volgende manier instellen:
- Open de pagina met het Elementor formulier in Chrome en open de Inspector. (rechtermuis / inspect)
- Vul vervolgens het formulier helemaal in en verzend deze. Er verschijnt een bedankt-melding onder het formulier.
- Selecteer links onderin de inspector-pointer en klik op de bedankt-melding.
Het ziet er dan ongeveer zo uit:
We weten nu dat de class waarop wij moeten gaan letten. In dit voorbeeld is dit .elementor-message.elementor-message-success maar het kan in jouw geval anders heten. Deze klasse verschijnt pas in de code nadat het formulier verzonden is.
Open vervolgens het juiste Google Tag Manager account. Voeg een trigger toe met als type Zichtbaarheid van element. Gebruik voor deze trigger de volgende instellingen:
- Selectiemethode: CSS-kiezer
- Elementkiezer: .elementor-message.elementor-message-success (of de class die je zelf met Chrome inspector gevonden had)
- Vuur de trigger eenmaal per pagina
- Vink Dom-wijzigingen waarnemen aan
Je hebt nu een trigger gemaakt die je vervolgens weer kunt koppelen aan tags die je kunt vuren richting bijvoorbeeld Google Ads of Google Analytics. Zodra je dit gedaan hebt dan kun je testen of de tags gevuurd worden als het formulier wordt verzonden. Open in Google Tag Manager de preview-modus (in Chrome). Open de website met het Elementor formulier. Als de preview balk onderin er nog niet staat ververs de pagina dan nogmaals:
De tag staat als het goed is nog niet bij ‘Tags fired’ maar bij ‘Tags not fired’. Controleer je tagmanager configuratie als de tag in dit stadium wel gevuurd wordt.
Vul het formulier nu nogmaals in en controleer of de tag nu wel gevuurd wordt. Dat ziet er dan zo uit:
En voila! Je kunt vanaf nu conversies meten in Elementor Forms. Deze methode werkt voor alle forms die je op deze website toe gaat voegen. Het is ook mogelijk om per formulier eigen tags te vuren. Hier komen wij later op terug in een volgend blog. Heb je vragen over het inrichten van conversiemeting of heb je andere online marketing vragen? Neem dan contact met ons op!
