How to Track Pinterest's Pinmarklets with Google Analytics

Pinterest is a great platform for your users to spread the word about your website.  In a short period of time, they've managed to become one of the top 50 most trafficked websites.  Just through their Pinmarklet up, build a url with an image and a link, and you're good to go.  However, it's also a black hole when it comes to tracking through any analytics platform.  You don't know how many times your users have shared to Pinterest, and you don't know how much data is coming back from these shares.  For this article, we're going to focus on Google Analytics, but the same strategy could very well be used for any analytics platform around.

Tracking outgoing Pins

The first step is to be able to track outgoing pins.  With the current Pin It button, slapping an onclick method on it won't get called.  However, we can design the same looking link that even has the count bubble next to it.  All you need for this script is to replace your_url with the page's current URL and your_bookmarklet_url with the href on your current button.

<a class="pinterest-button" target="_blank" onclick="_gaq.push(['_trackEvent', 'Pinmarklet', 'Pinned']);window.open(this.href,'_blank','status=no,resizable=yes,scrollbars=yes,personalbar=no,directories=no,location=no,toolbar=no,menubar=no,width=632,height=270,left=0,top=0');return false;" href="your_bookmarklet_url">Pin It<span class="pinterest-count"><i></i><span></span></span></a>

<script>
function setPinterestCount(response) {
    if (response["count"] != '0') {
        $('.pinterest-count').show();
        $('.pinterest-count > span').text(response["count"]);
    }
}
</script>
<script type="text/javascript" src="//partners-api.pinterest.com/v1/urls/count.json?url=your_url&ref=your_url&callback=setPinterestCount"></script>

<style type="text/css">

.pinterest-button {

    position: absolute;

    background: url('http://assets.pinterest.com/images/pinit6.png');

    color: #CD1F1F;

    top:-11px;

    height: 20px;

    width: 43px;

    background-position: 0 -7px;

}

.pinterest-count {

    display:none;

    padding: 0 3px 0 10px;

    background-size: 45px 20px;

    background-position: 2px 0;

    position: absolute;

    top: 0;

    left: 41px;

    height: 20px;

    font: 10px Arial, Helvetica, sans-serif;

    line-height: 20px;

    background-color: transparent;

    background-repeat: no-repeat;

    background-image: url(http://passets.pinterest.com/images/pidgets/fpb1.png);

    color: #777;

    text-align: center;

}

.pinterest-count i {

    background-color: transparent;

    background-repeat: no-repeat;

    background-image: url(http://passets.pinterest.com/images/pidgets/fpb1.png);

    background-position: 100% 0;

    position: absolute;

    top: 0;

    right: -2px;

    height: 20px;

    width: 2px;

}

</style>

Tracking Incoming Traffic from Your Pins

Unfortunately, Pinterest has decided to strip campaign parameters from all posts.  So if you post the link http://blog.andymcsherry.com/page_path?utm_campaign=pin_it_button&utm_source=me&utm_medium=pinterest, the link on Pinterest will be http://blog.andymcsherry.com/page_path.  We can get around this by specifying a page-path reserved for Pinterest.  Simply share http://blog.andymcsherry.com/pinterest/page_path and set up your server to redirect all requests from /pinterest/page_path to /page_path?your_campaign_parameters.  Then you'll be able to track this incoming traffic.  While it'd be generally a good idea to do a 301 redirect in this circumstance, Pinterest uses rel=nofollow, so you don't need to worry about losing page-rank from these links.  This method can also be used for referral links heading to Pinterest.  Pinterest strips out known referral tags when users post to Pinterest (they actually used to append their own).  If you redirect through your site in someway, you can ensure that these tags get added.