How to track custom social share buttons with google analytics

Question

I have been using custom social share buttons for my site which also includes tracking with google analytics but it only shows total no. of shares of all the buttons for a specific URL, and not the no. of shares for a specific button individually for a url on google analytics. Below is the code.

CSS

.social-share-btns {
    position: relative;
    box-sizing: border-box;
    height: 40px;


}

.social-share-btns li {
    list-style-type: none;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 14.28%; /* 100 divided by the number of buttons */
margin-left: 8px;
    }

.social-share-btns li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    text-align: center;

    display: block;
    height: 100%;
    width: 100%;
    padding-top: 9px;

    transition: font-size 0.3s, padding-top 0.3s;
}


/* Sharing buttons*/

.btn-facebook {
  color: #ffffff;
  background-color: #3b5998;
  border-color: transparent;
  position: relative;
  top: 0px;
width: 175px;
height: 43px;
    font-size: 18px;
    box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

JS

$(document).ready(function() {

    $('.social-share-btns a').on('click', function() {

        var url = $(this).attr('href');
        window.open(url, "","menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=800,height=600");

ga('send', 'event', 'Social', 'Shares', window.location.href);

return false;


});



})

And this is the html for one of the buttons

<div class="social-share-btns">
<a href="https://www.facebook.com/sharer/sharer.php?u=http://<?php echo $domain.dirname($path); ?><?php echo $cur_image['filename'].".html"; ?>">
        <button class="btn-facebook">       <i class="fa fa-facebook fa-lg"></i>&nbsp;Share
</button></a>

I would also like to know if there is a way to add total share counts for all the buttons for a specific URL appearing beside the buttons.

score 0 · Answer 1 · answered Jan 22 '19 at 08:52

within your code the listener to the '.social-share-btns a' clicks sends the data to analytics. if you want some other behaviour you need to set up separate trackers for other clicks or selectors. Refer to the event tracking docs to find out more on events tracking: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

Refer to jquery docs on setting up click listeners: https://api.jquery.com/click/

How to track custom social share buttons with google analytics

1 Answers1