How To Track Tweet Button Clicks In Google Analytics

Track a Tweet Button
I use Google Analytics to track activity to and from my blog. Unfortunately, there are a lot of holes in that process, especially related to Twitter clickthroughs.

  • First, some users bookmark the page, then revisit the site. These visitors are great because they found value in the site and are coming back for more. However, there is no way to tell if someone actually bookmarked the page or if something else happened.
  • Other visitors arrive here by clicking on a link from a mobile Twitter application. Several of these applications remove the “referrer” information which causes another question mark when I go to check stats.
  • If a visitor is using Internet Explorer and clicks through on a link from a site that uses a JavaScript popup, then the referrer information is lost. This sounds like a minor case but if you’re doing hardcore tracking to drill down on a marketing campaign’s ROI, this factor can be maddening.
  • Lastly, if a visitor clicks on the Tweet Button and posts a link to Twitter, the URL is “automagically” shortened via Twitter’s link service (http://t.co). If a user clicks on a tweeted out link, you’ll know that the visitor came from Twitter but you won’t know where the link originated. Did a user get there from clicking on a Tweet Button link? Did someone cut and paste the blog post’s URL from the Web browser into a tweet? Inquiring minds want to know.
The Benefits

Before I started using this Google Analytics tracking technique, 16.8% of my traffic was showing up as “Direct Traffic.” After I started tracking Tweet Button clicks and Feedburner subscription clicks, that number went down to 13.45% and a new “Other” figure emerged.

Google Analytics Traffic Source Stats

This is awesome because now I can examine the behavior of visitors who click on the Tweet Button. Do Tweet Button visitors stay longer, visit more pages, or take key actions? Now I can answer some of these questions when before it was a mystery.

Google Analytics Traffic Sources - Ranked

Because a good chunk of my blog’s traffic comes from Twitter interactions, you can see that the TweetButton clicks are in the site’s top 10 Traffic Sources. I can also see individual stats related to these visitors such as Bounce Rates, Time On Site, Goal Conversions and more.

The Hack

We’re going to address the last case with this next hack. In order for this to work, you won’t be able to use the standard Tweet Button plugin. We’ll have to add the button by hand.

  1. Go to the Google URL Builder Tool page.Google URL Builder Tool
  2. Enter your site’s URL.
  3. Enter the Campaign Source, Medium, and Campaign Name. I used “Twitter”, “TweetButton”, and “Blogpost” respectively.
  4. Click on the “Generate URL” button. This will build a link just below the button.
  5. Copy the link. We’re mostly concerned with the end of the link, starting with the “?” mark.
  6. Paste this code into your theme’s Header or Footer template files. I placed the code just before the < /head > tag in the Header.
    [php]<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>[/php]
  7. Configure your Tweet Button HTML code as in this example (for WordPress.org blogs): [php]<!–Twitter tweet button–>
    <a href="http://twitter.com/share"
    data-url="<?php the_permalink(); ?>?utm_source=twitter&utm_medium=tweetbutton&utm_campaign=blogpost"
    data-via="jesseluna"
    data-text="<?php the_title(); ?>"
    data-related="niceblog:My Blogging Lab"
    data-count="vertical">Tweet</a>

    <!–/Twitter tweet button–>[/php]

    The main “hack” comes from the data-url parameter value where we add the Google Analytics formatted tracking parameters, just after the Permalink. This way, when Twitter shortens the link into it’s t.co format, the link value will contain the tracking information.

    In the above example, “data-via” is the Twitter user name that will appear on the tweet as “via .” “Data-text” is the text I want to display with the link.  In this case I’m displaying the post’s title.  “Data-related” is an optional related account that can be displayed. In this case I’m showing my blogging Lab account, @niceblog. The “data-count” value indicates how you want the button to appear on the screen. I chose a vertical format. You can see all the options on the Twitter Tweet Button blog page.

  8. For WordPress.org blogs, paste the edited code into the Page, Single Post, and Main Index template files. I added the button just before the blog post content, after the title and date/author section of the templates. This will vary based on your preference and on other tweaks you’ve made to your theme.

I tried hacking Posterous and Tumblr blogs but the built in URL template tags kept blowing away the parameters once the Tweet Button was called. If you figure out how to do this please drop a comment and I’ll update this post.

Review

We just learned how to tack on a Google Analytics parameter to Tweet Button clicks on a WordPress.org blog. This will help you connect the dots on your online marketing and analysis activities.

If you find this useful, I’d be interested in how and why you would use it. Are you a marketing manager, a small business owner, or a code hacker? I’d love to find out.

Facebook
Twitter
LinkedIn
Email
Print