Data uit formulieren scrapen naar Squeezely

Bij bepaalde CMS’en kan het lastig zijn om de data in de datalayer te krijgen of via Javascript te versturen, een alternatieve oplossing kan zijn om de data uit de HTML elementen te scrapen via Google Tag Manager. Hieronder zijn enkele scripts die daarbij helpen, al moet je een paar wijzigingen maken.

De eerste stap is bij ‘Variables’ een ‘Custom Javascript' variable aan te maken met dit als code:

function() {
  var email = document.getElementById("sMailAddress").value;
  var reg = new RegExp("^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$");
  
  if (reg.test(email) == true) {
    return email;
  } else {
    return "";
  }
}

Hierbij wijzig je in lijn 2 de sMailAddress waarde naar het ID wat in jouw formulier staat. We valideren ook nog of de opgegeven waarde in een geldig e-mail formaat staat.

Klik rechts op het invoerveld wat je wilt meten, e-mail in dit voorbeeld, en klik op ‘Inspecteren’. Vervolgens opent een scherm waarbij je het HTML element inclusief ID ziet.

Hierbij zie je id=sMailAddress staan voor dit voorbeeld.

De volgende stap is een event versturen naar Spotler Activate met deze variabele. Je maakt dus een custom HTML tag aan met onderstaande code, waarbij we een check ingebouwd hebben zodat je geen leeg event doorstuurt::

<script>
  if ({{Email variabele}}.length > 0) {
   window._sqzl.push({
          "event"      : "Email",
          "email"      : "{{Email variabele}}",
        });
  }
</script>

Hier is “Email variabele” de naam zoals je de bovenstaande JS functie hebt opgeslagen in GTM. De trigger voor deze tag zal meestal een klik op de verzendbutton van het formulier zijn, bijvoorbeeld:

De klassenaam voor de knop kan je terugvinden op dezelfde wijze als het ID van het invoerveld, zie “Hoe vind het ik het ID terug?” hierboven. Je kan kiezen voor een ID of een klasse.

Opt-in meesturen

In veel bestelstraten, vind je ook een checkbox om je aan te melden voor de nieuwsbrief. Deze kan je ook meesturen als "newsletter" : "yes" wanneer deze is aangevinkt. Echter wil je mogelijk niet een opt-out meesturen als deze niet is aangevinkt. Hiervoor zullen we dus een extra check in moeten bouwen.

Allereerst zullen we, net als bij het e-mailadres, een “Custom JavaScript”-variabele aan moeten maken voor de nieuwsbrief. En we willen hierbij de status van de checkbox hebben. Net als bij het e-mailadres zoek je het ID van de checkbox erbij.

In dit geval, geeft de checkbox een checked="checked", dus daar zullen we de controle op moeten doen of de checkbox is aangevinkt, oftewel true of false is. Dit wordt dan het script in je variabele, welke een true of false teruggeeft:

function() {
  return document.getElementById("ContentPlaceHolder1_chkMailing").checked;
}

Als je wilt controleren of je het juiste veld hebt gevonden en wat er uit bovenstaande check komt, kan je dit altijd in de console van diezelfde developertool testen met de status uitgevinkt en aangevinkt:

Als laatste willen we naast de velden van het eerdere e-mail event, ook de newsletter meesturen, maar alleen wanneer het vinkje AAN is. Daarvoor passen we de custom HTML aan, zodat we deze check kunnen toevoegen. Hierbij zal je de {{Newsletter checked}} moeten aanpassen naar de naam van je eerder aangemaakte variabele. Het verschil met het vorige bericht, is dat we eerst de inhoud van het event verzamelen in data en daarna de data gaan versturen met window._sqzl.push(data)