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.

Here's an example of what this looks like under the "People" tab: 

 

This is an advanced tutorial and most likely will require the help of a developer. 

In this example, I'm going to be using Google Tag Manager (GTM).

GTM consists of triggers and tags. This article will not be covering how to create your form submit trigger (which IS required for this to work).

Please refer to this article from Analytics Mania on how to create the form submission trigger using GTM.

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 "hompage" but you can edit this value to be anything you'd like to define the form.

Notice that the value of the name and email properties are not defined yet. 

We're going to replace //name and //email with the dynamic value from the actual 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

There are a few other methods of scraping the DOM, find those on this page.
Look for the links to "getElement....." and "querySelect..."

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>

Make sure to include the commas at the end.

Make sure that your tag has the form submit trigger attached to it, publish your GTM container, and/or enable preview mode.

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.

 

 

 

If you have any questions remember to reach out to our support team anytime by clicking the support icon in the bottom-right corner of your dashboard, we are always ready to assist you!