Capturing button click using an extension

[bradmarcus]

I would like to create a javascript extension to capture whether a site visitor has clicked on 1 of 3 buttons on a page. The only differentiation between the buttons is in the href url.

[steve_lake]

Hi, 

The easiest way to do this is with a jQuery onHandler extension, with a custom jQuery selector to look for the href string of the link. 

For example, if you wanted to track all links to PDF documents on a page, you could do the following for a jQuery selector:

a[href*='.pdf'], a[href*='.PDF']

You can then set variables accordingly, and trigger a link event - for example, perhaps you want to send a ga event - you could use the following:

jQuery onHandler to track PDF link clicks

If you want to use "pure" javascript, you could write a custom click handler using addEventListener, but the jQuery onHandler is far easier to manage.    

[bradmarcus]

Thanks! I get that using JQuery is the better way to go, but since my site doesn't load the JQuery library, the extention would fail. Interesting way there to target the href. I'll play with that. THANKS!!

[steve_lake]

Ah, ok fair enough. 

If you want to add a pure Javascript extension then you can add an event listener 
(as described here https://www.w3schools.com/js/js_htmldom_eventlistener.asp )  which then calls the utag link function.

Something like this will track all of the links on the page, but you could easily add an if statement to disregard the ones  you don't want.

links = document.getElementsByTagName('a');
for (i = 0; i < links.length; i++) {
	links[i].addEventListener('mousedown', function(e) {
	       utag.link({"tealium_event":"link clicked","link_url":this.href});
	    })
	};  

[bradmarcus]

Clearly, the JQuery solution is the better one. What about if the button doesn't have a specific link, but it fires a javascript call, can we target the button's name or class in the JQuery selector?

[steve_lake]

Yes, there will be a jQuery selector to do it (or a pure Javascript method).   
We could even do it by the text on the link if needed. 

[ThomasRollinson]

You can use CSS selectors in JavaScript, such as:

// Returns an Array populated with a HTML Elements with respective matched href attributes.
// *= is contains
var elems = document.querySelectorAll('a[href*="some/url/here"]');
// OR explicitly
var elems = document.querySelectorAll('a[href="some/url/here"]');

// Other attribute examples:
// Where onclick, data-attribute and href are HTML attributes of the elements you are wanting to add a Listener to.
var elems = document.querySelectorAll('a[onclick*="someFunction()"]');
var elems = document.querySelectorAll('a[data-attribute="some-data"]');
var elems = document.querySelectorAll('a[href="some/url/here"]');

// A complex use-case example, the use of "not" in a CSS selector
// Select all "a" Elements that: 
// contain "/some/url" within the HREF attribute 
// but do not have the "do-not-track" attribute set to "true"
var elems = document.querySelectorAll('a[href*="/some/url/"]:not([do-not-track="true"])');

// I hope this helps :-)

// Then loop through the returned elements and append your event listener. You could also add data to the data layer by taking values from the attributes of the element in focus