adsense - 如何在 SPA(单页应用程序)的路由更改时调用 AdSense 自动广告？

Question

我在全局 template.html 文件中包含了所需的脚本标签，该文件包含我的 SPA(用 Sapper/Svelte 编写)的所有动态页面。

www.ensueco.com

<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

如果我加载索引页面，自动广告会完美加载，但是当我单击导航到另一个页面/文章的链接时，客户端路由将更改内容窗口中的内容，但不会重新创建新的自动生成的广告。

如果我在初始页面加载时打开给定的文章/子页面，它也会完美地从自动广告加载广告，但单击主导航中的“主页”返回主页，不会在内容窗口中加载新广告。

问:如何要求 adsbygoogle 脚本在客户端路由上再次执行以在所有页面上填充自动广告？

我目前有一个订阅路由更改事件并将这些信息转发到 Google Analytics 的脚本:

page.subscribe(({ path, params, query }) => {
gtag("config", "GOOGLE_ANALYTICS", { page_path: path });
});

但不确定我是否可以做类似的事情来要求 adsbygoogle 再次执行？ (下面的代码已经过测试，不起作用)

page.subscribe(({ path, params, query }) => {
// (window.adsbygoogle = []).push({
// google_ad_client: "ca-pub-XXXXXXXXXXXXX",
// enable_page_level_ads: true,
// tag_partner: "site_kit"
// });
gtag("config", "GOOGLE_ANALYTICS", { page_path: path });
});

上面的测试代码给了我这个:

我在路线更改时收到此错误:

Uncaught
O {message: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: Only one 'enab…esyndication.com/pagead/js/adsbygoogle.js:58:409)"}

如果我删除 enable_page_level_ads 我得到这个:

Uncaught 
O {message: "adsbygoogle.push() error: All ins elements in the … with class=adsbygoogle already have ads in them.", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: All ins elemen…js/adsbygoogle.js:185:25)↵    at <anonymous>:1:38"}

所以基本上，我需要执行一些创建新标签(基于自动广告)的方法，以便我可以执行此方法并填充所有新的 ins 元素。我认为。

谢谢

其他想法

据我了解，脚本是在 SSR(服务器端渲染)后加载的，为什么在执行 adsbygoogle 脚本后，我网站的内容、HTML、CSS 和 JS 已经加载。

从开发 POW 来看，我希望可以清空 adsbygoogle 数组并通过 google 脚本重新初始化广告，以便 JS 抓取现在动态加载的内容并基于新的 window.pushed URI ( window.history.pushState() )，并放置新广告，如果它在此特定页面的 SSR 之后加载，则无论如何都会这样做。

Answer 1

使用 jQuery 的可能解决方案

制作一个文件:

如果您将脚本标签放在单独的 中php/html 文件调用它 autoads.html 并将您的广告脚本标签放入其中。把它放在你可以通过 URL 从服务器上调用它的地方。

<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

调用文件:

使用 jQuery .click & .load当与类 .myNavButton 链接时，我们可以通过它的 URL 调用 autoads.html 的函数单击它应该执行文件包含的任何脚本。

由于脚本不可见，我们可以将它加载到 body 标签 ，尽管任何现有的标签都应该工作。

HTML

<a href="/" class="myNavButton">Home</a>
<a href="/page1" class="myNavButton">Some Page</a>
<a href="/page2" class="myNavButton">Another Page</a>

jQuery

$(document).ready(function(){
  $(".myNavButton").click(function(){
    $("body").load("autoads.html");
  });
});

选择:

由于多次执行脚本可能会导致冲突问题，一个替代方案可能是让 jQuery 重新加载任何 iframe 在页面上。

也许在点击功能中使用这样的东西？

$('iframe').attr('src', $('iframe').attr('src'));

资料来源:

https://www.w3schools.com/jquery/ajax_load.asp

https://api.jquery.com/load/

https://css-tricks.com/snippets/jquery/force-iframe-to-reload/