DEV Community: Marco Valsecchi

How to setup Google Tag Manager in a Next 13 App Router website

Marco Valsecchi — Tue, 21 Mar 2023 21:37:56 +0000

Recently I finished a brand new Next.js 13 website using the latest App Router solution (I know that is not production ready but I love to learn new things by real projects) and before to go live I setup a new Google Tag Manager with all the needed tags... but how to add it to the new app directory?

Inspired by the new @vercel/analytics react component, I've added one in my layout.tsx root component called Analytics:

// layout.tsx
<html lang="it">
<body>
    <Suspense>
        <Analytics />
    </Suspense>
    ...
</body>

I wrapped it in a Suspense boundary to avoid the "deopted into client-side rendering" error for my static pages.

And this is its content:

// Analytics.tsx
"use client"

import { GTM_ID, pageview } from "lib/gtm"
import { usePathname, useSearchParams } from "next/navigation"
import Script from "next/script"
import { useEffect } from "react"

export default function Analytics() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    if (pathname) {
      pageview(pathname)
    }
  }, [pathname, searchParams])

  if (process.env.NEXT_PUBLIC_VERCEL_ENV !== "production") {
    return null
  }

  return (
    <>
      <noscript>
        <iframe
          src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
          height="0"
          width="0"
          style={{ display: "none", visibility: "hidden" }}
        />
      </noscript>
      <Script
        id="gtm-script"
        strategy="afterInteractive"
        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_ID}');
  `,
        }}
      />
    </>
  )
}

The idea is similar to the with-google-tag-manager example with the pages solution.

Instead of using both the custom _document.tsx and the _app.tsx files I added all the configuration in our client component and thanks to the native Script tag, GTM is visible everywhere but loaded once after the required scripts.
The next views are triggered on page change event and in the new approach this is achieved monitoring the current pathname (and the searchParams too if needed).

This is my TypeScript version of the original lib/gtm library:

// lib/gtm.ts
type WindowWithDataLayer = Window & {
  dataLayer: Record<string, any>[]
}

declare const window: WindowWithDataLayer

export const GTM_ID = process.env.NEXT_PUBLIC_GTM

export const pageview = (url: string) => {
  if (typeof window.dataLayer !== "undefined") {
    window.dataLayer.push({
      event: "pageview",
      page: url,
    })
  } else {
    console.log({
      event: "pageview",
      page: url,
    })
  }
}

I just added a check for the dataLayer variable so you can use it during the development too, logging the event in the console for example.

And that's all... now you're ready to test and publish your GTM configuration and collect all your user views ;)

Create sitemaps for a multi-language, multi-domain, URL-translated, static Next.js site

Marco Valsecchi — Wed, 19 Oct 2022 00:37:10 +0000

Yes, I know the title post is a bit long 😅 but each listed feature is necessary to understand the solution that I adopted to achieve my goal: create a sitemap file for each of my domains pointing to a single multilingual, static, URL-translated Next.js site.

Why static?

First of all, I 💘 the jamstack architecture that solves so many problems in such simple ways... and that is why in this context I speak of a static site: all pages are pre-generated at build time (known as SSG).

Multi-language

Next.js give us a basic but powerful i18n support with two strategies: sub-path routing (example.com/it, example.com/en) and domain routing (example.it, example.com): I chose the last one, but you can adopt this solution also for the first strategy easily.

URLs translated

Translate the URLs too in my opinion is a killer SEO feature but, at the moment, is not so simple support it in a Next.js site: there are many solutions which vary by your data source (headless CMS, file system based, ...) but the important thing is that in your final build you'll have each page collected for its localization code:

.next/server/pages/it/chi-siamo.html
.next/server/pages/en/about-us.html

Thanks to one of Lee Robinson's post I have found a suggestion for an efficient way to generate all the necessary sitemap files without further queries or REST calls or server requests, but simply by looking in the created .next directory (instead of in the pages folder as in the original post).

import { writeFileSync } from "fs"
import { globby } from "globby"
import prettier from "prettier"

async function generate() {
  ;["it", "en"].forEach(async (lang) => {
    const pages = await globby([
      `.next/server/pages/${lang}/**/*.html`,
      `!.next/server/pages/${lang}/404.html`,
      `!.next/server/pages/${lang}/500.html`      
    ])

    const siteUrl = lang === "it" ? "https://example.it" : "https://example.com"

    const sitemap = `
    <?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        <url>
            <loc>${siteUrl}</loc>            
            <lastmod>${new Date().toISOString()}</lastmod>
        </url>
        ${pages
          .map((page) => {
            const route = page.replace(`.next/server/pages/${lang}`, "").replace(".html", "")

            return `<url>
                  <loc>${siteUrl}${route}</loc>
                  <lastmod>${new Date().toISOString()}</lastmod>                  
              </url>
            `
          })
          .join("")}
    </urlset>
    `

    const formatted = prettier.format(sitemap, {
      parser: "html",
    })

    writeFileSync(`public/sitemap-${lang}.xml`, formatted)
  })
}

generate()

Executing the generate-sitemap.mjs script in the postbuild step as described in the linked post, we'll have at the end two (or more as your site's language 😏) xml sitemap file:

example.com/sitemap-en.xml
example.it/sitemap-it.xml

Usually with a non-localized site I'm very happy to use the next-sitemap library but for a specific case like this I think that rolling up your sleeves is always the best solution 😉

How to add Google Analytics gtag to Next.js using Partytown 🎉

Marco Valsecchi — Tue, 29 Mar 2022 00:00:49 +0000

First of all I'd like to thank you Paul Scanlon of Gatsby for his article that helped me a lot 🙏.

You had just finished your super fast Next.js website, all the performance metrics point to the higher level but then you have to add Google Analytics and the dream to get the PageSpeed Insights' fireworks become impossible to achieve... this message sounds familiar right 😭:

Reduce the impact of third-party code

Who you gonna call? Partytown 🎉
Yes, with this incredible library you can "delegate" the execution of the external scripts like analytics to a service worker, reducing the impact of third-party code!

Ok we can start from the example found on the Next.js canary branch creating a new Next.js application along with Google Analytics:

yarn create next-app --example with-google-analytics with-google-analytics-app

Now it's the Partytown turn; in the 12.1.1 version Next.js add an experimental support to its Script component: the worker strategy. Thanks to this native implementation you can add Partytown easily to your Next.js project.

As any experimental feature you must enable it in the nextjs.config.js file:

module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

Then, to complete the setup, you need to add the Partytown library to your dependencies with your favorite package manager:

yarn add @builder.io/partytown

How to move the Google Analytics execution to the service worker?
We need to open the _app.js file on the pages folder and make some edit:

first of all we need to change the strategy for the Universal Site Tag with the worker one

<Script
   strategy="worker"
   src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
/>

then change the inline script with this one:

 <script
    type="text/partytown"
    dangerouslySetInnerHTML={{
        __html: `
            window.dataLayer = window.dataLayer || [];
            window.gtag = function gtag(){window.dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', '${gtag.GA_TRACKING_ID}', { 
                page_path: window.location.pathname,
            });
        `,
    }}
/>

I'd like to use the Script component for the second script too but I think that is not supported yet so I used a "normal" script tag but with the custom type "text/partytown".

This code seems like the original one from the Google guide but there is a little difference:

- function gtag(){window.dataLayer.push(arguments);}
+ window.gtag = function gtag(){window.dataLayer.push(arguments);}

Defining the gtag as a global function we can let Partytown to reference it. We just need to create a custom document page and adding this script in the Head component:

<script
    data-partytown-config
    dangerouslySetInnerHTML={{
      __html: `
          partytown = {
            lib: "/_next/static/~partytown/",
            forward: ["gtag"]           
          };
        `,
    }}
/>

With these simple steps now we have a fully Google Analytics support in our Next.js app... but executed in a separated service worker 🚀

Next.js on-demand ISR by Sanity GROQ-powered webhooks

Marco Valsecchi — Fri, 18 Feb 2022 00:29:27 +0000

With the latest Next.js 12.1 version finally we got one of the most powerful missing feature: on-demand ISR 😮!

Thanks to this you can revalidate your SSG pages on the fly without rebuild all the site or without waiting the scheduled time set in the revalidate option as we were used to until today.

I love Sanity as headless CMS for its user friendly studio and for the power of its tools and plugins; I used to install the sanity-plugin-vercel-deploy plugin, very useful to update my SSG sites hosted on Vercel but this was meaning trigger a new build and redeploy all the entire site (I never used ISR with its revalidate option because, on bigger sites, the build cost would be too high).

One of the Sanity great feature is how they manage webhooks: you can trigger an URL after you edit your data specifying which document type and what send as payload, simply querying your database with its GROQ query language!

Now you can add a new API URL in your Next.js web app to revalidate your page content on-demand and request it by the Sanity webhook trigger 🤩.

For example, in your blog, imagine to fix a post typo on the Sanity studio and, after less a second, see your edit live. Cool right? First of all you need to add a new API endpoint on your web app, adding a file like this on the pages/api folder (yes I 🥰 TypeScript too):

import { isValidRequest } from "@sanity/webhook"
import type { NextApiRequest, NextApiResponse } from "next"

type Data = {
  message: string
}

const secret = process.env.SANITY_WEBHOOK_SECRET

export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
  if (req.method !== "POST") {
    console.error("Must be a POST request")
    return res.status(401).json({ message: "Must be a POST request" })
  }

  if (!isValidRequest(req, secret)) {
    res.status(401).json({ message: "Invalid signature" })
    return
  }

  try {
    const {
      body: { type, slug },
    } = req

    switch (type) {
      case "post":
        await res.revalidate(`/news/${slug}`)
        return res.json({ message: `Revalidated "${type}" with slug "${slug}"` })
    }

    return res.json({ message: "No managed type" })
  } catch (err) {
    return res.status(500).send({ message: "Error revalidating" })
  }
}

In this function I accept a POST request with a type and a slug as payload; there are three main points to pay attention:

validate the Sanity webhook secret, so we are safe to accept the request
call the revalidate method passing the path that we need to purge as the argument
set the useCdn Sanity client option to false to allow to get fresh content after the revalidate call (the webhook is too fast 😅)

This is how I set my Sanity webhook:

I chosen to send the document type on the payload so I can manage the revalidate with a unique endpoint but you are free to follow your best needs.

This new Next.js feature is the beginning of a new era:

you don't need to SSR your pages but keep them on your CDN, with no power consumption 💚 and #JAMstack compliant
updates will be immediately online, no more building wait time
your editors will be happy to preview, publish and check contents on the fly!

Thanks Vercel 🔼!