Replies: 2 comments
-
Hi. Did you manage to solve it? I'm using the experimental configuration of Next.js: But in performance tests with Google Tag Manager, it seems to only work when I use Lighthouse in DevTools; pagespeed.web.dev penalizes the script execution in any case. And AdSense throws a CORS error unless I don't use the worker. How did you set up a CloudFront function to handle AdSense script requests? Have you resolved the other errors you mentioned? |
Beta Was this translation helpful? Give feedback.
-
Hi, folks! I believe I'm facing some related issue here and that A LOT of other developers out there are probably struggling with this to. In my case, I have 3 Google scripts hugely affecting my pages performance score: Analytics (GTM), AdSense and GPT (Google Publisher Tag). I've also decided to offload them to a WebWorker via Partytown. GTM was the easy one. Simply following the steps at the Partytown docs did the trick. AdSense and GPT, however, where 2 completely different beasts. For this to work, I had to setup a reverse proxy like @jha0402 mentioned (which is the hard part and will depend on your tech stack). The reason for this is outlined in the Partytown docs: the following scripts (and other scripts requested by them down the line) do not send an appropriate https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js So, to avoid the CORS problems, instead of requesting these scripts directly, I used the Partytown resolveUrl config to rewrite the URLs and send the requests to my webserver where I've setup the reverse proxy ending up with the following workflow:
Here's the frontend code: <script>
window.partytown = {
forward: [
'dataLayer.push',
'adsbygoogle.push',
'googletag.cmd.push',
'googletag.defineSlot',
'googletag.pubads',
'googletag.enableServices',
'googletag.display',
],
resolveUrl: function (url) {
const proxyMap = {
'securepubads.g.doubleclick.net': new URL('{{ proxytown_url("gpt") }}'),
'googleads.g.doubleclick.net': new URL('{{ proxytown_url("dfp") }}'),
'googlesyndication.com': new URL('{{ proxyndication_url() }}'),
}
let proxyHost
if (url.hostname.includes('googlesyndication.com')) {
proxyHost = proxyMap['googlesyndication.com']
url.hostname = user.hostname.replace('googlesyndication.com', proxyHost.hostname)
url.protocol = proxyHost.protocol
} else if (proxyHost = proxyMap[url.hostname]) {
url.hostname = proxyHost.hostname
url.pathname = proxyHost.pathname + url.pathname
url.protocol = proxyHost.protocol
}
return url;
}
}
</script> With this, I was able to get ad blocks from GPT to render properly and it seems to be working. However, there's still one issue that I'm clueless as to what is causing it and what is its relevance. Not sure if I can ignore it (probably not): I'm getting errors related to variables being undefined on the My first guess would be that I still need to forward some function to the worker via the Partytown config, but I have no ideia what it would be. The second one would be that maybe its due to the fact that I'm running this on my localhost and the script is simply lost and everything will be fine when I push this to production (but I wouldn't count on that). Digging a little bit deeper, this errors seem to be related with the script trying to find script tags on the page, but since their running on the worker, they can't find it. So, I'm a little lost as of where to go from here. At the moment, I'd say that using Partytown with GPT and AdSense is not advisable, since there's no clear instructions either from the Partydown docs or from Google docs and it seems that the chances for for screwing up and revenue loss due to broken scripts are pretty high. Does anyone have any news on this department? |
Beta Was this translation helpful? Give feedback.
-
I've recently discovered that my company's website had a decrease in performance score due to the Google Adsense script.
Thus, I tried to run the script via Partytown.
Added the following code since we use Next.js in the frontend :
I also solved the CORS error I was having by adding two reversed proxys and mapping them to the corresponding cloudfront distribution id.
However, I kept getting errors from the adsbygoogle.js :
message: "adsbygoogle.push() error: 'google_ad_client' is missing from the tag config." name: "TagError" pbr: true stack: "TagError: adsbygoogle.push() error: 'google_ad_client' is missing from the tag config.\n"
Are there any future plans for making Third Party Services guide for Google Adsense integration like the GTM integration guide?
Are there any solutions to make Google Adsense work with Partytown?
Beta Was this translation helpful? Give feedback.
All reactions