NextJS：路由更改时重新加载ADS Javascript和广告时隙

2022-02-23 00:00:00 javascript next.js

我有一个自定义的javascript，用于在我的NextJS站点上运行广告。这是由广告提供商/广告交易所提供的。

如下所示：

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

除此之外，我还在网页上放置了div标签，例如：

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

这三个div标记是页面上的三个广告位，使用ad.js javascript填充广告。

这在正常加载/重新加载页面时工作正常。

但是，当我使用内部导航路由器导航到页面时，此javascript不会被触发，广告也不会显示。

重新加载ad.js的正确方法是什么，以便div标记(广告时隙)正确显示广告，并且即使在我们浏览nextjs路由器时也能正确刷新？你能帮帮忙吗？

更新：这个问题比我想象的还要深。仅仅重新加载javascript是不够的。由于这些是广告时段，因此当页面转换/路线更改时，使用的广告时段会保留在内存中，因此广告脚本会将其视为已经显示。这会导致错误。

所需行为如下：

  1. 呈现广告组件时，它定义并显示广告时段，
  2. 更改路由时，所有定义的插槽都将从内存中删除
  3. 转到其他页面后，该页面上的广告组件定义并显示新的时段。

解决方案

您可能知道，但我想提醒您，NextJS中有路由更改的监听器

  router.events.on('routeChangeComplete', handleRouteChange)
  router.events.off('routeChangeComplete', handleRouteChange)
在这些事件的帮助下，您可以在路由更改时重新加载脚本。您可以获取脚本并将其附加到每次路由更改的正文脚本的末尾。因此将重新启动形容词的内存

我希望此router.events对您有所帮助，等待您的反馈。

更新： 根据您的评论，我想在这里更新。 在这些路由器的帮助下，您可以控制事件。您可以操作DOM。它不应该是反应特定解决方案或NextJS特定解决方案。您拥有Javascript的强大功能。

如果您是添加所有ad div的人，您可以添加一个数据属性以在以后选择这些div。

例如， 假设您已添加此广告div

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

通过使用router.events的routeChangeStart事件，可以在routeChangeComplete事件之前选择具有data-ad属性的div，并将其填充内容从DOM中移除，重新加载脚本时不会抛出错误。

const adDivs = document.querySelectorAll('[data-ad="true"]'); // you can get these divs and remove the child of them before routeChangeComplete cycle

您对我回答的这个更新部分有什么看法，请让我知道您的想法。

相关文章