creating click events on a specific page populating ga event label with the href of external links

[defelicemattia]

Hi,

I have been trying to set up a jQuery handler that will fire an event every time that a user clicks to buttons that lead to external pages and populate the event label dimension with the href of each link clicked.

How do I do it?

Thank you very much in advance. 

[david_bird · Accepted solution]

Hi @defelicemattia, 

You'll need some jQuery that will parse through all of the hyperlinks on your page. Hopefully the following code will get you on your way.

You can see how this works by copying the code below and pasting into the console while viewing a page on your site. 

        hostname = new RegExp(location.host); console.log ('hostname: ' + hostname);
        // Act on each link
        jQuery('a').each(function(){

          // Store current link's url
          var url = jQuery(this).attr("href");
          if (typeof url != 'undefined') { 
            if (url.length > 0) {

            // Test if current host (domain) is in it
            if(hostname.test(url)){
               // If it's local... do nothing
            }
            else if(url.slice(0, 1) == "#"){
                // It's an anchor link do nothing
            }
            else if(url.slice(0, 1) == "/"){
                // It's also local... do nothing
            }
            else if(url.indexOf("tel") == 0){
                // It's a phone number... do nothing
            }
            else if(url.indexOf("javascript") == 0){
                // It's javascript... do nothing
            }
            else {
               // a link that does not contain the current host
               console.log ('set jQuery click handler for external link: ' + url) ;
               jQuery(this).on( "mousedown", function() {              
                   // Do your setup for the utag.link call
                   console.log("External link clicked, url: " + jQuery(this).attr('href'));
                });
            }
          }}
        });

I've left the actual call to utag.link for you to complete. Also, may notice hyperlinks that are picked up that you don't want a listener set up. When running the above in the console, I noticed on a couple sites a telephone number as a hyperlink; hence the code block that ignores anything starting with 'tel'. You may find the need to add additional code to block others on your site.  

You would add the code to a JavaScript extension and scope it to DOM Ready.

Please let me know how this turns out.

Thanks, David

[brian_kranson]

@defelicemattia

Another user asked the same question yesterday. Are the two of you working together? :)

The soltuion is similar:

https://community.tealiumiq.com/t5/Analytics-and-Data/What-is-the-recommended-way-to-track-exit-link...

[defelicemattia]

@brian_kranson Thank you for your answer but no we are not working together.

[Gil123]

Thanks Kathleen!

I just tried the code for tracking external links and it works great!

I had a small issue that I thought is worth sharing. At the beginning when I set the extension to fire on 'mousedown', tracking would only happen for the second link I clicked on on every page. I then changed it to trigger on 'mouseover' and the problem was solved.

This might be elementary but was new to me. Also, I was using AT internet rather than GA but my intuition is that the extension would work the same way with both platforms.

[kathleen_jo]

Excellent to know @Gil123. Thank you for sharing! Let me see about changing the 'mousedown' to 'mouseover' in the code.