Contact form 7 naar Squeezely

Indien je voor contactformulieren gebruik maakt van de Contact Form 7 plugin, kan je via onderstaande instructies de inhoud van de formulieren via tag manager naar Spotler Activate synchroniseren.

Ids ophalen

Elk contactform heeft een uniek ID, en elk veld daarin heeft ook weer zijn eigen ID. We hebben beide nodig en dit kan je als volgt ophalen: open de pagina met het contactformulier, en vervolgens de console (ctrl-shift-j). Plak daarin onderstaande code:

document.addEventListener( 'wpcf7submit', function( event ) {

console.log(event.detail.contactFormId);
console.log(event.detail.inputs);

     });

Dit levert bijvoorbeeld onderstaand op:

Hier zien we dat het formulier ID 24 is, en de velden naam en e-mail respectievelijk 1 en 2 als ID hebben.

Tag aanmaken

Maak een custom HTML tag aan in GTM, met onderstaand script:

<script type="text/javascript">

  document.addEventListener( 'wpcf7submit', function( event ) {
    
         if (event.detail.contactFormId == 24 ) {
       var input = event.detail.inputs;
       var fullName = input[2].value.split(' ');
       var firstName = fullName[0];
       var lastName = fullName[fullName.length - 1];
 
        window._sqzl.push({
          "event" : "Contact",
          "firstname" : firstName,
          "lastname" : lastName,
          "email" : input[4].value
        });

     }
    </script>

Hierbij wijzig je 24 naar jouw formulierID. Vervolgens halen we alle doorgestuurde informatie op en plaatsen we het in de array ‘input’. Hierbij kan je individuele veldnamen ophalen door een element aan te spreken als volgt: input[2] als we het 2de veld, in dit geval email, willen versturen.

In dit voorbeeld heeft het naamveld in het formulier geen voornaam en achternaam opsplitsing, dus hebben we daar ook nog een script voor toegevoegd om deze op te splitsen. Als het veld rechtstreeks overeenkomt, hoef je geen extra variabelen aan te maken en kan je het gewoon als volgt doen: "email" : input[4].value.

We sturen in een custom event getiteld Contact vervolgens de naam en email door. De trigger voor dit formulier is de paginaweergave waar het formulier opstaat, vermits dit script een event listener is, zal het alleen echt uitvoeren wanneer het formulier ingediend wordt. Indien je het op de buttonklik plaatst, kan de event listener te laat in actie schieten.