Breaking News: Grepper is joining You.com. Read the official announcement!

how can i add google tag in nextjs application?

Amjad Saeed answered on October 9, 2021 Popularity 9/10 Helpfulness 4/10

answer how can i add google tag in nextjs application?

related add google tag manager to next js

how can i add google tag in nextjs application?

Comment

To add Google Tag Manager (GTM) to your Next.js application, you can follow these steps:

Sign in to your Google Tag Manager account and create a new container.

Copy the container ID that you receive after creating the container.

In your Next.js application, create a new file in the pages directory called _document.js. This file is responsible for customizing the HTML document that Next.js generates.

In the _document.js file, import Head and Html from the next/document module:


import Document, { Html, Head, Main, NextScript } from 'next/document';



Add the following code inside the Head component to insert the GTM script:


<Head>
  <script
    dangerouslySetInnerHTML={{
      __html: `
        <!-- 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://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','${YOUR_CONTAINER_ID}');</script>
        <!-- End Google Tag Manager -->
      `
    }}
  />
</Head>



Make sure to replace ${YOUR_CONTAINER_ID} with the container ID you copied in step 2.

Add the following code inside the body tag to insert the GTM noscript:


<body>
  <noscript>
    <iframe
      src={`https://www.googletagmanager.com/ns.html?id=${YOUR_CONTAINER_ID}`}
      height="0"
      width="0"
      style={{ display: 'none', visibility: 'hidden' }}
    ></iframe>
  </noscript>
  <Main />
  <NextScript />
</body>



Again, make sure to replace ${YOUR_CONTAINER_ID} with the container ID you copied in step 2.

Save the _document.js file and restart your Next.js application.
Your application should now have Google Tag Manager set up and ready to go!

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: add javascript

Link to this answer
Share Copy Link

Contributed on Feb 22 2023

Amjad Saeed

0 Answers Avg Quality 2/10

Closely Related Answers

add google tag manager to next js

Comment

<script 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-XXXXXXX');`}}></script>

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.learnbestcoding.com

Tags: add

Link to this answer
Share Copy Link

Contributed on Oct 09 2021

Sparkling Sandpiper

0 Answers Avg Quality 2/10

how can i add google tag in nextjs application?

Contents

More Related Answers

how can i add google tag in nextjs application?

Closely Related Answers

add google tag manager to next js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.