Here's an example of a floating click-through ad that appears on the bottom-right corner of the page

<!-- HTML code for the ad -->
<div id="ad-container" style="position: fixed; bottom: 0; right: 0; width: 200px; height: 200px;">
  <a href="" id="ad-link" aria-label="Advertisement" target="_blank">
    <img src="/ad-image.jpg" alt="Advertisement" style="max-width: 100%; max-height: 100%;">

<!-- JavaScript code for the ad -->
  // Get a reference to the ad link and container
  var adLink = document.getElementById('ad-link');
  var adContainer = document.getElementById('ad-container');

  // 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;, '_blank');

    // Prevent the default behavior of the link

  // Hide the ad container after 10 seconds
  setTimeout(function() { = 'none';
  }, 10000);

In this example, we're using the same click-through ad code as before, but we're wrapping it inside a div element with an id of ad-container. We're also using inline styles to position the container at the bottom-right corner of the page, and setting its width and height to 200px.

The JavaScript code is similar to before, but we're also adding a setTimeout() function to hide the ad container after 10 seconds. This is useful to prevent the ad from being too intrusive or annoying to users.

Note that the exact positioning and styling of the ad container may vary depending on your website's layout and design. You can adjust the bottom, right, width, and height values of the style attribute to position the ad container where you want it, and adjust the max-width and max-height values of the style attribute for the img element to ensure the ad image fits within the container.

Related Articles

- All From ChatGPT