Rich-text Reply

Track Form Abandonment

AmanSahota 02-09-17
Accepted Solution

Track Form Abandonment

Hi Guys,

 

On my website, I have a form with 8 fields. 7 input fields, and one slider. I have setup custom events for each field. I have used "Experiment Javascript" to add the following:

 

var trackCustomEvent = function() {   
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", "first_name_field"]);
  window.optimizely.push(["trackEvent", "last_name_field"]);
  window.optimizely.push(["trackEvent", "email_field"]);
  window.optimizely.push(["trackEvent", "country_field"]);
  window.optimizely.push(["trackEvent", "industry_field"]);
  window.optimizely.push(["trackEvent", "company_field"]);
  window.optimizely.push(["trackEvent", "password_field"]);
  window.optimizely.push(["trackEvent", "host_slider"]);
};

 

The form is global and sits on every page of the website. However, it is triggered by a button and the form loads inside a modal. You can see the reg form within a modal here: https://ibb.co/b7z9ov

 

I can't seem to collect any data?

Do I need to add this manually into my site?

JasonDahlin 02-09-17
 

Re: Track Form Abandonment

1- Did you set up the events in Optimizely?  You need to add them as "goals".  The first one would look like this:
https://ibb.co/eUGpov

 

2- Did you assign the goals to the experiment?

 

3- When is your page calling the trackCustomEvent function?  Is it possible that it is calling the function before Optimizely has loaded the experiment JavaScript?

 

Separately... this function triggers each of the 8 events listed... wouldn't you want to fire each event separately whenever the user changes the value of each field (or as each field gains focus, depending on whether you are tracking form entry or form completion).

 

 

--Jason Dahlin
Analytics and Testing Guru Smiley Happy
Experimentation Hero
AmanSahota 02-10-17
 

Re: Track Form Abandonment

Hi Jason, thanks for your detailed reply.

 

I made a few tweaks as per your suggestions. I modified my javascript to fire each event separately:

 

var trackCustomEvent = function() {   
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", "first_name_field"]);
};

var trackCustomEvent = function() {   
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", "last_name_field"]);
};

var trackCustomEvent = function() {   
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", "email_field"]);
};

var trackCustomEvent = function() {   
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", "country_field"]);
};

var trackCustomEvent = function() {   
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", "industry_field"]);
};

var trackCustomEvent = function() {   
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", "company_field"]);
};

var trackCustomEvent = function() {   
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", "password_field"]);
};

var trackCustomEvent = function() {   
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", "host_slider"]);
};

In regards to creating the goals I have done the following for each field:

https://ibb.co/hvFkva

https://ibb.co/njkw1F

https://ibb.co/cwYS8v

 

I have assigned these with the experiment. You can see this here:

https://ibb.co/myOigF

 

I'm not sure about how to configure your comment "When is your page calling the trackCustomEvent function?  Is it possible that it is calling the function before Optimizely has loaded the experiment JavaScript?".

- I'm using the "Experiment Javascript" option. When does this get loaded?

JasonDahlin 02-10-17
 

Re: Track Form Abandonment

Hi @AmanSahota,

What you have so far is that you've created the function "trackCustomEvent" so that it records "first_name_field" when you run the function.  Then you redefined the function so that when you call it, it will track "last_name_field", then redefined it again and again and again until ultimately, the function, when you call it, will record only "host_slider".

 

Hopefully you see the problem...

1- The function never does anything except exist until you call it.  Somewhere in your code, you have to call the function so that it will track the event.  If the intent is to record that the user made it into a field, you'll want to add code to your page that calls the appropriate function when a user enters a field (perhaps "focus" would work for you).

2- You need to make your function record the correct event... two ways of doing this:

2a- rename each function to be like trackEventFirstName (which tracks "first_name_slider"), trackEventLastName (which tracks"last_name_slider"), etc., like this for the First Name field:

window.jQuery('#edit-field-user-first-name-und-0-value').on('focus',function(){
  trackEventFirstName();
})

2b- change the function to accept a parameter that is the event name, like:

 

var trackCustomEvent = function(eventName) {   
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", eventName]);
};

and you code to run this function would look like this (you would need to do this for each field in your slider):

 

 

window.jQuery('#edit-field-user-first-name-und-0-value').on('focus',function(){
  trackCustomEvent('first_name_field');
})

 

Hopefully this helps!

 

--Jason Dahlin
Analytics and Testing Guru Smiley Happy
Experimentation Hero
AmanSahota 02-10-17
 

Re: Track Form Abandonment

[ Edited ]

Thank you this is really helpful. So for each field I would have something like:

 

var trackEventFirstName = function() {   
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", "first_name_field"]);
};

window.jQuery('#edit-field-user-first-name-und-0-value').on('focus',function(){
  trackEventFirstName('first_name_field');
})
JasonDahlin 02-10-17
 

Re: Track Form Abandonment

You combined two different approaches. 

 

You'll want it like this:

var trackCustomEvent = function(eventName) {   
  window['optimizely'] = window['optimizely'] || [];
  window.optimizely.push(["trackEvent", eventName]);
};

window.jQuery('#edit-field-user-first-name-und-0-value').on('focus',function(){
  trackCustomEvent('first_name_field');
});

window.jQuery('#edit-field-user-first-edit-field-user-last-name-und-0-value').on('focus',function(){
  trackCustomEvent('last_name_field');
});

window.jQuery('#edit-mail--2').on('focus',function(){
  trackCustomEvent('email_field');
});

window.jQuery('#edit-field-user-country-und').on('focus',function(){
  trackCustomEvent('country_field');
});

repeat the "window.jQuery" portion for each of industry, company, password, and host.

--Jason Dahlin
Analytics and Testing Guru Smiley Happy
Experimentation Hero
AmanSahota 02-17-17
 

Re: Track Form Abandonment

Thank you so much, worked perfectly!