Integrating Google Scripts

This guide provides the optimal methods for adding Google Search Console, Google Tag Manager, and Google AdSense to the Ncmaz Faust Next.js 14 project. We will primarily use the built-in next/script component for performance.

🚀 Recommended: Google Tag Manager (GTM) Setup

The most flexible and recommended approach is to install Google Tag Manager. This allows you to manage all other scripts (like Analytics, AdSense, etc.) from the GTM dashboard without needing to edit your code again.

The best place to add global scripts is in your custom pages/_app.js or pages/_app.tsx file.

Instructions:

Go to the file pages/_app.tsx.
Import the Script component from next/script.
Add the GTM scripts as shown below.

// pages/_app.tsx

import type { AppProps } from 'next/app';
import Script from 'next/script';
import '../styles/globals.css'; // Your global styles

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      {/* Google Tag Manager - Main Script */}
      <Script
        id="google-tag-manager"
        strategy="afterInteractive" // Load after the page is interactive
        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');
          `,
        }}
      />

      <Component {...pageProps} />

      {/* Google Tag Manager - noscript fallback */}
      <noscript>
        <iframe
          src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
          height="0"
          width="0"
          style={{ display: 'none', visibility: 'hidden' }}
        ></iframe>
      </noscript>
    </>
  );
}

export default MyApp;

Key Points:

Replace GTM-XXXXXXX with your actual GTM Container ID.
strategy="afterInteractive": This is crucial. It tells Next.js to load the GTM script after the page becomes interactive, ensuring it doesn't block the initial page render and preserving your site's performance (LCP/FCP).

📢 Google AdSense Implementation

If you are not using GTM, you can add the AdSense script directly. The ideal location is also in pages/_app.tsx to ensure it's available on all pages where ads might be displayed.

Instructions:

Place the next/script component for AdSense inside the <Head> component of your pages/_app.tsx.

// pages/_app.tsx
import type { AppProps } from 'next/app';
import Head from 'next/head';
import Script from 'next/script';
import '../styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>My Awesome Next.js App</title>
        {/* Add other head elements here */}
      </Head>

      {/* Google AdSense Script */}
      <Script
        id="google-adsense"
        async
        strategy="afterInteractive"
        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
        crossOrigin="anonymous"
        onError={(e) => {
          console.error('AdSense script failed to load', e);
        }}
      />

      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Key Points:

Replace ca-pub-XXXXXXXXXXXXXXXX with your AdSense publisher ID.
The afterInteractive strategy is again recommended to prevent any negative impact on your page load speed.

✅ Google Search Console Verification

The most common way to verify your site with Google Search Console is by adding a meta tag to your site's homepage. For site-wide verification, place it in pages/_app.tsx.

Instructions:

Import the Head component from next/head.
Add the verification <meta> tag inside the <Head> component.

// pages/_app.tsx
import type { AppProps } from 'next/app';
import Head from 'next/head';
import '../styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>My Awesome Next.js App</title>
        
        {/* Google Search Console Verification */}
        <meta 
          name="google-site-verification" 
          content="YOUR_GOOGLE_VERIFICATION_CODE" 
        />
      </Head>
      
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Key Points:

Replace YOUR_GOOGLE_VERIFICATION_CODE with the unique content string provided by Google Search Console.
Since this is a simple meta tag with no script to execute, using the standard next/head component is perfectly fine and correct.

PreviousSite Settings JSON NextProject initiation

Last updated 1 month ago

Was this helpful?