Tracking Pinterest With Event Tracking
Now that Pinterest is all the rage, and more sites are starting to put the Pin It buttons next to their images, the next logical step is to track those buttons. Just like we want to know more about the people who share our content on Facebook, Twitter, Google+ and others, we’ll obviously want to do the same for Pinterest.
We can do this with Google Analytics, but there are two problems:
- Pinterest uses an iFrame for their Pin It button, making event tracking difficult
- They don’t have a publicly available API, making social interaction tracking a challenge
Today I’ll show you a workaround for the first problem, while the second problem will be the subject for a later post.
Event Tracking on the Pinterest “Pin It” Button
Because the code for adding the Pin It button sets it up in an iFrame, we can’t just add the event tracking code whenever someone clicks on the button. Tracking across iFrames requires the _getLinkerUrl method to transfer visitor and campaign cookies between domains. This also requires cross domain tracking to be set up between the domains. Since you can’t put your own tracking code on Pinterest.com, that option is out.
The other option is to take the code that Pinterest tells you to copy and paste, and hack around it a little bit. That sounds like fun, don’t you think?
You can get the code from the Goodies page on Pinterest. There are two versions – basic and advanced. The advanced code is asynchronous and lets you add the button to multiple images on the same page. If you only have one instance of the Pin It button on your page, then the basic code is all you need.
From the Pinterest goodies page, once you fill in the details (URL of the page the pin is on, URL of the image to be pinned, and description) the basic code will look like this:
<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.example.com&media=http%3A%2F%2Fwww.example.com%2Fimage.jpg
&description=Awesome%20description" class="pin-it-button" count-layout="horizontal">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
The line I highlighted in bold is the culprit that inserts the iFrame and takes the joy out of event tracking. It pulls in the pinit.js file (you can see the contents here). To restore our event tracking joy, we need to modify the code above to look like below:
<a onclick="_gaq.push(['_trackEvent', 'pinterest', 'pinned']); window.open(this.href, 'signin', 'height=300,width=665'); return false" href="http://pinterest.com/pin/create/button/?url='document.URL' + &media=http%3A%2F%2Fwww.example.com%2Fimage.jpg&description=awesome%20description" style="position: absolute; background: url('http://assets.pinterest.com/images/pinit6.png');font: 11px Arial, sans-serif; text-indent: -9999em; font-size: .01em; color: #CD1F1F; height: 20px; width: 43px; background-position: 0 -7px;" count-layout="horizontal">Pin It</a>
You should recognize the part in green as the event tracking code. This makes sure that a click on the Pin It button gets recorded in GA as an event. (Don’t forget to track your events as goals!) In the example above, we’re setting the category to “pinterest” and the action to “pinned.” You could also include an optional event label for additional info, like the page they’re on or the image being pinned.
The code in blue is what opens up the new window where the user can write a description for the image and complete the pinning process. The code in orange is all for looks – it includes the styling that controls how the Pin It button will look on the page. This information originally comes from a different source – pinit.html (you can see the source code here). That file, however, is usually referenced by the pinit.js file and placed in an iFrame. Since we are no longer including the pinit.js file, we need to include the styling that is lost.
If you’re using the advanced code for the Pin It button (shown below), you’ll need to remove the first part (the section that starts “Include ONCE for ALL buttons in the page”). In the advanced code, this is the part that calls the pinit.js file. Then, you’ll need to modify the second section (the part that starts with “Customize and include for EACH button in the page”) to look like our color-coded code above.
Pin It
It’s your turn
How are you tracking Pinterest? Do you think Pinterest is even worth tracking? Let us know in the comments!
