Muschamp Rd

Tracking social media button clicks in Google Analytics

October 2nd, 2013
Social Media Icons

The best way to track social media button clicks is to use a plugin in your CMS, I use Professional Share on this blog. It has most every feature I want except support for Twitter Cards. I’m hoping the author will add Twitter Card Support as he already supports Facebook Open Graph meta data. Sometimes you don’t have the luxury of a plugin or content management system, I took one of my oldest webpages, a webpage I’ve been maintaing for over a dozen years and I added structured meta data and social media buttons which track in Google Analytics.

Update: I’ve done a lot of work on the problem of tracking social media sharing buttons and although what I documented below works, Facebook and the other social networks have the nasty habit of changing the way things work and introducing new ‘features’. So be sure and look at the source of the linked to webpages to see the latest techniques I’m using and experimenting with.

Google+ is of course the easiest social network to track with Google Analytics as Google does it automatically. There is official documentation on tracking Facebook Likes and Tweets in Google Analytics but I found in the real world, you want a bit better instructions. I tried numerous tutorials and none of them seem to have the big 3 social networks along with the proper structured meta data so your content looks the best when it is shared, so I took my HTML and put it into Pastebin.

This isn’t really a tutorial, but it is a webpage which has working social media buttons that track in Google Analytics along with the correct structured meta data so you can copy, paste, and modify. You’ll have to include your Google Analytics tracking code, your Facebook App ID, and your Twitter account and of course your URL when you modify the code below.

Like, Tweet, and +1 tracked in Google Analytics

This is how my Tweets look with Twitter Card support

Update December 7th: I didn’t do Pinterest, probably because I never thought of it, but also because I’m using a plugin to dynamically put the Pin button on top every image for this blog. Pinterest also has a “Pin It” bookmarklet I use, but what most people are probably using is the regular old JavaScript Pinterest button, unfortunantly they are not that easy to track with Google Analytics from what I’ve read. I’m going to have to do some more testing…

It wasn’t so hard thanks to StackOverflow. Here is a screen shot of Google Analytics showing social events for four different social networks on the same page. The actual code can be seen by viewing source on this webpage. I also came across an even more elaborate technique if the one I use doesn’t cut it.

Social Events for Google+, Facebook, Twitter, and Pinterest

Update December 18th:

Twitter and Pinterest work best of all the social networks IMHO
I added Google+ to my quotation mashup along with tracking social sharing in Google Analytics and it caused me all kinds of headaches. Most of the problems weren’t my making they are inherent to the various official social sharing buttons. For instance the Google+ button does not do what it says it does in the documentation when it comes to expandto at least not in Safari. YouTube and indeed all the iFrames in general cause problems for all the other iFrames and social sharing buttons. Finally even though I spent hours testing, my solution still leaves a lot left to be desired. I can’t put quotations into the my Google+ posts. WTF! I don’t seem to be able to like and unlike stuff on Facebook, but I can “Share” it as often as I want. I also was promised Twitter Card Summary with large image and then it didn’t work, indeed my Twitter cards seem to be temporarily not functioning and most annoying of all the Google Analytics report sometimes has the title and sometimes has the URL. Twitter reports the title, but every other social network seems to report the URL. I’ve basically given up on it ever being perfect, but I now think I have just about the best implementation of social sharing of quotations possible. I support all the best social network. I have larger images even if Twitter doesn’t want them…

I’m kinda sick of JavaScript, social sharing buttons, and coding late at night after work. I don’t know if I’ll be adding any new features to for a long time. Some of this code may be useful to others… I guess the next frontier would be sharing quotations on LinkedIn. One of my many discoveries is the social sharing buttons work better inside divs that are floated rather than ordered lists…

Update May 8th 2014

I finally tried to use code like this in my day job, it didn’t go perfectly. I don’t understand why structure meta data and social sharing buttons don’t work perfectly every time. It is enough to almost make me switch to one of the sleazy share bars.

More Links


Leave a Reply

I hereby reserve the right to delete, edit, and/or mark your comments as spam.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Posts on Muskblog © Andrew "Muskie" McKay comments not necessarily so...
CFA Institute does not endorse, promote or warrant the accuracy or quality of Muskblog. CFA® and Chartered Financial Analyst® are registered trademarks owned by CFA Institute.