Error GTM with nuxt 3

[Met96]

Hi 😊 I'm trying to implement GTM to nuxt3 using partytown. I've implement script inside nuxt config like below:
app: {
head: {
script: [
{
hid: "gtm",
src: "https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX",
"data-cookieconsent": "ignore",
innerHTML: (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-XXXXXX'); ,
async: true,
type: "text/partytown",
},
],
noscript: [
{
tagPosition: "bodyOpen",
innerHTML: <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>,
},
],
}
...
modules: {
...
"@nuxtjs/partytown",
}
...
partytown: {
debug: true,
forward: ["dataLayer.push"],
},

And when I launch yarn dev command i have an error "fetch" inside the console like screenshot:

[nielsvanrijn]

I had the same problem, for me google tag manager links are blocked by my adblocker and that is why the fetch() failed.
What happens when you go to the scriptSrc url in your browser?

[Met96]

I have all inside with "src" attribute to type/partytown, but not the other scripts inside
I analyzed with attention the funcion on error from partytown and i thinks it's a cookiebot plugin problem.

[arb85]

I don't know if you have resolved it or not yet, but I'm facing the same fetch issue and I'm wondering if a reverse proxy in Partytown would help, someone has already tried this way?

[rahulkumarsingh73690]

+1

[muhsin-life]

here is a reverse proxy example using nuxt 3 api route

// api/proxy-api
export default defineEventHandler(async (event) => {
  const query = getQuery(event);
  const url = String(query?.url) || null;

  if (!url || !url.includes("connect.facebook.net")) {
    throw createError({
      status: 500,
      message: "Invalid URL",
    });
  }

  // Fetch the file content dynamically based on the URL
  const response = await $fetch(url).catch((error) => {
    throw createError({
      status: 500,
      message: `Failed to fetch resource: ${error.message}`,
    });
  });

  setResponseHeaders(event, {
    "Access-Control-Allow-Origin": "*", // Ensures proper CORS handling
    "Access-Control-Allow-Headers": "Content-Type, Authorization",
    "Access-Control-Allow-Methods": "POST, GET, OPTIONS, PUT, DELETE",
    "Content-Type": "application/x-javascript; charset=utf-8",
    "Cache-Control":
      "public, max-age=5, s-maxage=5, stale-if-error=2678400, stale-while-revalidate=86400", // Add necessary caching headers
  });

  return response;
});

  partytown: {
    forward: ["gtag", "fbq"],
    resolveUrl: function (url: URL, location) {
      if (url.hostname.includes("connect.facebook.net")) {
        const proxyUrl = new URL("http://localhost:3000/api/proxy-api");
        proxyUrl.searchParams.append("url", url);
        return proxyUrl;
      }
    },
  }