Posts tagged with svelte

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.