How to improve your website’s event tracking with JavaScript

NOTE: This post requires a working knowledge of basic JavaScript and jQuery. If you’re not confident in your JavaScript skills, check with your favorite web developer before moving on. 😉 

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.

So tedious!

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

So, what’s the secret? Using JavaScript to record events!

In both Facebook and Google Analytics, you can use JavaScript to record customized events when a user performs a certain action on your website.

You can track ANY kind of interaction that JavaScript can detect, which is pretty much anything a user can do on a website. You aren’t limited by the pre-set options defined by Google or Facebook.

Does that make you excited? Because it should. 😉

An example of better event tracking using JavaScript

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.

We can use a little JavaScript to detect when the user submits the form and immediately send the event to Analytics or Facebook – no thank you page required!

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:

 

So, if you find yourself disappointed with the default options for goals and conversions in Google Analytics and Facebook’s ad platform, give JavaScript-driven event tracking a try!

If you’re not confident enough in your development skills to implement it yourself, talk to your favorite developer about it.