I have included the needed script tag in the global template.html file which contains all dynamic pages for my SPA (written in Sapper/Svelte).

www.ensueco.com

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

​If I load the index page, auto ads load perfectly, but when I click a link navigating to another page/article, client-side routing will change the content in the content window, but won't recreate new autogenerated ads.

If I open a given article/subpage as initial page load, it also loads ads from auto ads perfectly, but clicking "home" in main navigation going back to the homepage, doesn't load new ads in the content window.

Q: How do I ask the adsbygoogle script to execute again on client-side routing to fill in auto ads on all pages?

I currently have a script that subscribes to route change events and forward these informations to Google Analytics:

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

But not sure if I could do something similar in this to ask adsbygoogle to execute again? (below code has been tested and doesn't work)

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 }); });

Above code at testing gives me this:

I get this error on route change then:

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)"}

And if I remove the enable_page_level_ads I get this:

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"}

So basically, I need to execute some method that creates new tags (based on auto ads) so I can execute this method and populate all the new ins elements. I think.

Thanks

ADDITIONAL THOUGHTS

From what I understand, the script is loaded post SSR (server-side rendering), why the content, HTML, CSS, and JS from my site already is loaded once the adsbygoogle script is executed.

From a development POW, I would expect it to be possible to empty the adsbygoogle array and re-initialize the ads by google script in order for the JS, to crawl the now dynamically loaded content and based on the new window.pushed URI (window.history.pushState()), and place new ads as it would have done anyway, should it have been loaded after this particular page's SSR.

Tag:google-ads-api, adsense, svelte, sapper

2 comments.

  1. GibsonFX
    Possible Solution with jQueryMake a file:

    If you place the script tag in a separate php/html file call it autoads.html and place you ads script tag inside it. Place this somewhere you can call it from on the server via URL.

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

    Using jQuery .click & .load functions we can call the autoads.html via it's URL when a link with the class .myNavButton is clicked which should execute any scripts which the file contains.

    As the script isn't visible we can just load it into the body tag, although any existing tag should work.

    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"); }); }); Alternative:

    As executing the script multiple times could cause conflict issues an alternative might be target the jQuery to reload any iframes on the page.

    Maybe using something like this inside the click function?

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

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

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

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

    Reply
    1. Corfitz.

      I see your intend, though I believe that is the exact same thing I am doing, just not in jQuery but Svelte. One thing to consider is that, Google Ads executes a series of events, stores data in local storage, creates global variables and uses this to determine which ads are created, displayed, shown etc. Adding the script at every route change would not redo the flow, as it has already been executed.

      Reply

Add a new comment.