Here's a more complete example of a click-through ad script that includes some best practices for tracking clicks and ensuring the ad is accessible:
<!-- HTML code for the ad -->
<a href="https://www.example.com/ad-page" id="ad-link" aria-label="Advertisement" target="_blank">
<img src="/ad-image.jpg" alt="Advertisement">
</a>
<!-- JavaScript code for the ad -->
<script>
// Get a reference to the ad link
var adLink = document.getElementById('ad-link');
// Add a click event listener to the ad link
adLink.addEventListener('click', function(event) {
// Track the click using analytics code or ad platform code
// ...
// Open the ad destination URL in a new tab
var adUrl = adLink.href;
window.open(adUrl, '_blank');
// Prevent the default behavior of the link
event.preventDefault();
});
</script>
Let's break down the code:
The a
element includes an href
attribute with the URL of the ad destination, an id
attribute for targeting the element with JavaScript, an aria-label
attribute for accessibility, and a target="_blank"
attribute to open the ad in a new tab. The img
element includes an alt
attribute for accessibility.
The JavaScript code gets a reference to the ad link using document.getElementById()
, and adds a click event listener to it using addEventListener()
. Inside the event listener, you can add tracking code to track the ad click, either using analytics code or ad platform code.
The window.open()
method opens the ad destination URL in a new tab, using the _blank
value for the target
parameter. This ensures that the user stays on your website while the ad opens in a new tab.
Finally, we prevent the default behavior of the link using event.preventDefault()
, to avoid any unintended actions from the user clicking on the ad.