Tracking clicks on link on website pages

[SvenVH]

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

[Darshil_Shah1]

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 · Accepted solution]

... 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-17683...

<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]

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.