How To Track Responsive Websites

May 7, 2014

My illustrious colleague Charles Farina wrote a great post about the importance of mobile design recently when he asked the question, are you analyzing your mobile traffic correctly? I wanted to follow along and give some pointers on how you can get this done and provide you with some useful resources.

Many companies are turning to responsive website designs to provide users with an optimized experience without duplicating their efforts in maintaining and promoting their websites. A website is said to be responsive when it, quite literaly, has the ability to respond to the users screen size and change the layout to provide a better experience.

Compare these two screenshots of our recent promotional site we created for tracking bocce ball games at OptiCon





Understanding which experience your visitors are having and how each design influences outcomes on the site will help you to understand and optimize those experiences. Here is a script you can use to inform your Google Analytics of what views are being loaded and when the designs change.

If you are using Google Tag Manager already, just add add this script as a custom html tag to load on All Pages. Now, make your Google Analytics pageview tag run on the ‘tracking-ready’ event. Be sure to add the information about your viewports as custom dimensions or variables and to set up an event to (if you need help with that see this article on Google Tag Manager workflows).