Skip to content
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

Error GTM with nuxt 3 #223

Open
Met96 opened this issue Jan 12, 2023 · 5 comments
Open

Error GTM with nuxt 3 #223

Met96 opened this issue Jan 12, 2023 · 5 comments

Comments

@Met96
Copy link

Met96 commented Jan 12, 2023

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:
Screenshot 2023-01-12 alle 09 56 30

@nielsvanrijn
Copy link

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
Copy link
Author

Met96 commented Jan 25, 2023

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
Copy link

arb85 commented Sep 16, 2023

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
Copy link

+1

@muhsin-life
Copy link

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;
      }
    },
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants