Tracking outgoing Pins
The first step is to be able to track outgoing pins. With the current Pin It button, slapping an onclick method on it won't get called. However, we can design the same looking link that even has the count bubble next to it. All you need for this script is to replace your_url with the page's current URL and your_bookmarklet_url with the href on your current button.
<a class="pinterest-button" target="_blank" onclick="_gaq.push(['_trackEvent', 'Pinmarklet', 'Pinned']);window.open(this.href,'_blank','status=no,resizable=yes,scrollbars=yes,personalbar=no,directories=no,location=no,toolbar=no,menubar=no,width=632,height=270,left=0,top=0');return false;" href="your_bookmarklet_url">Pin It<span class="pinterest-count"><i></i><span></span></span></a>
<script> function setPinterestCount(response) {
if (response["count"] != '0') {
$('.pinterest-count').show();
$('.pinterest-count > span').text(response["count"]);
}
}
</script>
<script type="text/javascript" src="//partners-api.pinterest.com/v1/urls/count.json?url=your_url&ref=your_url&callback=setPinterestCount"></script>
<style type="text/css">
.pinterest-button {
position: absolute;
background: url('http://assets.pinterest.com/images/pinit6.png');
color: #CD1F1F;
top:-11px;
height: 20px;
width: 43px;
background-position: 0 -7px;
}
.pinterest-count {
display:none;
padding: 0 3px 0 10px;
background-size: 45px 20px;
background-position: 2px 0;
position: absolute;
top: 0;
left: 41px;
height: 20px;
font: 10px Arial, Helvetica, sans-serif;
line-height: 20px;
background-color: transparent;
background-repeat: no-repeat;
background-image: url(http://passets.pinterest.com/images/pidgets/fpb1.png);
color: #777;
text-align: center;
}
.pinterest-count i {
background-color: transparent;
background-repeat: no-repeat;
background-image: url(http://passets.pinterest.com/images/pidgets/fpb1.png);
background-position: 100% 0;
position: absolute;
top: 0;
right: -2px;
height: 20px;
width: 2px;
}
</style>
No comments:
Post a Comment