Giter VIP home page Giter VIP logo

next-google-tag-manager's Introduction

@magicul/next-google-tag-manager

npm bundle size npm GitHub issues npm GitHub Repo stars

A lightweight Next 13 library to easily implement Google Tag Manager in your projects. This package forwards all of the page changes to Google Tag Manager so you can easily track your users.

Installation

Install this package with npm

npm i @magicul/next-google-tag-manager

Or with yarn

yarn add @magicul/next-google-tag-manager

Usage

Using the GoogleTagManager component

To initialize Google Tag Manager, add <GoogleTagManager /> to app/layout.tsx like this:

import GoogleTagManager from '@magicul/next-google-tag-manager';

const RootLayout = ({ children }) => (
  <html lang="en">
    <body>
      <GoogleTagManager id="GTM-XXXXX" />
      {children}
    </body>
  </html>
);

Note: This package utilizes next/script, which means you can't place it inside a next/head.

Configuring

To customize the way you load Google Tag Manager, you can pass the following props to the component:

Prop name Type Default value Description
id string - The ID of your Google Tag Manager container
server string www.googletagmanager.com The tagging server that is used, you can configure your own server here or use the default Google Tag Manager server by default. This is used for server side tagging. Please only put the domain, subdomain and top level domain here to make it work correctly.
auth string - Authentication string for the container configuration.
environment string - The environment that is used, see Environments - Tag Manager Help for more information

next-google-tag-manager's People

Contributors

dependabot[bot] avatar github-actions[bot] avatar niels-bosman avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

Forkers

gtsp233

next-google-tag-manager's Issues

What pass to id=""

Hi, could you help me please ? Im trying to connect Google analytics 4 to next 13, analytics gives me ID that looks like this: G-HS93N3XXXX, When I pass it into component in Layout it does not work.

Thanks for advice. :)

Support GTM server-side tagging custom domain and environments

See here.

<head />:

<!-- Google Tag Manager -->
<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=
'<GTM_DOMAIN>/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','<TAG_ID>');</script>
<!-- End Google Tag Manager -->

<body />:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="<GTM_DOMAIN>/ns.html?id=TAG_ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Also, support additional params, than can be atob(container_configuration) from Container Configuration below:

https://tagmanager.google.com/#/admin/accounts/<ACCOUNT_ID>/containers/<CONTAINER_ID>

image

These are: id, env and auth.

An env param stands for the GTM environment and is especially useful for the staging (and others) environment. It is only applicable for the client-side tagging at the moment.

You can find and manage your custom environments here:

https://tagmanager.google.com/#/admin/accounts/<ACCOUNT_ID>/containers/<CONTAINER_ID>/environments

Code snippet:

<head />

<!-- Google Tag Manager -->
<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://${GTM.DOMAIN}/gtm.js?id='+i+dl+ '&gtm_auth=${GTM.AUTH}&gtm_preview=env-${${GTM.ENV}&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${GTM.ID}');</script>
<!-- End Google Tag Manager -->

<body />

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://${GTM.DOMAIN}/ns.html?id=${GTM.ID}&gtm_auth=${GTM.AUTH}&gtm_preview=env-${GTM.ENV}&gtm_cookies_win=x"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

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.