In this article we'll go over how to identify a user with their name and email inside of Funnelytics. 

Identifying your users allows you 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.

https://www.analyticsmania.com/post/google-tag-manager-form-tracking/

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.

The Custom HTML that we'll be using comes from a Funnelytics action.
Go to Funnelytics and copy the script from the action settings > tracking > advanced > script.

Make sure that the action has: 

  • An event name

It's a good idea to also add a property that further defines which form this is.

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

By default the script comes with a window.onload = function() { argument that we need to remove when using GTM. 

In this case we're going to remove line 2 and line 8 from the html in our tag.

Before:

After:

Now that we have our action script in our custom HTML tag, we're going to add two attributes to the code.

Here's what it will look like when we're done: 

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

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,
}, function() {
    // continue with process..
});
</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

Here's what the final action looks like in Funnelytics: 

Notice that we're not adding more properties to the Funnelytics action. Just the one that identifies more which complete-form event this is.

Adding more properties into the action itself will act as a filter. Basically, you're saying, "Show me all the events with event name 'complete-form' AND that contain properties 'form: homepage'"


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!

Did this answer your question?