Giter Club home page Giter Club logo

integrate-gatsby-google-tagmanager-using-partytown's Introduction

Gatsby

Gatsby minimal starter

πŸš€ Quick start

  1. Create a Gatsby site.

    Use the Gatsby CLI to create a new site, specifying the minimal starter.

    # create a new Gatsby site using the minimal starter
    npm init gatsby
  2. Start developing.

    Navigate into your new site’s directory and start it up.

    cd my-gatsby-site/
    npm run develop
  3. Open the code and start customizing!

    Your site is now running at http://localhost:8000!

    Edit src/pages/index.js to see your site update in real-time!

  4. Learn more

πŸš€ Quick start (Gatsby Cloud)

Deploy this starter with one click on Gatsby Cloud:

Deploy to Gatsby Cloud

integrate-gatsby-google-tagmanager-using-partytown's People

Contributors

sujayprabhu96 avatar

Watchers

 avatar

integrate-gatsby-google-tagmanager-using-partytown's Issues

CORS error in network tab while integration partytown in gatsby

I cannot able to preview the tags in Google Tag Manager and getting CORS errors while integrating Partytown in gatsby application. please help me on this ? @SujayPrabhu96

This is my code

gatsby-ssr.js file

`import React from "react";
import { Partytown } from "@builder.io/partytown/react";

export const onRenderBody = ({ setHeadComponents, setPreBodyComponents }) => {
//const gtmTrackingId = process.env.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID;
setHeadComponents([
<Partytown key="partytown" debug={true} forward={["dataLayer.push"]} />,
<script
key="plugin-google-tagmanager"
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-KXJZBP');,
}}
/>,
<script
key="partytown-vanilla-config"
dangerouslySetInnerHTML={{
__html: partytown = { resolveUrl(url, location) { if (url.hostname === "www.google-analytics.com" && url.pathname.endsWith(".js")) { var proxyUrl = new URL('http://localhost:9000/google-analytics'); proxyUrl.searchParams.append("url", url.href); return proxyUrl; } if (url.pathname.includes("/debug/bootstrap")) { var proxyUrl = new URL('http://localhost:9000/googletagmanager/debug/bootstrap'); proxyUrl.searchParams.append("url", url.href); return proxyUrl; } return url; } },
}}
/>,
]);

setPreBodyComponents([
<noscript
key="gtm"
dangerouslySetInnerHTML={{
__html: <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KXJZBP" height="0" width="0" style="display: none; visibility: hidden" aria-hidden="true"></iframe>,
}}
/>,
]);
};`

gatsby node.js file

`exports.onPreBuild = async ({ actions: { createRedirect } }) => {
await copyLibFiles(path.join(__dirname, "static", "~partytown"));

createRedirect({
fromPath: /google-analytics?url=:url,
toPath: :url,
statusCode: 200,
});

// This is only for GTM preview mode for debugging
createRedirect({
fromPath: /googletagmanager/debug/bootstrap?url=:url,
toPath: :url,
statusCode: 200,
});
};`
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.