Upcoming LunaMetrics Events
San Francisco, Apr 28-30 Los Angeles, May 12-16 New York City, May 19-23 Chicago, Jun 16-18

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.

Pinterest target

We can do this with Google Analytics, but there are two problems:

  1. Pinterest uses an iFrame for their Pin It button, making event tracking difficult
  2. 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.

<!-- Include ONCE for ALL buttons in the page -->
<script type="text/javascript">
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>

<!-- Customize and include for EACH button in the page -->
<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" count-layout="horizontal">Pin It</a>

 It’s your turn

How are you tracking Pinterest? Do you think Pinterest is even worth tracking? Let us know in the comments!

Jim Gianoglio

About Jim Gianoglio

Jim Gianoglio is our Digital Analytics Engineer. He works with implementation, analysis of Google Analytics, and spearheads the LunaMetrics Google Analytics seminars across the country. Want to see him in action? He'll be heading our Google Analytics training in Los Angeles. Before succumbing to the siren song of analytics, he led the SEO campaigns of Fortune 500 companies in the insurance, retail and CPG industries. Things you didn’t know about Jim: he runs marathons, photographs weddings and has done voiceovers for TV commercials.

http://www.lunametrics.com/blog/2012/03/12/tracking-pinterest-event-tracking/

22 Responses to “Tracking Pinterest with Event Tracking”

Eivind Savio says:

I have a half chewed Pinterest tracking solution that is far more complicated than this, so I’m glad someone has come up with an easier solution.

2 questions:
1. Will the Pinterest count still be shown with this method?
2. Why do you use Events instead of _trackSocial? Is it because _trackSocial can’t be filtered and so on?

@Eivind -

This solution does not include the count (I wanted to keep it as simple as possible).

It wouldn’t be too complicated to add in. You can grab the count through the API (the old API – this is apparently all that is available now). For example, you can see the number of times this page has been pinned by going to http://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=http%3A%2F%2Fwww.lunametrics.com%2Fblog%2F2012%2F03%2F12%2Ftracking-pinterest-event-tracking%2F
(the URL needs to be encoded)

As for the decision to use _trackEvent instead of _trackSocial, there are two reasons. First, like you mentioned, we currently can’t filter or create goals based on social actions. Even with the _trackSocial on Facebook and Twitter buttons, for example, I still recommend also using _trackEvent.

The second reason is that _trackSocial is meant to tie in to the APIs of the various social platforms so you know when something is actually shared. For example, just because I click on a Facebook share button doesn’t mean I ever shared it on Facebook. It just pops open a new window where I can add a message before sharing. If I’m not logged into Facebook, then that’s an additional step before sharing.

By connecting to the social networks’ APIs, we can fire the _trackSocial ONLY when there’s confirmation (in the form of a callback) to let us know that the person actually shared the content.

I’m still working on a solution (in the absence of an API from Pinterest) to make it work with _trackSocial. That will be the next blog post ;)

Let me know if you come up with a solution in the meantime.

Eivind Savio says:

Thanks for your answer Jim.

Hopefully Google & Pinterest reads this blog post as well (Pinterest – where is your API? GA – filters and goals for _trackSocial please).

The half chewed method I have been looking at is probably not very long lived (if Pinterest changes their javascript it may break), and I have therfor not putted to much effort in it (hoping for a Pinterest solution instead).

What I have done is that I have rewritten and hosted the Pinterest javascript locally with GA tracking inside the Pinterest javascript. This also means using a custom HTML code, and I’m also calling the Pinterest button differently.

With other words, too much work, so I will probably leave this method half chewed.

I have a support request with Pinterest I opened last month.

http://support.pinterest.com/requests/3179

You need to login to see the request though.

@Eduardo -

I signed in but still couldn’t see your request. Maybe only the person who makes the request can see it?

Either way, I submitted a request just now (I didn’t even see that feature until your comment pointed it out to me :)

So maybe if enough people submit the same request (hint, hint – yes I mean you, faithful reader of this blog) then they’ll make it a higher priority.

I can dream, right?

Jim Snyder says:

Jim: Thanks for this post! Agree on the approach with Events & Track Social (e.g. goals). I happen to do BOTH calls for this reason. _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);_gaq.push(['_trackEvent', 'facebook', 'like', document.title]);
I have requested this of GA.

So any way to further shed light on how to extract the count as part of this? Where could you pass this info from the API (or is there a way to not have to do this manually?) Cheers, Jim

@Jim -

I think I answered this in the comments on my Google+ post (https://plus.google.com/u/0/108774090143038749085/posts/g9mrPk4CTpV). For everyone else, here was my response:

You can get the count by accessing their API (v1). Just go to:
http://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=http://www.yoursite.com%2Fpage.html
(replace http://www.yoursite.com%2Fpage.html with whatever URL you want the count for – make sure the URL is encoded)

For example, if you go to http://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=http://www.biketheburgh.com%2Ftest.html you can see that URL has been pinned 12 times. Keep in mind, the count returns the number of times a URL has been pinned – not a specific image. If you have 2 images on a page, and each image has been pinned 3 times, then the count would be 6.

Doing the above will get you the raw data, but to format it to look like it does when you copy and paste the code from Pinterest, you just need to apply some CSS. To match it exactly, go to http://d3io1k5o0zdpqr.cloudfront.net/pinit.html and view the source code. You’ll find all the CSS for the button there.

Hope that helps!
Jim

Leon says:

Hi this solution just can send record when user click on pinterest button, but not user really pin an item?

@Leon -

This does both – it fires an event when the button is clicked and then provides the functionality of pinning the image.

Dokus says:

Hey,

thanks for your article. I do have a question though. Why would anyone use trackSocial AND trackEvent together?

I use the trackSocial function and it is working just fine…

@Dokus -

That’s a common question – see the first comment from @Eivind and my response right after it.

Thanks!

Dokus says:

Thanks for your fast response. I should read better. ;)

Gigio2k says:

Sorry i don’t have understand the solution code !
WHERE u can track the pin ?

Can u post a clean, symple example page ?

thanks

Raj says:

Gigio2K: I don’t believe this solution actually tracks pins. It just tracks clicking on the Pin button, which opens up a new window which is actually a Pinterest url. To the best of my knowledge, there doesn’t yet seem to be a solution where we are able to track the actual “pin” event. But to everyone else: please correct me if I’m wrong.

David says:

I think this hack doesn’t work any more..as of July 31 2012.

I read the code a bit, once piint.js is loaded, the tag will be immediately removed and the will be inserted at the position of the removed .

So our _gaq.push() function will never be executed… :)

David

David says:

I think this hack doesn’t work any more..as of July 31 2012.

I read the code a bit, once piint.js is loaded, the ANCHOR tag will be immediately removed and the IFRAME will be inserted at the position of the removed.

So our _gaq.push() function will never be executed…

(Sorry…please remove the above two…)

David

I just like the helpful information you supply to your articles. I will bookmark your blog and check again right here regularly. I’m moderately certain I will be told lots of new stuff right right here! Good luck for the next!

Riquez says:

I appreciate this solution, however it does not give accurate results because if someone clicks the PinIt button & then cancels, then it still records in analytics.
Without an API from Pinterest, this is the best we can hope for.

Fantastic publish, very informative. I wonder why the opposite specialists of this sector do not notice this. You must continue your writing. I am confident, you’ve a huge readers’ base already!|What’s Happening i am new to this, I stumbled upon this I’ve found It absolutely helpful and it has helped me out loads. I’m hoping to contribute & help other users like its helped me. Good job.

Florian says:

Hi Jim,

I’m just wondering if meanwhile you where able to get the solution working you were talking about with _trackSocial. Or can you recommend any other means to track actions such as a user following a board or pinning/repinning?

Thanks a lot,
Florian

Hi Florian -

Still no luck with a solution to tie into Pinterest with _trackSocial :(

If you’re interested in Pinterest specific metrics (like how many users are following your boards, liking, pinning, repinning, etc.) I would suggest a solution like Reachli (formerly Pinerly), Curalate, or Pinfluencer.