How to activate 4Q Survey with a link integrated with Google Analytics Asynchronous tracking

  • 30.06.2010
  • Av Eivind Savio

4Q Survey is a free survey tool for collection feedback from your visitors that may help you to understand why the visitor is at your website, and if they were able to complete their task.

Recently 4Q Survey added integration with Google Analytics, which makes you capable of collecting the 4Q Survey data into Google Analytics using Custom Variables. This is great since you now can connect visitor behaviour (What data) with visitor purpose (Why data).

There are however 2 improvements I would like:

  1. The Google Analytics integration is using the old Google Analytics code, and not the new Google Analytics asynchronous code.
  2. Visitors can't activate the survey by clicking a link. Instead X percent of the visitors will be asked if they are willing to answer the survey.

Instead of just waiting for the 4Q Survey team to perhaps make these improvements some time in the future, I studied how thing works and came up with a solution for activating the 4Q Survey with a link and track it using Google Analytics asynchronous code.

How to activate 4Q Survey with a link integrated with Google Analytics Asynchronous tracking

The first thing you should do is to create a new Google Analytics profile (Add a profile for a new domain). Data from 4Q Survey is going to be tracked in this profile. To be able to maintain information about visitor source etc. we will have to use cross domain tracking for this profile.

Below you find an asynchronous example code for this. Replace the UA-ID with your UA-ID.

According to my experience note that both your tracking codes must use the cross domain tracking setup (showed with green text for the main Google Analytics profile).

Google Analytics asynchronous code

Remove formatting from Code

  1. <script type="text/javascript">
  2. var _gaq = _gaq || [];
  3. _gaq.push(
  4. ['_setAccount', 'UA-XXXXX-1'], //Main Google Analytics profile
  5. ['_setAllowLinker', true],
  6. ['_setAllowHash', false],
  7. ['_trackPageview'],
  8. ['pageTracker4Q._setAccount', 'UA-XXXXX-2'], //4Q Survey profile
  9. ['pageTracker4Q._setAllowLinker', true],
  10. ['pageTracker4Q._setAllowHash', false],
  11. ['pageTracker4Q._trackPageview']
  12. );
  13. </script>
  14. <script type="text/javascript">
  15. (function() {
  16. var ga = document.createElement('script');
  17. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  18. ga.setAttribute('async', 'true');
  19. document.documentElement.firstChild.appendChild(ga);
  20. })();
  21. </script>

HTML code

Your survey code from 4Q will look something like the code below. Copy the sdfc parameter from that code (An example of this parameter is in bold below).

<!-- Begin: 4q.iperceptions.com -->
<script src="http://4qinvite.4q.iperceptions.com/1.aspx?sdfc=456356-865-a78d0793-aee9-4e8b-67678-46544ae5vvb55&lID=1&loc=4Q-WEB1" type="text/javascript" defer="defer" >
</script>
<!-- End: 4q.iperceptions.com -->

The next thing to do is to copy the code below and insert it somewhere before the closing </body> tag. You have to change two things in the code (highlighted in red):

  1. Replace your-survey-parameter with your sdfc parameter.
  2. Replace XXXXX-2 with your Google Analytics UA-number.

Remove formatting from Code

  1. <script type="text/javascript"> //Script to open survey in pop-up window and do cross domain tracking
  2. function openWindow(link) {
  3. _gaq.push(function() {
  4. var Tracker4Q = _gaq._getAsyncTracker('pageTracker4Q');
  5. window.open(Tracker4Q._getLinkerUrl('http://s26975.4q-web2.4q.iperceptions.com/4Qwelcome.aspx?sdfc=your-survey-parameter&lID=1&loc=4Q-WEB2&vm=cln&res=850x698&ua=XXXXX-2'), 'popupwindow','width=820, height=600,resizable=yes,scrollbars=no, menubar=no,status=no');
  6. });
  7. _gaq.push(['pageTracker4Q._trackPageview','/4QSurveyOpen']);
  8. _gaq.push(['pageTracker4Q._trackEvent','4Q Survey','4Q Survey Opened']);
  9. return false;
  10. }
  11. </script>
  12.  
  13. <div id="fixeddiv" style="position: fixed;top:50%;right:0;margin-top: -120px;">
  14. <a href="#" onclick="return openWindow(this);" target="_blank" title="Give Feedback with 4Q Survey">
    <img src="/feedback/feedback-button-4q.png" alt="Give Feedback"/>
    </a>
  15. </div>
  16. <script type="text/javascript" src="/feedback/fixedmenu.js"></script>

Give Feedback The button to activate the survey is placed in the middle of your screen on the right side. CSS & the Fixed & Sticky Menu is used for this.

  1. Create a folder named feedback in the root of your website.
  2. Download and unzip the file into that folder (the zip file contains the button and the Fixed & Sticky Menu).

Done! Do a happy dance! as the web analytics guru Avinash Kaushik would say. You are now collecting Why data from from visitors that click on the 4Q Survey button.

If you are familiar with the asynchronous code you will notice that we are creating a "fake" page view named 4QSurveyOpen and an Event when somebody click the button. The reason for this is segmentation.

If you aren't familiar with the 4Q Survey, take some time to watch Avinash Kaushik explains the solution.

Possible problems and errors

For the moment Google Analytics asynchronous code doesn't work with the normal survey activation.

The solution is using cross domain tracking. The Google Analytics cookies from your domain have to be transferred to the 4Q Survey domain. If you are running Google Website Optimizer on your site this may cause you some problems with the tracking.

Some final words

If you look around on my site you have probably noticed that everything else is written in Norwegian. Since this blog normally is in Norwegian, and I haven't had time to implement a multilingual blog system, you find some explanations of how to comment below:

Click "Legg til kommentar" below. Than fill out your name (Navn), e-mail (Epost) and your website (Ditt nettsted) if you have a website. HTML formatting doesn't work in my comment field, use BBCode formatting instead. You can drag the comment field around if you want to. If you want to preview what you have written, click on "Forhåndsvis". When you are done and want to save your comment, click on "Lagre". If you haven't had any comments approved on this blog before, I will have to approve your comment manually.

Du kan følge kommentarer til denne posten med RSS. Du må ha javascript aktivert for å kunne kommentere. Tilbaketråkk er deaktivert.

Tags : , ,

  • 40-02
  • 31.07.2010 21:18:33
it's an amazing thing!

Keep going!

I've been on your site when i have seek an url shortner with ga tags. And now with this thing.

Excellent!!!

Please, dont stop!
Thank you for your kind feedback.
I have perhaps something more cooking. Smil

Eivind

XKlikk her for å flytte kommentarfeltet

Feedback Form for Google Analytics by Savio.no