Tag: google analytics

Jan 24
example-form

Let’s say I have the Formstack Form below and really want to capture the data of “Amount of Expense” and the User ID that is auto assigned to each submission, in Google Analytics. How would you go about that?

formstack

Set Up On Formstack

  • Within Formstack, navigate to the form > Settings > Emails & Redirects > Confirmation Emails > “Click to Add One” > Content: Custom Message. (You won’t be composing a message, just getting a few variables out of Formstack.)
  • Within the body, select the Unique ID & whatever field have the monetary (value) amount you’d like to capture. Remember that you cannot put personally identifiable data in Google Analytics, so don’t try to capture email, last name, etc. in Google Analytics.
  • Take note of the user ID tag and the tag associated with the expense amount.
  • Press cancel without saving, once you’ve copied that information.

formstack-email-ids

  • Once that screen is closed, navigate to “After the Form is Submitted” within the same page.
  • Select “Redirect to an External URL”, and insert your thank you page URL.
  • Immediately after, add a question mark (?) for a query. Within that query add the user ID tag.
  • Following that tag, add a hash symbol (#) followed by the tag for the expense, as you see below: www.example.com/thankyou.php?{$_submission_id}#{$37021767}.
  • This results in your thank you page having the data passed in the URL so that Google Analytics can parse it.submit-action-form

Set Up Google Analytics

  • Ensure that you have Google Analytics installed on the page the form is embedded and the form’s thank you page.
  • Next, add this script to your thank you page. It will pull the parsed information into Google Analytics as an event submission.

Results

Now the data will go into Google Analytics on each submission.

You’ll also be able to compare the Event Label within Formstack, under Submissions to match it up to the Personal Identification Information:
formstack-submissions

More Information

This tactic can also be use by taking advantage of Google’s Custom Dimensions and Metrics with Google Tag Manager.

Sep 5
enhance-google-analytics
(Originally posted on the Betamore blog)

#1 Enable Demographics + Interest Reports

Why?

Adding one little line to your tracking code will allow for rich data about your site visitor’s age, gender & interests. Once you have that data you can create segments to see how your female visitors behaviors differ from your male visitors or what movie lovers are looking for on your site.

How?

  1. Go to Admin > Property Settings
  2. Enable Demographics and Interest Reports
  3. Go to Tracking Info > Data Collection
  4. Enable Advertising Reporting Features
  5. Update your tracking code:

GA_blog1

Example Result:

GA_blog2

 

#2 Set Up Google Webmaster Tools

Why?

When you want to see what keywords are driving to your site and all you see is (not provided), Google Webmaster Tools can solve that. What Webmaster Tools does is aggregate your search queries to eliminate “(not provided)” and allow you to reclaim your keyword data.

How?

  1. Go to Admin > Property Settings
  2. Select Adjust Webmaster Tools
  3. Under Webmaster Tools Site, select Edit
  4. Add Your Website Property
  5. Verify Your Website Property

GA_blog3

Example Result:

GA_blog4

 

#3 Bot Filtering

Why?

Having spam traffic in your analytics throws off all your data. There’s advanced settings that will allow for more bot filtering, but this simple step will help you begin to eliminate some of that.

How?

  1. Go to Admin > Property Settings
  2. Enable Bot Filtering

GA_blog5

#4 Set Up Filters

Why?

This can be as simple or as complex as you’d like to make it, but filtering allows you to get only the real data you want. You can exclude IP addresses, remove spam, change all your URLs to lowercase, and much more. Get started with “Three Google Analytics Filters You Should Be Using Today

How?

  1. Admin > Filters

GA_blog6

Example Results:

GA_blog7

Jun 17
slider

We just did a new website redesign with a combination of accordions and carousels. These two design components are flashy but I’m not always certain if they’re necessary (or if anyone actually cares) so I wanted to be able to track the clicks on both the carousel & the accordions.

It took some searching and I was able to figure out how to use jQuery and Google Analytics event tracking to do this thanks to a blog from Outlier.com.

Tracking Accordion Clicks as Google Analytics Events

So my accordion is designed with h4 as the accordionheader, as follows:

<div class="accordionheader">
<h4><a id="name" href="#name">Header Test</h4>
</div>

In order to track the click, I used:

<script>
$('h4').click(function() {

var linkText = $(this).text();
ga('send', 'event', 'accordion', 'click', linkText);
});
</script>

What this does it triggers Google Analytics to send an event when the h4 is clicked. The event is labeled as category = accordion, action = click and linkText refers to the text of the h4. If you wanted to make sure you tracked only opens, you could get fancy and mess around with accordion jQuery but I like to keep things simple.

Tracking Carousel Clicks as Google Analytics Events

So this seemed like it should have been easier because essentially, you’re just tracking clicks, but because a link could exist in the carousel and the page, I wanted to make sure I knew where that click was attributed to. I also wanted to track every time the carousel slide in order to accurately calculate ratios of impressions vs. clicks.

I used cbp-fwslider for my carousel. First my slide is encompassed within a unordered list with each slide as a list item, so each slide looks like this:

<li id="slide1">

<a href="link.html" target="_blank"><img alt="img01" src="images/6.png"></a>

<div class="carousel-caption-right wordwrap">
<h3>Heading</h3>
<small>Dummy text.</small>

<p><a class="web-seemore" href="link.html" target="_blank">Link Text</a></p>
</div>

<p id="captionone"><a href="Link" target="_blank">Link Text</a></p>

</li>

So then in order to track, I used the below code:

<script>

$('#cbp-fwslider').on('click', function() {
ga('send', 'event', 'slider', 'slide', {'nonInteraction': 1});
});
$('#slide1').on('click', function() {
var slideID = document.getElementById('slide1');
var slideLink = slideID.getElementsByTagName('a')[0];
var slideURL = slideLink.href;
ga('send', 'event', 'slider', 'slide1', slideURL);
});
$('#slide2').on('click', function() {
var slideID = document.getElementById('slide2');
var slideLink = slideID.getElementsByTagName('a')[0];
var slideURL = slideLink.href;
ga('send', 'event', 'slider', 'slide2', slideURL);
});
$('#slide3').on('click', function() {
var slideID = document.getElementById('slide3');
var slideLink = slideID.getElementsByTagName('a')[0];
var slideURL = slideLink.href;
ga('send', 'event', 'slider', 'slide3', slideURL);
});

</script>

What’s important to note is that the slide simulates a click on #cbp-fwslider so an event is sent on the simulated slide click. the note on NonInteraction set to 1 is to denote that this event should not affect bounce rate.

Following that, each slide’s ID is handled by their list-item ID and upon click of that list item three variables are set:

  • var SlideID = looks for slide1 on the page
  • var slideLink = looks for anchor (a) in the above mentioned slide1
  • var slideURL = identifies the URL within the above-mentioned anchor in slide1

Once these are defined, Google Analytics sends an event category = slider, action = click, label = the URL of the link as defined by the SlideURL variable.

This should be repeated based on how many carousel images you have. Just make sure you update the areas in yellow.

(Photo Source)

Stay Updated