As Easy As 1, 2, 3: Custom Variables – Part II: Page Level

Jarret Streiner - February 23, 2012

In Part I of this series we spoke about session level variables. There are two additional types of Custom Variables available for you to use Visitor Level and Page Level. In this post we are going to look at Page Level variables.

A Page Level variable is the activity of the user; which can be a pageview or an event, such as a pdf download or a video view.

One way of using page level variables is to track which areas or categories of your site that visitors are going to. We will use the example of a clothing company that has divided up their products into three areas: Long-Sleeve Shirts, T-Shirts and Dress Shirts.

The clothing company is thinking of having a sale, but they want to determine which areas or categories of their site, not just which pages, are driving the most traffic. If you look at the example, under clothing, there are three types of shirts listed; these three areas will be the “sections” of the site that will use the page level custom variable.

When labeling variable parameters, the naming convention is your choice. I chose “sections” for the name variable in these examples.You could use any naming convention, but a good rule of thumb is to keep them short and concise.

Your script will use the basic method for creating a custom variable as follows:
_setCustomVar(index, name, value, opt_scope)

The index, name and value parameters are required while the opt_scope parameter is optional, but it defines the level of user engagement with your site. It is a number whose possible values are 1 (visitor-level), 2 (session-level), or 3 (page-level). If left undefined, the custom variable scope defaults to page-level interaction.

Using the code example below, the clothing company would use the session parameter to set which areas or categories of their site they would like to track. They would then place the coding on each page that displays Long-Sleeve Shirts, T-Shirts or Dress Shirts.
Example of the Custom Variable coding structure:
_gaq.push([‘_setCustomVar’,
1, // This custom var is set to slot #1. Required parameter.
‘Section’, // The top-level name for your online content categories. Required parameter.
‘T-Shirts’, // Sets the value of “Section” to “T-Shirts” for this particular aricle. Required parameter.
3 // Sets the scope to page-level. Optional parameter.
]);

When you install the code it should look like this:

<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-XXXXXX-1’]);
_gaq.push([‘_setCustomVar’,1,’Section’,’T-Shirts’, 3]);
_gaq.push([‘_trackPageview’]);
(function() { var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s); })();
</script>

After the code is implemented you will be able to find the custom variable reports under Audience>>Demographics>>Custom Variables.

For any single page, you can set up to 5 simultaneous custom variables, in which you can collect more useful data.

<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-XXXXXX-1’]);
_gaq.push([‘_setCustomVar’,1,’Section’,’T-Shirts’, 3]);
_gaq.push([‘_setCustomVar’,2,’Gender’,’Mens’, 3]);
_gaq.push([‘_setCustomVar’,3,’Size’,’Large’, 3]);
_gaq.push([‘_trackPageview’]);
(function() { var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s); })();
</script>

If you look at the code example above, the Custom Variables that will be pulled are:
Section – T-Shirts
Gender – Men
Size – Large

In our last post in this series, coming soon, we will be discussing Visitor-Level Custom Variables.