Have you ever found yourself wanting more from event tracking in Google Analytics or Facebook’s ad platform?
When setting up a goal in Google Analytics or a conversion in Facebook, the default options can be a bit…lacking. Many times, you’re forced to choose “Destination” in Analytics or custom conversions in Facebook, then you have to create a new “thank you” page for each event you’d like to track.
While dedicated thank you pages are a fine way to start, they can quickly get out-of-hand if you track many different events. And, they don’t help much with other types of events you may want to track, like site visitors interacting with specific elements of your website.
There’s a better way to track goals or conversions than the default options given to you by Google or Facebook, though.
The secret to better website event tracking
Does that make you excited? Because it should. 😉
Let’s say we want to record when a user fills out a form on our website (ex: email list sign-up), but don’t want to have to create a separate thank you page to track the conversion.
WARNING: do not implement the following code on your website without personalizing it to your site’s elements and testing it in a staging environment before deploying to your live site! You can accidentally remove a user’s ability to submit your form if you don’t know what you’re doing.
Helpful hint: using MutationObserver along with event tracking for dynamic forms
If you’re having trouble getting your event tracking script to work, check and see if your form is being loaded dynamically (If you’re using ConvertKit/Seva’s or ActiveCampaign’s one-line embed options, this is true for you).
Tip: To see if the form is available when your tracking script is running, try looking at the output of
console.log( element ), where element should contain your form. If element comes back undefined, you’re probably working with a dynamically-loading form.
If your forms are being loaded dynamically, you’ll need a way to detect if the form exists on the page before trying to attach an event listener to it. My favorite way to detect when a form has loaded is by using MutationObserver.
Ryan Morr has a supremely useful MutationObserver script that I use when creating tracking for dynamically loaded forms; you can find it on his blog.
Event tracking with Ninja Forms
And, here’s one more helpful event tracking snippet for those of y’all who use Ninja Forms on your WordPress sites:
If you’re not confident enough in your development skills to implement it yourself, talk to your favorite developer about it.
Great Post, thanks, it’s save me a lot of time really. Fully recommended!
Megan Garwood says
Thank you Juan!