How to override the Page Tracking value in Google Analytics

Analytics_iconI came across with an undocumented functionality on Google Classic Analytics (ga.js) snippet that allows to override the page tracking when you use “_gaq.push([‘_trackPageview’]);“.

Note: The ga.js snippet is part of Classic Analytics. If you’re using Universal Analytics (analytics.js) please check: Page Tracking – Web Tracking (analytics.js)

Tracking Code Quickstart

The Analytics snippet is a small piece of JavaScript code that you paste into your pages. It activates Google Analytics tracking by inserting ga.js into the page. To use this on your pages, copy the code snippet below, replacing UA-XXXXX-X with your web property ID. Paste this snippet into your website template page so that it appears before the closing </head> tag.

<script type="text/javascript">// <![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_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>

To override the default page value, you can pass to the _gaq.push method an additional parameter, in this case, the custom path that you want to track:

_gaq.push(['_trackPageview', customPath]);

In the next image you can see the difference between the custom tracking page views code vs the default way.

google_analytics_custom_pathNote: The _gaq global object can be used directly for asynchronous page tracking via the push(…) method.

I really hope you find this information useful.

How view page-level custom variables in Google Analytics

Analytics_iconKudos to my colleague Carlos Hinojosa who discovered that to view a page-level custom variables in Google Analytics, you need to specify explicitly the metric and dimensions in a custom report. That is the reason why the default dashboard will not show page-level custom variables, yup, we get stuck for a while in this point!!.

Anyway, to create a custom report to see a page-level custom variable all you need to do is, in Google Analytics, under the Customization tab, click +New Custom Report and fill the next fields as follow:

Under Report Content section:

  • Metric Groups: Add PageViews option, is under Users group, to get the # of visits.

pageviews

  • Dimension Drilldowns: Add the desired custom variable, in our scenario, is the #4, then, since the purpose of the report is to get the values of the variable, you need to select as a nested dimension, the value of the selected custom variable.

custom_variable_valueIs recommended to add the custom report to a specific view, but is optional. Finally, the fields of your new report should looks like:

custom_reportClick on Save, and if all was selected correctly, the report should display the data, once is captured by Google anaylicits, of course, like the following screenshot:

custom_report_view

Tip: You can use: Google Analytics Debugger to check in real time if your custom variable is working and to not wait until the values ​​are reflected in the report.

This extension loads the debug version of the Google Analytics Javascript for all sites you browse using Google Chrome.  It prints useful information to the Javascript console. These messages include error messages and warnings which can tell you when your analytics tracking code is set up incorrectly.  In addition, it provides a detailed breakdown of each tracking beacon sent to Google Analytics.

Example

Google_Analytics_DebuggerNote: In our scenario we wanted to be sure that the custom variable # 4 be sent.

I really hope you find this information useful.

How to submit a Google Form with ajax

google_driveKudos to my colleague, Ernesto Rivera, who finally discover how to  submit a Google Form (data) using Ajax, I just help partially and share with you the link to our solution.

In summary: in our scenario we don’t wanted to show the default Google Form since it doesn’t looks nice in our design but we need the Spreadsheet that Google Forms use.

Also, we detected two cases on witch Google Forms works:

  1. In old Forms (we assume before Google Drive), Google send the data to a Google Spreadsheet directly:
    • https://spreadsheets1.google.com/formResponse?formkey=id-form
  2. In new Forms Google use the Form itself and no the Spreadsheet to send the data:
    • https://docs.google.co/forms/d/id-form/formResponse

If you want to see how it’s done, read Sending data to Google docs from your web page, using your own form and AJAX! in the Base22 Knowledge Wiki.

We really hope you find this information useful.