Image may be NSFW.
Clik here to view.
I have just released my Free Feedback Form for Google Analytics. Although I have built in lot of flexibility in the Feedback Form, it can be a little bit hassle to change settings or questions, and you can't ask different questions to different audiences if you want that.
In this blog post I'll explain how you can use BTBuckets as an Administration tool for the Feedback Form, which will give you much more flexibility and make it easier to change settings.
What is BTBuckets?
BTBuckets is a free personalization and on-site behavioral targeting tool for websites.
By using BTBuckets as an Administration tool for my Feedback Form you:
- Don't have to implement all the code in your website.
- Don't have to upload new code to your website if you change ex. your question, color etc. You control everything from within BTBuckets.
- Can ask different questions to different audiences.
- Only ask your returning visitors, or ask new and returning visitors different questions.
- Can turn the Feedback Form on and off without changing anything in your code.
- Only show the Feedback Form on selected pages.
- etc. It's up to you to release the power of BTBuckets.
Using BTBuckets as an Administration Tool for the Feedback Form
I will be using my own Feedback Form solution in BTBuckets as an example.
I am showing different questions depending of the visitors location. Visitors from Norway will be shown a Norwegian Feedback Form, while all others will be shown a English Feedback Form.
1. Add the Feedback Form code to your website
The 1st thing to do is to copy the code below, and paste it just before your closing </body> tag.
- <!-- Start Feedback Form for Google Analytics by Savio.no -->
- <script type="text/javascript">document.write('<div id="fixeddiv">')</script>
- <div id="feedbackHolder" class="feedbackshown"><a href="http://www.savio.no/blogg/a/97/free-feedback-form-for-google-analytics" title="Free Feedback Form for Google Analytics by Savio.no">Feedback Form for Google Analytics by Savio.no</a></div>
- <script type="text/javascript" src="http://www.savio.no/feedback/ga-feedback-v1.js"></script>
- <!-- End Feedback Form for Google Analytics by Savio.no -->
2. Register an BTBuckets account and Create your Bucket(s)
Head over to BTBuckets and sign up for their services (it's free). You will find many predefined "buckets" there, but using my example I have first created a bucket that includes "All Visitors".
- Visitors that have seen 1 page will be bucketed as "All Visitors".
If you target that bucket, all visitors will see the same Feedback Form. I show my English Feedback Form to that target.
Bucketing Norwegian Visitors
Since I'm from Norway and most of my website is in Norwegian, my Norwegian visitors will get a Feedback Form in Norwegian.
The settings for that bucket is shown below (click on the image for a larger size).
Notice that I overwrite the "All Visitors" bucket. If I didn't do that both the English and Norwegian Feedback Form could be shown to my Norwegian visitors.
Image may be NSFW.
Clik here to view.
Next I have to set up a profile/behavior for my Norwegian visitors. The image below shows these setting.
Image may be NSFW.
Clik here to view.
3. Create your BTBuckets Targets
The next thing you must do is to create your target. Visitors belonging to the "All Visitors" bucket will be targeted with the English Feedback Form. Visitors from Norway will be targeted with the Norwegian Feedback Form.
The example below show my Norwegian target. The code in the screenshot below is the "Feedback Form Settings Code". You find an example code below the image.
If I want to disable the Norwegian Feedback Form, I just have to log into BTBuckets and uncheck the "Norwegian Visitors" bucket and click save. Voila, my Norwegian visitors will no longer see a Feedback Form, and I didn't have to change any code on my own website.
Image may be NSFW.
Clik here to view.
Below is some example code that you can copy and past into your BTBuckets target form. It will create a Feedback Form with Horizontal Radio Button Layout and Comment Field.
- <!-- Feedback Form settings -->
- <script type="text/javascript">
- // Text you can change
- var feedbackHeading = "How useful was this page?"; // Feedback Heading
- var feedbackCommentHeading = "Comment"; // Heading above your Comment field
- var feedbackButtonText = "Submit"; // Text on Submit Button
- var feedbackButtonTitle = "Give Feedback"; // Title Text on Submit Button
- var feedbackHideText = "Hide Feedback"; // Title Text Hide Feedback
- var feedbackShowText = "Show Feedback"; // Title Text Show Feedback
- var feedbackCommentThx = "Thank You for Your Feedback."; // Thank you text after feedback is sent
- var feedbackCommentGiven = "You have given Feedback."; // Text shown to those who have been given feedback on ex. reload of page
- var feedbackRadioButtonError = "You must select a radio button"; // Error Text when Radio Button is not selected
- var feedbackTypeText = "Bad,Good"; // Text supporting the radio buttons. Separate with comma (,). If you are using vertical aligned radio buttons, number of options must match "feedbackOptionsNumber".
- // Settings you can change
- var feedbackOptionsNumber = "5"; // Number of feedback options (radio buttons).
- var feedbackRadioType = "horizontal"; // Should Radio Buttons be aligned "horizontal" or "vertical". (horizontal/vertical)
- var feedbackPlacement = "right"; // Should the Feedback Form be placed "left" or "right" at the bottom of the screen
- var feedbackCommentValidation = "optional"; // Is Comment "optional" or "mandatory"? (optional/mandatory)
- var feedbackCommentVisibility = "show"; // Should Comment Field be shown or hided? (show/hide). If "hide", feedbackCommentValidation must be set to "optional" and feedbackRadioType to "vertical".
- var feedbackTextColor = "black"; // Text Color
- var feedbackBgColor = "white"; // Background Color
- var feedbackBorderColor = "grey"; // Border Color
- var feedbackButtonColor = "#333"; // Background Color on Submit Button
- var feedbackButtonTextColor = "#fff"; // Text Color on Submit Button
- var feedbackCharRestrictions = "200"; // Charachter Restrictions
- var feedbackLevel = "page"; // Choose between "page" level or "site" level Feedback (page/site).
- var feedbackTimeRestriction = "30"; // Number of days cookies should live
- var feedbackWidth = "170"; // Width of Feedback Form in pixels
- var feedbackGoalURL = "no"; // If set to "yes" a Fake URL will be generated when the form is successfully submitted so it can be tracked as a goal. URL: /feedback-form/feedback-submitted
- var feedbackErrorTracking = "no"; // If set to "yes" Errors like "Not selected Radio Button" etc. and Open and Closing of the Feedback Form will be tracked.
- </script>
- <!-- End Feedback Form settings -->
4. Install the BTBuckets Script and track your data in Google Analytics as Custom Variables
You don't have to track your BTBuckets data in Google Analytics, but I really recommend you to do so. We are going to do so using Google Analytics Custom Variables (this method is also described on the BTBuckets community page).
- <!-- Start BTBuckets Code -->
- <script type="text/javascript">
- //<![CDATA[[
- $BTB={s:XXXXX};
- $BTB.jsh="btbuckets.com/bt.js";
- //]]>
- </script>
- <script type="text/javascript">
- $BTB.jshost = (document.location.protocol == "https:")?"https://ssl.":"http://static.";
- document.write(unescape("%3Cscript src='" + $BTB.jshost + $BTB.jsh + "' type='text/javascript'%3E%3C/script%3E"));
- </script>
- <script type="text/javascript">
- var btbucketsGA = $BTB.getAllUserBuckets().join("-");
- </script>
- <!-- End BTBuckets Code -->
- <!-- Start Google Analytics Code -->
- <script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(
- ['_setAccount', 'UA-XXXXX-X'],
- ['_setCustomVar',1,'BTBuckets',btbucketsGA,1], // BTBuckets data stored as Custom Variables in Slot 1 with Scope set to Visitor Level
- ['_trackPageview']
- );
- </script>
- <script type="text/javascript">
- (function() {
- var ga = document.createElement('script');
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- ga.setAttribute('async', 'true');
- document.documentElement.firstChild.appendChild(ga);
- })();
- </script>
- <!-- End Google Analytics Code -->
This is it. You have now a even more flexible solution for the Feedback Form, with even greater data collected in Google Analytics.
Some closing comments about Behavioral Targeting
Used wisely Behavioral Targeting can really enhance the user experience, but used wrongly your visitors may leave your website screaming. Nobody likes to feel that someone is watching them, and used wrongly Behavioral Targeting can give that impression.
Also notice that if you use BTBuckets you will have to inform your users about it, and how they can opt out. I have this information on my privacy page.
Related articles:
Some final words about this site and how to comment
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) (Mandatory), e-mail (Epost) (Mandatory) 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.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.