I am using the addThis widget to display Facebook, Twitter, Google, Blogger, Wordpress logos on my site.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-1324kj34h243kjh2"></script>
I would like to know of a way that I can capture when someone clicks one of the buttons for Google Analytics tracking reasons. I have attempted to add an onClick to an anchor, but this does not fire - presumably because the markup is re-written by the included JavaScript.
This is my code:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="_gaq.push(['_trackSocial', 'addThis', 'email']);"> </a>
<a class="addthis_button_facebook left" title="Facebook"> </a>
<a class="addthis_button_twitter left last" title="Twitter"> </a>
<a class="addthis_button_google left" title="Google">
<img src="images/google.gif" alt="G" />
</a>
<a class="addthis_button_blogger left" title="Blogger"> </a>
<a class="addthis_button_digg left last" title="Wordpress"> </a>
</div>
</div>
I am using the addthis_config to report GA activity at the moment, but I wish to report to two profiles, so I am looking for a way of capturing the click as that seems like the best way around the problem.
Make sure you have that div appended on the DOM to ensure you could use events. Otherwise check liveQuery.
I haven't used addThis widget but I would try with jQuery using class name:
$.('.addthis_button_email').click(function(){
//Count it...
});
Or using a custom method in every button:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="notifyGA(information....)"> </a>
Related
The links to my sites are only working on mobile but when I visite it via desktop none of the links work; the url changes but it doesn't actually go to the link unless I click into the address bar and press enter.
I am not getting any errors in the console and when I ran aXe to analyze the site everything came back good.
<nav class="cb-navbar">
<div class="cb-container">
<div class="cb-navbar-inner">
<div class="cb-navbar-left">
<a href="index.html" class="cb-navbar-back">
<i class="cb-icon -long-arrow-left"></i>
</a>
</div>
<div class="cb-navbar-right">
<div class="cb-navbar-nav">
<a href="/services/index.html" id="navbar-services" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -cog"></i>
</span>
<span class="cb-navbar-nav-item-text">Services</span>
</a>
<a href="/projects/index.html" id="navbar-projects" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -bars"></i>
</span>
<span class="cb-navbar-nav-item-text">Projects</span>
</a>
<a href="/contacts/index.html" onclick="yaCounter.reachGoal('contacts')" id="navbar-contacts" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -contacts"></i>
</span>
<span class="cb-navbar-nav-item-text">Contacts</span>
</a>
</div>
</div>
</div>
</div>
Can you post the whole file? From what you posted, I copied into a running application and replaced the navbar, and the links both worked mobile and on desktop.
You are however missing a closing tag, not sure if you have yours closed that may be causing the issue.
Here is the code:
<div ng-click="grid.appScope.navToPage(row)"class="ui-grid-cell" ui-grid-cell style="cursor: pointer">
<div class="ui-grid-cell-contents">
<a ng-href="/mywebpage/2" target="_blank">
<span class="glyphicon glyphicon-new-window"></span>
</a>
</div>'
</div>
I want to figure out some way to be able to click the a tag link without clicking the div with the ng-click. Is there a good way to do this?
You can prevent click propagation using the $event.stopPropagation() which is available on many angular directives such as ng-click. Please have a look at this question AngularJS ng-click stopPropagation
In your case, the anchor tag should look like this:
<a ng-href="/mywebpage/2" ng-click="$event.stopPropagation()" target="_blank">
<span class="glyphicon glyphicon-new-window"></span>
</a>
Try this
<a ng-href="/mywebpage/2" target="_blank" ng-click="$event.stopPropagation()"><span class="glyphicon glyphicon-new-window"></span></a>
I'm trying to create a language bar with the jQuery bootstrap plugin, but it seems there is no option to append any action to anchor tags in drop down menu at all. They are just un-clickable.
Initialization of plugin:
<div class="bfh-selectbox bfh-languages" data-language="pl_PL" data-available="en_US,pl_PL" data-flags="true" data-blank="false">
<input type="hidden" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option input-medium" data-option=""></span>
<b class="caret"></b>
</a>
<div class="bfh-selectbox-options">
<div role="listbox">
<ul role="option">
<li>
<a href="/index.php?lang=pl_PL" data-option="pl_PL">
<i class="glyphicon bfh-flag-PL"></i>
</a>
</li>
<li>
<a href="/index.php?lang=en_US" data-option="en_US">
<i class="glyphicon bfh-flag-US"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
Commenting or uncommenting doesn't make any difference.
Another possibly related issue:
When I'm stretching out my web page, with the container overflowing the language bar completely, it becomes completely un-clickable. I don't want to change this plugin on something else in case someone will offer.
The address of the website is here.
<a href="#">
<div class="col-md-4 promo-item item-1">
<h3>
Unleash
</h3>
</div>
</a>
I got a template online, the above (with css/bootstrap?), is an image that is a link. I want to change it so that instead of a link (href), it's a clickable button.
My plan is for the button to use JavaScript to change some of the content on the page, basing it off the JavaScript below;
<button type="button" onclick="document.getElementById('demo').innerHTML='Hello JavaScript!' ">
Click Me!
</button>
So how do I change this href into a button?
in bootstrap you just add the button classes and it will look like a button
<a class='btn btn-default' ...
However, there is no reason you can't just copy the onclick attribute to the anchor tag (or "href" as you keep calling it).
From your code in the comments:
<div id='demo'></div>
<a onclick="document.getElementById('demo').innerHTML='Hello JavaScript!'; return false; "> Click Me!> <div class="col-md-4 promo-item item-1"> <h3> Unleash </h3> </div> </a>
I'm trying to add the AddThis widget to my page and customize it according to this page: http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
However it doesn't seem to be working.
I am trying to output a custom selection of items, with my code being:
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {data_track_addressbar:true,services_compact:"facebook,twitter,google_plusone,pinterest,email"};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx"></script>
As you may be able to figure out I'm just trying to display these services: facebook,twitter,google_plusone,pinterest,email
But the output I get is: print,twitter,facebook,email
What am I doing wrong?
The parameter "services_compact" is used to specify the services you want to see in the compact menu when you hover over the plus button. To specify the buttons in the order you want, try this:
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
By default the widget tries to detect the user's preferred services, but you can override that if you like. Here's the specific section in the Client API that described this:
http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#rendering-preferred-services
Hope this works for you.