Refreshing Ads JavaScript and Ad Placements with NextJS Navigation

Question

Refreshing Ads JavaScript and Ad Placements with NextJS Navigation

My NextJS website utilizes a custom JavaScript provided by an ad provider for running ads. The script is typically structured like this:

<script type="text/javascript" src="//cdn.adsite.com/static/js/ad.js" ></script>

In addition to the script, I place div tags on the webpage to serve as ad slots:

<div id="ad-tag-6098" ></div>
<div id="ad-tag-6099" ></div>
<div id="ad-tag-6076" ></div>

These div tags correspond to different ad slots on the page and are filled with ads using the JavaScript.

While this setup functions correctly on initial page loads or reloads, it fails to display ads when navigating internally through the router.

I am seeking guidance on how to properly reload the ad.js script to ensure that the ad slots display content accurately and refresh appropriately even during navigation using the NextJS router.

UPDATE: I have discovered a more complex issue related to the functioning of these ad slots. Simply reloading the JavaScript is insufficient. Due to the nature of these slots, transitioning between pages causes them to be stored in memory, leading to errors as the script recognizes them as already displayed.

The desired functionality should involve:

Rendering the ad slot component, defining it, and displaying the ad,
Removing all defined slots from memory upon route changes,
Upon visiting a new page, allowing ad components to define and display fresh slots.

javascript next.js

Answer 1

Answer №1

Just a friendly reminder, there are listeners in NextJS for route changes

  router.events.on('routeChangeComplete', handleRouteChange)
  router.events.off('routeChangeComplete', handleRouteChange)

You can dynamically reload scripts when the route changes using these events. By fetching and appending the script at the end of the body on every route change, you can effectively refresh the memory of the ads.

Hope this tip about router events is helpful for you. Looking forward to your feedback.

UPDATE: Based on your comment, I have an update. The router.events provide control over DOM manipulation. It doesn't have to be tied specifically to React or NextJS. Utilize the power of JavaScript.

If you are responsible for adding all ad divs, consider adding a data attribute to easily select them later.

For instance, Let's say you initially added this ad div

<div id="ad-tag-6098" ></div> // Instead of this!
<div id="ad-tag-6098" data-ad="true" ></div> // Add this one!

By utilizing the routeChangeStart event from router.events, you can identify the divs with the data-ad attribute and clear their content from the DOM before the routeChangeComplete event triggers. This way, when the script is reloaded, it won't cause errors.

const adDivs = document.querySelectorAll('[data-ad="true"]'); // Select these divs and remove their contents before the routeChangeComplete cycle

What are your thoughts on this updated part of my response? Feel free to share your insights.

Answer 2

Just a friendly reminder, there are listeners in NextJS for route changes

  router.events.on('routeChangeComplete', handleRouteChange)
  router.events.off('routeChangeComplete', handleRouteChange)

You can dynamically reload scripts when the route changes using these events. By fetching and appending the script at the end of the body on every route change, you can effectively refresh the memory of the ads.

Hope this tip about router events is helpful for you. Looking forward to your feedback.

UPDATE: Based on your comment, I have an update. The router.events provide control over DOM manipulation. It doesn't have to be tied specifically to React or NextJS. Utilize the power of JavaScript.

If you are responsible for adding all ad divs, consider adding a data attribute to easily select them later.

For instance, Let's say you initially added this ad div

<div id="ad-tag-6098" ></div> // Instead of this!
<div id="ad-tag-6098" data-ad="true" ></div> // Add this one!

By utilizing the routeChangeStart event from router.events, you can identify the divs with the data-ad attribute and clear their content from the DOM before the routeChangeComplete event triggers. This way, when the script is reloaded, it won't cause errors.

const adDivs = document.querySelectorAll('[data-ad="true"]'); // Select these divs and remove their contents before the routeChangeComplete cycle

What are your thoughts on this updated part of my response? Feel free to share your insights.

Answer 3

Answer №2

One simple trick to reload a script repeatedly is by adding a unique query string each time.

To remove old advertisements, you can utilize the Script component's onLoad event handler. (Source: Next.js Docs)

import Script from 'next/script'

export default function Home() {
  const unique_id = new Date().getTime();
  return (
    <>
      <Script
        id={unique_id}
        src={`//cdn.adsite.com/static/js/ad.js?v=${unique_id}`}
        onLoad={() => {
          // code to execute after script loads
        }}
      />
    </>
  )
}

A more efficient approach would be to load the script only once, and then refresh or clear the existing ad slots as needed.

function refreshAllSlots() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh();
   });
}

function clearAllSlots() {
  googletag.cmd.push(function() {
    googletag.pubads().clear();
  });
}

Note:

This example pertains to Google ads but similar functionality may apply to other ad platforms.
These methods can be invoked using lifecycle methods, hooks, or any suitable technique.

Answer 4

One simple trick to reload a script repeatedly is by adding a unique query string each time.

To remove old advertisements, you can utilize the Script component's onLoad event handler. (Source: Next.js Docs)

import Script from 'next/script'

export default function Home() {
  const unique_id = new Date().getTime();
  return (
    <>
      <Script
        id={unique_id}
        src={`//cdn.adsite.com/static/js/ad.js?v=${unique_id}`}
        onLoad={() => {
          // code to execute after script loads
        }}
      />
    </>
  )
}

A more efficient approach would be to load the script only once, and then refresh or clear the existing ad slots as needed.

function refreshAllSlots() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh();
   });
}

function clearAllSlots() {
  googletag.cmd.push(function() {
    googletag.pubads().clear();
  });
}

Note:

This example pertains to Google ads but similar functionality may apply to other ad platforms.
These methods can be invoked using lifecycle methods, hooks, or any suitable technique.

Refreshing Ads JavaScript and Ad Placements with NextJS Navigation

Answer №1

Answer №2

Similar questions

Mastering the Art of Leveraging Conditionals in JavaScript's Find Function

After the decimal point, there are two digits

How to properly display date format in Node.js when using EJS templates with MySQL

The challenge of Angular form data binding

What is the best way to send a JQuery variable using JSON.stringify and retrieve it on the server-side?

Display additional images with "Show More" view

When making an external API call, Next.JS automatically adds "localhost" to the URL

Simple steps to correct the npm installation of the React list filter

Exploring the efficacy of unit testing on Express controllers

Could not find reference to Google (error occurred following ajax request)

Troubleshooting VueJS route naming issues

Having trouble with the base64 output in React image cropping?

Leveraging jQuery and Ajax for retrieving information from a JSON document

Failure to implement Next.js 13 App Directory routing in a Spring Boot application

Collaborating on a single instance across several processes

An Undefined Session: Leveraging Connect-Redis with ExpressJS and Node.js

"Looking to log in with NextAuth's Google Login but can't find the Client Secret

Trouble with JavaScript confirm's OK button functionality in Internet Explorer 11

`an error occurs when trying to loop through an object and add a key``

Can values from a dgrid store be saved in a variable or displayed in the console?