How is Google Analytics added to NextJS 13?

Unanswered

Giant Angora posted this in #help-forum

Giant AngoraOP

2023-11-03T12:02:41.000Z

I know that in the layout file you can add the metadata with google verifiction ID like this:

export const metadata: Metadata = {
  verification: {
    // INFO: Google Verification ID stored in .env.local
    google: process.env.NEXT_PUBLIC_GOOGLE_CONSOLE,
  },
}

But where is the Google Analytics added?

3 Replies

Red carpenter ant

2023-11-03T12:36:20.000Z

Using next/third-parties if you can use the Tag Manager

https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries

or simply use the <Script/> from next/script

Barbary Lion

2023-11-03T12:59:59.000Z

if u don't want to use tag manager than in _App.js file Head tag add <script> tag with Analytics code.

of if u want to use tagmanager than

<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','YOUr-TAG-MANAGERID')

,
}}
/>

add in <Head> tag

Giant AngoraOP

2023-11-03T13:50:55.000Z

All right maybe [this](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#verification) (other) is the answer. Will check it out and then confirm:

export const metadata = {
  verification: {
    google: 'google',
    yandex: 'yandex',
    yahoo: 'yahoo',
    other: {
      me: ['my-email', 'my-link'],
    },
  },
}