I found this code for Facebook interaction using GA which creates its own button:
<script src="//connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like></fb:like>
<script>
FB.Event.subscribe('edge.create', function(targetUrl) {
ga('send', 'social', 'facebook', 'like', targetUrl);
});
</script>
Rather than creating its own button, I want to use social interaction with GA for my custom Facebook link.
<a href="my Facebook page URL" target="_blank"><img src="images/common/facebook.png" width="20" height="20" border="0" /></a>
How can I do this.?
Also can I use the same thing for twitter ?
Twitter link :
<a href="my twitter page url" target="_blank"><img src="images/common/twitter.png" width="20" height="20" border="0" /></a>
I have used following code for Facebook like button and Twitter share button with Universal Google Analytics. Kindly note the scripts I have added in head, those are necessary. Also note the tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#" lang="en-US">
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<script src='//connect.facebook.net/en_US/all.js'></script>
<script src="jquery.twitterbutton.js" type="text/javascript"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxxxx-2', 'abc.com');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
<style type="text/css">
.social-interaction{display: inline-block;}
.fb-interaction{float: right; margin-left: 25px; }
.twitter-interaction{float: left;}
</style>
</head>
<body>
<!-- ***********************************FACEBOOK LIKE BUTTON********************************************************* -->
<div class="social-interaction">
<div class="fb-interaction">
<div class="fb-like" data-href="Your URL" data-width="20" data-layout="standard" data-action="like" data-show-faces="true" data-share="false"></div>
<div id="fb-root"></div>
<div style="display:none">
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fyour_facebook_page&width=20&layout=standard&action=like&show_faces=true&share=false&height=80&appId=Your App ID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:20px; height:80px;" allowTransparency="true"></iframe>
</div>
<script>
window.fbAsyncInit = function() {
// Don't use my app id, use your own or it won't work!
FB.init({appId: 'Your App ID', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
// Do something, e.g. track the click on the "Like" button here
// ga('send', 'social', 'facebook', 'like', targetUrl);
alert('Thank you to like our page.');
});
};
</script>
</div>
<!-- *********************************TWITTER TWEET BUTTON********************************************************** -->
<div class="twitter-interaction">
<script type="text/javascript">
$(document).ready(function () {
$('#twitterbutton-example').twitterbutton({
user:'',
title:' ',
ontweet:function(response){
// Do something, e.g. track the click on the "Like" button here
// ga('send', 'social', 'twitter', 'tweet', targetUrl);
alert("ontweet");
ga('send', 'social', 'twitter', 'tweet', "Your URL");
},
lang:'en'
});
});
</script>
<div id="twitterbutton-example"></div>
</div>
</div>
</body>
</html>
You can definitely do it for your own buttons, you'll just have to add the click listener yourself.
To send the social hit to GA, you just have to do something like this:
ga('send', 'social', {
'socialNetwork': 'facebook',
'socialAction': 'like',
'socialTarget': 'http://example.com'
});
And then to send that hit when someone clicks on your button, you'd just have to add an event listener, like this:
// Find the button on the page and store a reference to it.
var myFacebookLikeBtn = document.getElementById('#my-facebook-like-button');
// Add a click listener to that button.
myFacebooklikeBtn.addEventListener('click', function() {
ga('send', 'social', {
'socialNetwork': 'facebook',
'socialAction': 'like',
'socialTarget': 'http://example.com'
});
});
For more information on social tracking, check out this developer guide: https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions
Or the analytics.js field reference for social hits: https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#social