How to Identify Users in Funnelytics

How to pass the name and email from a form field into Funnelytics using Google Tag Manager to identify the user.

Identifying your users allows you to see the paths that a specific user took through your funnel. Can be useful for debugging purposes.

This article will assume that you have already created your form submit trigger.

Creating the Tag

The tag is the bit of code that we want to fire when our trigger is... well... triggered.

In GTM create a new Custom HTML tag.

Copy the script and paste it into the Custom HTML field in GTM.

<script type="text/javascript">
window.funnelytics.events.trigger("complete-form", {
    form: "homepage",
    name: //name,
    email: //email,
});
</script>

In the above example, we can see that we have identified the form as one that appears on our "homepage" but you can edit this value to be anything you'd like to define the form.

Scraping the Document Object Model (DOM) for dynamic values

First, we need to get the name or Id of the field we want to scrape. 

We can get the name or Id of the field by inspecting the element using chrome's developer tools. Right-click in the field you want to scrape and choose "inspect".

This brings up the elements panel and shows us what the name and Id is for that element. In our case, the element Id that we're going to use is 'email'.

Now let's go to the console tab to test if we can dynamically grab the value from that field. 

Type something directly into that field without submitting anything. We're going to try and get the value dynamically.

In the console type in this command and press enter:

document.getElementById('email').value

You may need to replace the word in single quotes "email" with your own element ID.

Or, if you're using the elements name, use this instead:

document.getElementByName('ms-email').value

Doing this should grab the value of the field dynamically.

Repeat this process replacing the ID with the name field ID to grab the name dynamically from the form as well.

Now that we've verified that it works, let's add that command into our tag.

<script type="text/javascript">
window.funnelytics.events.trigger("complete-form", {
    form: "homepage",
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
});
</script>

Verify that the data was passed correctly

To verify if the data was sent successfully and correctly to Funnelytics, open the network tab before submitting the form.

You can clear everything there in preparation for us to submit the form. Add some values to the form fields.

Now, Submit your form and look for a new network request called "trigger".

Click on the trigger request that has a status of 200. Under the "headers" tab scroll down and you should see which attributes were sent to Funnelytics. 

The attributes should include the dynamic values of the form fields if we set it up correctly. 

Now the name will appear under the people tab inside of Funnelytics.

Something missing?

if something is missing in the documentation or if you found some part confusing, please reach out to support team, with your suggestions for improvement.

We love hearing from you!