Scraping data from forms to Squeezely

With some CMS's it can be difficult to get the data into the datalayer or send it via Javascript, an alternative solution can be to scrape the data from the HTML elements via Google Tag Manager. Below are some scripts that help with this, although you'll need to make a few changes.

The first step is to create a 'Custom Javascript' variable at 'Variables' with this as 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 "";
  }
}

In line 2, change the sMailAddress value to the ID that is in your form. We also validate if the given value is in a valid email format.

Right click on the input field you want to measure, e-mail in this example, and click 'Inspect'. Next, a screen opens which shows you the HTML element including the ID.

You will see id=sMailAddress for this example

The next step is to send an event to Squeezely with this variable. So you create a custom HTML tag with the code below, where we have built in a check so you do not send an empty event:

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

Here "Email variable" is the name as you saved the above JS function in GTM. The trigger for this tag will usually be a click on the submit button of the form, for example:

The class name for the button can be found in the same way as the ID of the input field, see "How do I find the ID?" above. You can choose between an ID or a class.

Sending optin

In many order funnels, there’s a checkbox for a newsletter optin. You can send this in events as "newsletter" : "yes" when it is checked. However you might not want an immediate optout when the box isn’t checked. We will explain how you can built in an extra check and send an optin with the email event described above.

First, just as with the email addres, we will create a “Custom JavaScript” variable for the newsletter. Here we will want to get the status of the checbox. So just as with email address, you need the ID of the checkbox.

In the example above, the checkbox gives back checked="checked", so we can use this to create our own check. Within the variable you can add the script below, which will give back if checked is true or false:

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

If you want to check for yourself if you’ve captured the right field, you can always enter the script in the console of the developer tool. If you have done it right, you will see what the result of your script is, when the box is not check, or when it is. So false in the first instance and true in the second:

Finally you want to send out the fields as before, event Email with the email address, and add the newsletter = yes, but only when the box is checked. If it is not checked, we will just send the email address, without an optin status. We’ll need to adjust the custom HTML a bit, so we can add this final check. In the example below, you will need to change the variable {{Newsletter checked}} to the variable you made to check the checkbox status. The difference in this example code is that we collect all the contents of the event first in data before we send it out with window._sqzl.push(data)