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.
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.
Update December 18th:
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…
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.
- Facebook OpenGraph Debugger
- Twitter Cards Official Documentation
- Optimizing Your Site for the Open Graph
- Open Graph, Twitter Cards, and your blog
- Sharing is caring: Facebook updates Like and Share buttons