Contents
Continuing on from Part 1: Identifying visitors in Woopra using GTM & URL Variables, we’re going to now look at how to identify visitors in Woopra using GTM to extract form field variables before or after a form has been submitted.
Implementation time: 30 minutes
Prerequisites:
- Woopra installed and running
- Google Tag Manager installed
Identifying visitors using form variables:
For this implementation we’re going to use the example of a subscription form on a website. This method can be expanded to many forms and form variables as required by your website.
Update form ID’s:
For this to work, each form field must have a unique ID on your website. Below is an example of a basic subscription form field with the email field set to id=email. This will be different depending on how your website is setup. Ideally it is best to use the same ID across all of your fields which you will be extracting the variable.
Example:
1 2 3 4 |
<form> <input type="text" name="your-email" value="" size="40" id="email"> <input type=submit> </form> |
Create the Form Variable in GTM:
The piece of JavaScript executed below is what will pull the value from the form field email
- Open GTM and navigate to Variables > New Variable
- Name the variable something you can remember
- Choose Custom JavaScript as the variable type
- In the variable configuration insert the code the pull the variable from the form element
1 2 3 4 |
function() { var inputField = document.getElementById("email"); return inputField.value || ""; } |
Create the Form Variable trigger in GTM:
The most common form trigger to use is when GTM detects there has been a form submission (generic form trigger). Of course this is not always the most practical depending on how your website is setup. Also adjust your trigger if you only want the tag to only execute on certain pages.
- Open GTM and navigate to Triggers > New Trigger
- Name your trigger
- Configure your trigger and add in any form submission validation if necessary
- Choose which forms you want to fire the tag on
Create the Form Variable Tag in GTM:
- Open GTM and navigate to Tags > Create New
- Name your tag
- Choose HTML Tag as the product type
- Configure the tag with the JavaScript which will send the event to Woopra (below)
- Add trigger set from the previous step which the tag will fire on
(Note: {{FormEmail}} is the name of the variable which you created in GTM)
1 2 3 4 5 6 |
<script> woopra.identify({ email: "{{FormEmail}}" }); woopra.track(); </script> |
How can I track email and name from an Aweber form?
I can’t get it to work.
Hi Rachelle,
Can you provide me with the URL of the page with the form you are trying to send to Woopra ?
Also, you need to ensure you have ID’s set all your INPUT fields and those same ID’s are set correct like in step 1.2
Looking to have woopra capture info from activecampaign forms. Is that possible? seems like it might not be able to since activecampaign forms are short codes?
Sorry for my late reply Rob!!
It could be an issue if the form is in an iframe of sorts. Provided the form fields have an ID, then it should be possible using this tutorial.
The other alternative is for you to identify visitors using URL variables (after you send a welcome email or another email campaign).
http://staging.moometric.com/integrations/woopra/identifying-visitors-in-woopra-using-gtm/
This is for mailchimp, but the same premise will apply to activecampaign.
Hope this helps.
Hi
How do I identify the other fields in my form (name and company)
Hi Diego,
You can simply repeat the same steps, but instead of using “email” use your other form input fields. Just make sure those fields have an id, like “company”.
Best,
MooMaster
First of all, thank you for your attention!
I have a form whith 3 fields: name, email and company. I want to identify the 3 fields at the same time (name, email and company). What I did was create three variables (“FormEmail”, “FormName” and “FormCompany”) and set the tag like this:
woopra.identify({
email: “{{FormEmail}}”,
name: “{{FormName}}”,
company: “{{FormCompany}}”,
});
It turns out that it only identifies the first event on the tag (FormEmail) it repeats on the other fields. Can you help me?
Thx
I got it sorted out. I did all the steps again and this time it worked. It should be some extra space or comma
Hi,
I believe storing the customer’s email address in Woopra would not be GDPR compliant now, would it?
Thanks for the tutorial, it’s helpful to see a Woopra-GTM integration.
Hi Stephanie,
I’m sure there would be issues with GDRP compliance if you’re tracking in an affected country… but that’s up to the website owners as how they handle this form of tracking 🙂
GDRP… such a mess.
Best,
MooMaster
Fantastic!