Tracking clicks on link on website pages | Community
Skip to main content
S
SvenVH
Level 1
May 4, 2023
Solved

Tracking clicks on link on website pages

  • May 4, 2023
  • 2 replies
  • 3864 views

hi,

we have links on our website that don't have a href.

For example the download button on https://www.barco.com/eu-en/support/software/r33050093

We're trying to capture clicks on that button/link in Marketo, but this doesn't show up in the Activity Log as  'Clicked Link on Webpage'.

Any idea how to track these?  

Thank you

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Dave_Roberts

... or the opposite route -- you could include an 'href' for tracking purposes and then use a script to do something else (download) when the link is clicked kind of like what you're using now for the download action?

Reference: https://stackoverflow.com/questions/1768124/executing-javascript-when-a-link-is-clicked#answer-1768347

 

<a id="link1" href="#">Something</a> <script type="text/javascript"> // get a reference to the A element var link1 = document.getElementById("link1"); // attach event link1.onclick = function(e) { return myHandler(e); }; // your handler function myHandler(e) { // do whatever // prevent execution of the a href return false; } </script>

 

This example calls for an id="" on the link but I think in the context of the page you could generalize that to a class like ".download-button" rather than making it id-specific. 

It looks like you're already using data-tde-file-number and data-tde-type attributes which I'd assume help to identify the file you want to download, so maybe working those into the script for the "do something" part would be the best of both worlds (eg. a download button with an href attribute). Basically, you could take the function(s) you're using to handle the file downloading now and use them where the "do something" is in the script above and then just add the "return false" part to cancel the button click.

That might end up looking something more like this:

 

<!-- button HTML --> <a class="btn btn-primary btn-lg download-button" data-tde-file-number="R33050093" data-tde-type="3"> Download <i class="download-icon"></i> </a> <!-- script (could be external) --> <script type="text/javascript"> // get a reference to the A element var link1 = document.getElementsByClassName("download-button"); // attach event link1.onclick = function(e) { return myHandler(e); }; // your handler function myHandler(e) { // do whatever (add your download function(s) here // prevent execution of the a href return false; } </script>

 

 

The advantage of going this route might be that you could make the changes in the HTML to the anchor tag and let the script live in the background and fire on "any <a> with class="download-button". In this way you wouldn't need to update the script to point to a new file location if you wanted to use this on a bunch of pages for a bunch of downloads -- one script could handle the behavior and the HTML for the <a> tag could handle the properties to pass thru the script.



2 replies

Darshil_Shah1
Community Advisor and Adobe Champion
Darshil_Shah1Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
May 4, 2023

Well, you can create custom clicklink Munchkin events when a visitor interacts with the Download button. Check out the product documentation here.

 

Munchkin.munchkinFunction('clickLink', { 'href': '/download/clickShareExtensionPack' } );

 

 

    Dave_Roberts
    Dave_RobertsAccepted solution
    Level 10
    May 4, 2023

    ... or the opposite route -- you could include an 'href' for tracking purposes and then use a script to do something else (download) when the link is clicked kind of like what you're using now for the download action?

    Reference: https://stackoverflow.com/questions/1768124/executing-javascript-when-a-link-is-clicked#answer-1768347

     

    <a id="link1" href="#">Something</a> <script type="text/javascript"> // get a reference to the A element var link1 = document.getElementById("link1"); // attach event link1.onclick = function(e) { return myHandler(e); }; // your handler function myHandler(e) { // do whatever // prevent execution of the a href return false; } </script>

     

    This example calls for an id="" on the link but I think in the context of the page you could generalize that to a class like ".download-button" rather than making it id-specific. 

    It looks like you're already using data-tde-file-number and data-tde-type attributes which I'd assume help to identify the file you want to download, so maybe working those into the script for the "do something" part would be the best of both worlds (eg. a download button with an href attribute). Basically, you could take the function(s) you're using to handle the file downloading now and use them where the "do something" is in the script above and then just add the "return false" part to cancel the button click.

    That might end up looking something more like this:

     

    <!-- button HTML --> <a class="btn btn-primary btn-lg download-button" data-tde-file-number="R33050093" data-tde-type="3"> Download <i class="download-icon"></i> </a> <!-- script (could be external) --> <script type="text/javascript"> // get a reference to the A element var link1 = document.getElementsByClassName("download-button"); // attach event link1.onclick = function(e) { return myHandler(e); }; // your handler function myHandler(e) { // do whatever (add your download function(s) here // prevent execution of the a href return false; } </script>

     

     

    The advantage of going this route might be that you could make the changes in the HTML to the anchor tag and let the script live in the background and fire on "any <a> with class="download-button". In this way you wouldn't need to update the script to point to a new file location if you wanted to use this on a bunch of pages for a bunch of downloads -- one script could handle the behavior and the HTML for the <a> tag could handle the properties to pass thru the script.



    SanfordWhiteman
    SanfordWhiteman
    Level 10
    May 4, 2023

    You’d use addEventListener, not onclick. But the button is already set up with a custom event listener that prevents the default action! All it needs is an href attribute — which will not be used for navigation — and it will work instantly.

      Terms & ConditionsAccessibility statement

      Loading footer...