Support for Google Tag Assistant (Google Tag Manager preview) #72
Comments
|
I am having the same issue here. On top of that, I also seem to be getting CORs for google analytics. |
|
I am also loading Google Tag Assistant. However by sheer luck it randomly connected. I kept refreshing and after about 40 times it finally connected. Ive been able to connect 3 times without the error, but it does seem like its completely random. I've been getting OPs original error when it does not connect.
|
Manduro
changed the title
|
So the main reason this is happening from my investigation is that when you try to connect google tag assistant to your app, it will try to fetch the script from This requires a reverse proxy set up for this particular resource and I've set it up a way as shown below: <Partytown
forward={['dataLayer.push']}
resolveUrl={(url) => {
if (url.pathname.includes('debug/bootstrap')) {
var proxyUrl = new URL(
'https://your-hosted-url/party-proxy',
)
proxyUrl.searchParams.append('url', url)
return proxyUrl
}
return url
}}
/>and I've set up a proxy with NGINX with a hard-coded link for testing purposes as below This helps me get passed the CORs issue but I end up with these errors in the console after the timeout and I can't seem to identify what I may need to forward to the main thread.
|
Yeah I got to the same point. the To make sure it's not a disallowing the POST method I tried adding: headers["Access-Control-Allow-Origin"] = "*"; To my reverse proxy to https://www.googletagmanager.com/debug/bootstrap... There's a partytown JS error that precedes the postMessage error. I ran partytown in debug mode and here's the console output (in case it's helpful to anybody). The solution I ultimately arrived at is to set a query param like ?no_partytown=1 that if true, suppresses
|
|
I played with integrating tag assistant here: https://github.com/slawekkolodziej/partytown/tree/tag-assistant I wrote a document with what I've found: https://github.com/slawekkolodziej/partytown/blob/tag-assistant/src/lib/web-worker/tag-assistant.md The implementation is not finished yet. It's rather at early stage / POC. There are some missing parts and the implementation is definitely not production ready. |
|
Thanks @slawekkolodziej, I think the doc you linked has moved here: https://github.com/slawekkolodziej/partytown/blob/tag-assistant/docs/tag-assistant.md. Would this issue be causing this behavior?
Basically added GTM with Partytown but unable to debug that events are working before merging Partytown to production. |
|
Hey @graysonhicks yes, I moved that file recently. From your screenshots I can tell that you are using legacy Tag Assistant plugin. My code works with Tag Assistant Companion (https://chrome.google.com/webstore/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm). I figured out a nicer way to integrate Tag Assistant that doesn't require adding GTM-specific code to Partytown. However, it still needs some changes in |
|
thanks @slawekkolodziej, I found a similar problem in version 6.2. I think you have added this from your PR (#183). Do I need to follow the steps you share here https://github.com/slawekkolodziej/partytown/blob/tag-assistant/docs/tag-assistant.md ? |
|
I am facing the same issue. Any suggestion on how I should test it? |
|
I read the guide about debugging Tag Assistant, but I'm still confused on a few things:
|
|
@NotFrancee I'm still not clear either on the debug mode. For Gatsby the proxy is either with Without With |
|
I'm also facing the same error On nextJS 11. |
@tarponjargon how you fixed it? Can you paste is here? |
|
Just curious, are you trying to use this within react application? I may wrap the code I created in a react component sometime over the next week or two and release it as npm module. |
|
@slawekkolodziej if you have a sample of how to use partytown with NextJS, please I'd love to see one. I've tried a lot and never managed to make it work with NextJS Script component |
|
@slawekkolodziej I'm working with Next 11 and able to load all GTM and other 3rd parties which are added inside GTM with worker. |
|
@babvi If its possible can you share a minimal repo. I am facing same issue and couldnt solve it for few days... |
|
I have faced same issue. But I just resolved this issue by update partytown version from 0.7.1 to 0.7.4 and add below code into Set Hook to disable partytown when using Google Tag Assistant (check debug signal in the URL - gtm_debug) in NextJS Static Web:
|
|
@phongnguyen0601 We came up with a similar solution for our SSR (not using NEXT) and it's an okay workaround for the moment. |
|
This is how I fixed the CORS error for analytics and preview mode Use
|
If you are looking for a solution, you can take a look at the configuration in my last project. you must put related codes to _app and _document https://github.com/NavidGoalpure/visabox/blob/master/pages/_document.tsx I found this solution on the Internet of course, but I can remember the reference. |
It works for me! thanks |
You can try another way to disable partytown by checking attribute |
this is great!! very useful!! thanks @phongnguyen0601 |
|
I have same issue. |
|
Here's how I'm solving this in SvelteKit (not the most //+layout.server.ts
import type { LayoutServerLoad } from './$types';
export const load = (async (event) => {
const { url } = event;
const gtmDebug = url.searchParams.get('gtm_debug');
return {
gtmDebug: !!gtmDebug
};
}) satisfies LayoutServerLoad;<script lang="ts">
import type { LayoutData } from './$types';
import { partytownSnippet } from '@builder.io/partytown/integration';
import { onMount } from 'svelte';
import { VERCEL_PROD } from '$lib/shared/utils/environment';
export let data: LayoutData;
$: ({ gtmDebug } = data);
let scriptEl: HTMLScriptElement | null = null;
onMount(() => {
if (scriptEl) {
scriptEl.textContent = partytownSnippet();
}
});
</script>
<svelte:head>
{#if VERCEL_PROD}
<script>
partytown = {
forward: ['dataLayer.push'],
resolveUrl: (url) => {
const siteUrl = 'https://nocode.gallery/fissa';
if (url.hostname === 'www.googletagmanager.com') {
const proxyUrl = new URL(`${siteUrl}/gtm`);
const gtmId = new URL(url).searchParams.get('id');
gtmId && proxyUrl.searchParams.append('id', gtmId);
return proxyUrl;
} else if (url.hostname === 'www.google-analytics.com') {
const proxyUrl = new URL(`${siteUrl}/ga`);
return proxyUrl;
}
return url;
}
};
</script>
<script bind:this={scriptEl}></script>
{#if gtmDebug}
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXX');
</script>
{:else}
<script type="text/partytown">
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXX');
</script>
{/if}
{/if}
</svelte:head>
<slot /> |
|
@sthobis I did not face that specific issue. By "There are some things that are still not perfect, but it works okay for us" I meant two things: However there are 3 main parts that needs to be taken care of:
|
|
this is what worked for me in Next.js pages router (_document.tsx) sorry for the bad text formatting import { Partytown } from "@builder.io/partytown/react";
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head>
<Partytown
debug={true}
forward={["dataLayer.push"]}
set={(opts) => {
const isDebugging = opts?.window?.location?.search.includes("gtm_debug");
if (isDebugging && opts?.name === "type" && opts?.nodeName === "SCRIPT") {
return opts.prevent;
}
return opts.continue;
}}
/>
<script
id="gtm"
type="text/partytown"
dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-id');`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-id"
height="0"
width="0"
className="hidden"
></iframe>
</noscript>
</body>
</Html>
);
} |
Can we test using Preview mode via this method? |
|
yes you can, I tested it yesterday |
Doesn't work. Same CORS issue is present again. |
|
@geekysaurabh001 did you publish your GTM container? It can cause problems with CORS if not published |
|
Is there any progress on this? It feels like a pretty big oversight that scripts like GTM are arguably the biggest and most widely used use case for PartyTown yet the issue of how to run them in PartyTown and debug/preview with Google Tag Assistant isn't properly supported. A lot of the above solutions seem to basically be "don't run the script with PT when you're debugging" but we can't just assume that everything that works perfectly in the main thread is going to work correctly in the PT worker, as @sthobis has more or less said. @slawekkolodziej's solution here seems to be a step towards trying to resolve this but has been sitting in this thread for over a year without proper investigation by the maintainers and integration of it into the codebase + docs as a recommendation. This library attempts to solve a really important problem for a lot of websites and it's great that it trying to. However, the DX is really poor and makes it a massive risk integrating for companies for whom GTM and 3P scripts have important roles in their business. I really would like to use this library, but the fact that it's been around for 3 years and it's still in beta with issues like this outstanding for over a year makes it really, really difficult, as it just feels wildly under maintained at this point. It makes it hard to persuade the other people on my team that this is something we should use, even if we do definitely need it due to the impact of 3P scripts on the main thread |
|
@callum-gander what's your stack? There are a lot of different errors in this thread. Which is yours? |
|
Next.js 14, PT is successfully loading GTM but Google Tag Assistant can't connect to it on http://localhost:3000, presuming because GTM is running in the service worker, any up to date advice on handling this? Thanks for the fast response btw 
|
|
You can take inspiration from @marcowuethrich code, he added a specific check in his angular application. Here is the code |
|
Correct me if I'm wrong, but that solution is the type of solution I said isn't optimal in my previous message. All that's doing seems to be switching the This seems to be possible from @slawekkolodziej's work here https://github.com/slawekkolodziej/partytown/blob/tag-assistant/docs/tag-assistant.md but I'm unable to get it running and was posting again here to see if anyone had success with this method or whether the maintainers had implemented something similar to this, as this is the ideal solution for this problem, as it solves the problem of how to connect GTM running in PartyTown to Google Tag Assistant not just running GTM on the main thread |
|
@callum-gander, the link you are referring to was my initial work. I ended up wrapping all of that in a slightly more convenient partytown plugin here: https://github.com/superside-oss/partytown-gtm-plugin, did you try using it? |
|
Hey @slawekkolodziej, so yes, I haven't gone 100% with your code, but I've broadly used the approach you use within it and used a lot of the code within your repo, which works great, amazing work! Happy to go into detail if people want to know how I did this but I'd strongly recommend anyone having this issue to just use @slawekkolodziej's plugin, the only reason we don't is due to some internal complexities that mean it's better to hand implement I've broadly got this working except for the issues mentioned below about the TagAssistant banner not loading properly. Any updates on if it's possible to fix this? Or if it causes any further issues? e.g. is it just a minor UI bug and all events will still properly go through?
Despite your amazing work reversing all this and getting this working as a separate package, I can't help but feel like this really deserves to be within the main PartyTown repo + docs, not a separate 3P package. As I raised earlier, GTM is cited as the first use case on the PartyTown docs page here and realistically it's probably the primary reason for adoption for most users, as GTM is so widely used and a complete nightmare on performance. Not having robust handling of debugging GTM with PartyTown (not just turning it off during debugging), both in the library itself and within the documentation as well, is really, really poor DX and feels like a barrier to adoption. Out of interest, why did you set it up as a separate package? Did you raise a PR at all about bringing it into the main repo? Is there any possibility or likelihood of you doing so? |
I created bunch of other PRs that made the plugin possible. But I had mixed feelings about creating a separate PR that adds library-specific code to Partytown core. I needed something that I can release & integrate quickly. But I agree, I would love to have GTM debugging work out of the box when I first tried Partytown. |
|
Thanks for your response @slawekkolodziej, that makes sense given the need to just get it working asap. @gioboa you seem to be a frequent contributor, how can we go about getting the ball rolling on integrating this into PartyTown? Would it be a good idea to add this to the docs as a temporary bandaid, e.g. "use this plugin for debugging GTM for now" and linking @slawekkolodziej's package and then opening a PR to get some of this stuff more natively integrated into the PartyTown library over time? Happy to help with any PRs on this work btw |
|
The best way to integrate that is:
I think we can't create an integration test to check this issue inside the GH actions because we need public keys and different tools |
|
@gioboa - Thanks for merging #573 & #493, great to see that fix made! Regarding this issue, I don't believe it should have been closed. Even with the fix in #573, while the situation with GTM should be improved when not using atomics, there are still issues/limitations with GTM with atomics and service workers that this issue mentions. For example, the workaround provided by @slawekkolodziej is still required and even with that, functionality is not 100% supported when PT is used. |
|
I'm getting CORS Policy error even though create reverse proxy for Hubspot analytics Partytown version 0.10.1 
Reverse Proxy setup uin cloudfront 
Partytown configuration Gatsby-ssr file someone can you please help me on this ? |
|
Probably worth mentioning that I'd gotten @slawekkolodziej's solution working but recently, whether it's due to something on our end, an issue with GTM, some change in chrome or an issue with his solution, GTM Assistant now won't connect to GTM in PartyTown. It's not something I'm capable of debugging or something I can post a codesandbox of to demonstrate the issue, I can only point out that going down the root of integrating partytown-gtm is now not working for me. On connecting to GTM Assistant, I get thousands of As much as I wanted to keep pursuing this to get it working again, the lack of a concrete solution within the library itself from the core team for what I'd argue is a pretty core usecase and the length of time this issue has been open, kind of makes it difficult for me to justify to my team that it's worth putting more time into it and we won't be using PartyTown any time soon as a result. I think the @andre-mr's comment sums it up best here #554 (comment). Losing analytics data or issues around being able to guarantee they're working before going to production means that any potential performance gains from PartyTown aren't worth pursuing. In particular the iOS issue at the top of the below issues concerns me
I just thought this might be worth bringing up in case it helps justify additional resources from BuilderIO being put towards issues like this. There's clearly been a lot of amazing work put into this library and it's the only library of it's kind but fixing issues like this one feel core to it's wider adoption. Thanks for all the assistance on this! |
|
Hello marcowuethrich In addition to that, in Angular, navigation fails quite often with Partytown. It's as if the Service Worker is blocking the navigation event... you have to reload the page to navigate properly. You can validate it here: If you navigate from the home to the blog, then the cards don't work correctly. It's a great pity, given the wonderful work that has been done by the community with this library, but I'm afraid I'm going to have to uninstall it due to the high number of issues related to something as important as monitoring users/business. I'm looking forward to a solution. Many thanks to everyone! |
|
I'm currently running with tag assistant without issue using based on https://github.com/superside-oss/partytown-gtm-plugin |
and others
When using Google Tag Assistant to test a Proxytown implementation of Google Tag Manager, it fails to connect:
At first there were some CORS errors for the googletagmanager.com domain. After proxying those I can see the iframe getting added to the page, but it fails to load and some Partytown error occurs:
In the page's
<head>I can see the following scripts:And just before the
</body>:When switching back to the default GTM implementation (without Partytown), everything works as expected.
The text was updated successfully, but these errors were encountered: