How to track modals, lightboxes and pop ups with GTM

Google analytics is one of my favourites, and like me, by default, we do not like pop-ups, modals or lightboxes of any kind, it's not a great user experience, but that's just my personal opinion. For those of you who love pop-ups and such, I bet you're pretty annoyed at the fact that you cannot track their performance in GA right? Wouldn't you like to know?

1. How many people saw your pop up and of those?
2. How many took action?
3. How many simply ignored it?
4. And finally how many users you're chasing away with your pop-ups?

Unfortunately, GA is a page view based tool, but that doesn't mean we cannot track elements that don't abide by these rules. Using GA's ever trusted event tracking and a little bit of smart work with GTM we can monitor pop-up performance as if it were a standard tracking metric in GA.

How to set up modal tracking

Setting up the trigger

1. Open up Google Tag Manager
2. Create a trigger
3. Select Element Visibility Trigger
4. Give the Trigger a name - IE Homepage modal Trigger
5. Select either ID or CSS selector
6. Provide the element ID for the modal
7. Select once per element - Since you want to know how many times the modal was active to the user
8. Set minimum percentage visible to 50%
9. Optional: Set minimum on screen duration. If you only want the trigger to fire when the user sees your modal for more than say 2 seconds
10. Select observe DOM changes
11. Select all visibility elements unless you want to fire it to a specific part of your site

Setting up the tag

1. Create a tag
2. Give the tag a name - IE Homepage modal tag
3. Select google universal analytics tag type
4. Select event as your track type
5. Add a category (modal), action and label - This can be static or dynamic variables
6. Set non-interation to false
7. Add your tracking ID
8. Set the trigger you created earlier

Once Also, publish and submit your new tag to push it live

How to view your modal tracking

Head over to Google Analytics, Real Time, Overview to test if the tracking is working as users interact with your modals. If you would like to see all the visits and historical data related to your new modal event then go to Behavior – Events – Overview and click on the modals category.

Advanced configurations

Once you've created your triggers and your events are firing correctly you can take it one step further and create custom conversion tags for both your AdWords and your Facebook tracking. This helps if you're running specific campaigns and want the modal or pop-ups user action to be a performance metric for the campaigns. In addition, if you want to measure and analyse how users behave after they have been served a pop-up and additionally if they have retrieved a discount code, you could do that too using this method.

Pop up or down?

So if you're still convinced pop-ups are of value to your site, then employ this method above, and I wish you happy tracking!

Contact us

If you want to know more about tracking options for your site, don’t be shy we’re happy to assist. Simply contact us

Tags: google analytics, google tag manager