We Keep Coding

Tracking multiple clicks on the same element

Looking for a way to track if an element has been clicked multiple times (for example, a user clicks "Submit" button several times to place an order).
We are doing some work redeveloping a website and in our UX research we found that people don't download PDFs from the site because the link behind the button is broken. We noticed that people tend to click the button several times before giving up, yet some still manage to download the PDF.
In order to show our changes to code have improved site performance and user experiences, we want to show that these "multiple clicks" have decreased.
Since the site uses Google Analytics, I have tried to create a variable in GTM that counts clicks on the same click element (which doesn't work):
function() {
var the_div = {{Click Element}};
var clickCount = 0;
return clickCount;
}
I expect the output to be a count of the times I've clicked on the Click Element (1, 2, 3, etc....)

Try like this.
Define a varable for count. and on each click increment it.
var i = 1;
$('#elem').on('click',function(){
console.log(i);
i++;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elem">click here</div>

sorry for the delay in responding.
We found a solution.
As Piertstorff pointed out, the variable sets clickCount to zero every time it is called. The solution, was to build a custom HTML tag (that runs JS) - not a variable - that fires on a Page Load Trigger and listens for multiple clicks within a 2-second timeframe. The HTML tag then passes an event to the DataLayer and stored in a variable.
That variable (signalling multiple clicks occurred) activates a trigger for another tag that passes the {{Click Classes}} variable to GA

Use javascript variable with global scope
<script>
countClicks = 0;
function clickCountFunction() {
countClicks++;
}
</script>
Add onClick attribute in button and call clickCountFunction() in it

jQuery : delete a page

I'm using jQuery mobile and my page is generated from an index.php file. When I click on links referring to another option of my php file (index.php?action=other_action) it loads in Ajax so the previous content is still kept in the code. This causes problems as nothing is dynamic anymore, because I'm using specific ids, so it breaks everything. Of course disabling Ajax works but I loose all the beauty of jQuery Mobile.
I guess a solution would be to create an onclick function on the <a>, that will prevent the page from keeping the previous content or delete the old page.
So is there a way to keep using ajax in a way that it doesn't break my dynamic elements ?
You can see it in action here, you can filter names if everything's good. Then click on the top left panel and click something, notice what happens in the inspector...
Thanks for any help.

Hi you have missed enclosing the selector within qoutes...
your jQuery
$(document).ready(function() {
//bind a listener to "click" event on links with class "markviewed"
$('a.ui-btn-present').click(function(event) {
$('ul.listlist').listview('refresh');
$(#pageone).remove(); //<-- selector should be within quotes
// get ids from clicked <a>
var id = $(this).attr('data-id');
$(this).attr({
"class" : "ui-btn ui-btn-icon-notext-ok ui-icon-check ui-btn-a"
});

After much more research I wasn't looking in the right direction: the problem was that the listview had to be refreshed. So I created a new function
<script>
function refreshlist() {
$('.listlist').listview("refresh");
$('#pageone').remove();
};
</script>
And then I added onclick= "refreshlist()"to all my links and now it works.

Targeting links with jquery mobile

This is pretty much an add on to a question I posted before about loading an external page without ajax, but keeping it an iOS web app window. What I came up with for that example was this
<script>
$(document).bind('pageinit', function() {
$("#test").click(function (event) {
event.preventDefault();
window.location.assign("test.html");
});
});
</script>
But now what I want to do is to set this up for every link I would have on that page. Seeing as I don't know how many links I could have, it would be very tedious to do this every time I add a new link. So I found this snippet and thought I could combined the two some how, I just need some direction on how.
$('a').each(function(index){
var elementId=$(this). attr("id");
elementId='#'=elementId;
So for each a tag or href on my page, it will automatically grab the link and load it in that particular manner automatically.

Of course you can combine your codes. Anyway I haven't tried your code but you have to wrap an .each() function around your click events. Also you should give every clickable link a the same class. Should look like this:
$('.class').each(function(){
$(this).click(function(){
event.preventDefault();
window.location.assign("test.html");
})
});
if you now want those links to link on different pages you can define a data-href attribute on each link. like this: data-href="test2.html" in your html.
You can now use
$(this).data("href");
and put the output into a variable. Afterwards you can place it in your window.location.assign thing dynamically.
Hope I understood your problem and it helped.

Adding any additional JavaScript is breaking functionality within jQuery modal

I have a page created by someone else that contains modal windows, and each modal window has links/images that display on hover. FYI, I have a very limited understanding of JavaScript and jQuery.
What I am trying to achieve is to add Google Analytics event tags to the links in the modal windows. It would work with onclick (code below) added directly to the anchor tag, or if it is added to the link via jQuery/JavaScript). The event needs to fire as a click event in Google Anayltics.
Usually, I just add:
onclick="_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3']);"
directly to the anchor tag, but whenever I add the code to the anchor tag in the HTML, the jQuery stops working. The modal windows work correctly on this link:
http://cookware.lecreuset.com/cookware/content_cast-iron-guide-sizes_10151_-1_20002
and you can see what I mean by "stops working" on the following link - the items within the list tags are no longer being populated, which means the icons don't show up and the new content that displays on hover can't be accessed: http://cookware.lecreuset.com/cookware/content_test-form_10151_-1_20002
Since most of the links are created in the jQuery, I started by trying to add the Google Tag via .click, .attr, .on and .bind with no luck. The link above shows you my attempt with the .click function (search for CIGuide and you'll find it in the source on the 2nd link), but it breaks in the same way no matter what JavaScript I add to the page. My original question is here: Not able to successfully add Google Analytics Event Tag to link created by .attr
After I wasn't able to get either of those two things to work, I decided to try a simple alert on the page outside of all the content I was provided, with it's own JavaScript tags, just to see if I could get that to work. It worked perfectly, but the modal functionality still broke.
I have been able to successfully add the Google Tags to the anchor in the top navigation, and to the arrows on the left and right side of the page. But anytime I try to tag anything else, it breaks.
The agency I'm working with is able to add the google tag to the anchor with no issue when they test it on their server, and I am able to see the event fire if I test it on my local machine. I have to assume there is a problem on my server or with OpenCMS. However, I don't see any error messages in any browser/debugger, and I have validated my script additions with JSLint, and everything checks out.
This is driving me nuts! Can anyone help me figure out why this won't work and how I can add event tags to the page?

Not entirely sure what you're trying to achieve, and if it would work.
$(document).ready(function() {
$("#modal_sizes_1 a").each(function( index, elem ) {
$(elem).click(function() {
_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3']);
});
});
});
Update
Okay, so I think it's about this line:
<a
href="/cookware/content_cast-iron-guide-about_10151_-1_20002"
title="About Cast Iron"
onclick="_gaq.push(['_trackEvent','CIGuide', 'Click', 'About Cast Iron']);"
>About Cast Iron</a>
And I would try to change it like this
<a
href="/cookware/content_cast-iron-guide-about_10151_-1_20002"
title="About Cast Iron"
onclick="setTimeout(function(){
_gaq.push(['_trackEvent','CIGuide', 'Click', 'About Cast Iron']);
},0);"
>About Cast Iron</a>
Or even make the delay longer than 0, like 10 or 50.

You can use the callback for the GA push method and add the timeout. In your case try something like this:
var submitBtn = $('.submit-btn');
submitBtn.on('click', function(e) {
var that = this;
if (typeof _gaq != 'undefined') {
e.preventDefault();
_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3'], function() {
setTimeout(function() {
window.location = $(that).attr('href');
}, 100);
});
}
});

Determine whether a video was clicked

I'm trying to register/log ad clicks on my site.
I run video ads and want to know if it is possible to some how register an ad click.
One idea that I'm thinking about is to place a div over the video then onclick do some function foo.
Can you please point me in the right direction ?

If you use Google Anlytics, you can add this to each div you want to track. In GA it will organize the clicks in by what page the user was on for the click and which video was clicked.
onclick="_gaq.push(['_trackEvent', 'Video', window.location.pathname , href]);"

I'm not sure if this is what you're looking for exactly. I would recommend wrapping a div around whatever you're trying to count.
var clicks = 0;
$('#someDiv').click(function(){
clicks++;
});
This will count how many times a user clicks on that div. Or if you just want to see if a user clicked on a div:
$('#someDiv').click(function(){
alert('you clicked on a div');
});