Integrating Google Analytics into Alchemer

Ever want to know a little bit more about how people are interacting with your surveys?

Us too.

That’s why we offer an integration between Alchemer and Google Analytics

Why would we want to do this?

Well, Google Analytics is a very powerful (and free) web analytics suite. It allows you to track survey conversions, path analysis, sources of surveys traffic and even various versions of your forms and surveys. It’s the best of all worlds.

So let’s get the ball rolling:

Introduction to Google Integration Code

When you create a Google Analytics account you are given code snippets and instructed to place them at the bottom of each page on your website. For use in surveys, you will need to add them to the HTML Template of your Survey’s Theme.

The code should looks like this: (highlight to copy all of the code, WordPress isn’t playing nice in displaying it)

<script type="text/javascript">//
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'YOUR GA CODE']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
    ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘https://www’) + ‘.google-analytics.com/ga.js’;
    var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
} );
</script>

You should place this bit of code at the top of your survey’s HTML template (the very top). First we are going to modify this bit just a little. Why? Because we want to track individual survey pages, and make them a bit easier to understand in Google Analytics.

So, here is what we are going to do.

We are going to pass an argument (a bit of data) to the urchinTracker function that will identify individual pages of the survey. We are also going to create a “fake” folder for our survey.

You will need to change two lines of the above code, one to add your GA Code, and another to reference a page in the survey. When finished with the changes, your whole code will look like this:

<script type="text/javascript">
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'YOUR GA CODE']);
   _gaq.push(['_setDomainName', 'yourwebsitedomain.com']);
   _gaq.push(['_trackPageview', '/surveys/surveyname/page[template("currentpagenumber")].html']);
  
   (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
} );
 </script>

*Note – This has code has been updated to work with Alchemer 3.0 surveys which use a new merge code system. If you are using a Alchemer 2.0 survey, you’ll want to insert [%%:Survey_Page%%] instead of [template(“currentpagenumber”)] in order to track page numbers.

You should replace “surveyname” for every survey you integrate. Make it distinct and understandable. The merge code [template(“currentpagenumber”)] will merge in the current page number.

Tip: If you want to get fancier you can merge in the value of a hidden question on the page, or even question data from previous pages this way.

When you launch your survey, it will store the navigation and traffic information to your Google Analytics account!

From here you can treat your “surveys” folder like it was just another part of your website. You can run your favorite reports, build charts graphs, etc. Enjoy! Next week we will look into test variations of your surveys and landing pages and doing analysis in Google Analytics.

 

**This has been updated with the new Google Analytics code.