-
Notifications
You must be signed in to change notification settings - Fork 433
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[🐞]partytown throws error in chrome developer console and not able to connect to GTM preview mode #563
Comments
The code snippet is hard to read, but I think you might indeed be missing a closing bracket in your
Notice the trailing bracket after 'GTM-XXXXXXXX'. It's missing in your code above and hence leading to the JavaScript error. Again: GTM preview is not possible at the moment with Partytown. For more information refer to #72. |
@j0Shi82 thanks now the error is gone but how to fix the CORS error |
Sure. As mentioned in the docs, requests from within a Web Worker require the correct CORS headers. It's a security measure that all modern browsers implement. Apparently, CookieBot does not serve their assets with CORS headers. What you can do is host the script yourself (I have no experience with Gatsby, but there surely is a Cloudflare offers 100k requests for free (https://developers.cloudflare.com/workers/platform/pricing/), but you can obviously use whatever service you wish or deploy your own server that proxies the requests with the correct CORS header. The Cloudflare worker could look like this: export default {
async fetch(request) {
// node_modules/itty-router/dist/itty-router.min.mjs
function e({ base: t = "", routes: n = [] } = {}) {
return { __proto__: new Proxy({}, { get: (e2, a, o) => (e3, ...r) => n.push([a.toUpperCase(), RegExp(`^${(t + e3).replace(/(\/?)\*/g, "($1.*)?").replace(/\/$/, "").replace(/:(\w+)(\?)?(\.)?/g, "$2(?<$1>[^/]+)$2$3").replace(/\.(?=[\w(])/, "\\.").replace(/\)\.\?\(([^\[]+)\[\^/g, "?)\\.?($1(?<=\\.)[^\\.")}/*$`), r]) && o }), routes: n, async handle(e2, ...r) {
let a, o, t2 = new URL(e2.url);
e2.query = Object.fromEntries(t2.searchParams);
for (var [p, s, u] of n)
if ((p === e2.method || "ALL" === p) && (o = t2.pathname.match(s))) {
e2.params = o.groups;
for (var c of u)
if (void 0 !== (a = await c(e2.proxy || e2, ...r)))
return a;
}
} };
}
var router = e();
router.get("/api/partytown/proxy", async (req) => {
let url = new URL(req.url);
if (!url.searchParams.has('url')) {
return new Response("Invalid", { status: 400 });
}
const decodedUrl = decodeURIComponent(url.searchParams.get('url'));
const res = await fetch(decodedUrl);
const newHeaders = new Headers(res.headers)
newHeaders.set('access-control-allow-origin', '*');
const newResponse = new Response(res.body, {
headers: newHeaders
})
return newResponse;
});
router.all("*", () => new Response("Not Found.", { status: 404 }));
return router.handle(request);
}
}; Then setup the
You might need to adjust the snippet to fit your needs, but it should poke you into the right direction, I hope. Happy coding! |
@j0Shi82 thank you for your quick response i have added the proxy in partytown config and I'm using AWS Cloudfront
This is error i got in network tab |
@j0Shi82 can we do using cloudfront ?
|
Cloudfront functions are JavaScript as well afaik. So you should be able to use the code snippet with small adjustments. A quick search revealed that Cloudfront functions may be limited to 1ms of CPU time. Not sure it's still up-to-date. But our production workers use 1.5ms of CPU time on average. So you might run a quota issue there. Sorry I cannot assist more specifically. You will need to work with the Cloudfront docs to set up your proxy. |
@j0Shi82 thank you for your response Can we take it to production without the seeing the triggers/events are tracked in GTM preview mode ? |
What you can do to verify that the data is flowing is go into your connected Analytics account, monitor the live view, and refresh your page a couple times. In case events appear there, you should be ok. I personally always set up GTM without Partytown to be able to use the debug mode and then move it into the worker. Usually it works fine, but you should absolutely keep an eye on your connected vendors to make sure the data is coming in as expected. Remember Partytown is an open source beta so you'll always need to do maintenance yourself. 👍 |
Yes, I can able to preview the tags in GTM without partytown and once i move the GTM into the worker i'm not able to preview the tags. Also i check the real time data in GA4 i can able to see the events appear there. |
I'm using hubspot as tag which added in GTM so it is requesting for https://js.hs-analytics.net/analytics/1710241500000/000000.js but receiving 404 not found This my proxy setup please help me on this
|
@j0Shi82
|
@maruthasalamr Unfortunately I'm a bit busy at the moment, but I'll try to look into it in the coming days. |
Describe the bug
To improve the performance of the website and to reduce the impact of third party scripts i'm using partytown service worker to offload the GTM scripts from the main thread.
Application - Gatsby
"gatsby": "5.11.0"
"@builder.io/partytown": "^0.9.2"
I will share my partytown gatsby implementation code here
Gatsby-ssr.js
Handled reverse proxy for partytown
I got this error 404 in the console
I'm not able to preview the tags in GTM
Please help me on this
Reproduction
None
Steps to reproduce
Mentioned above
Browser Info
Chrome
Additional Information
No response
The text was updated successfully, but these errors were encountered: