Stats

NextWeb.js supports Google Tag Manager out of the box. Let's start with the configuration.

Configuration

First, you have to define your Google Tag Manager container ID.

// .env

GTM_CONTAINER_ID=GTM-XXXXXXX

Then you have to set the name of variables you used in Google Tag Manager. Please note that custom dimensions are optional.

// src/lib/stats/gtm/index.js

const variableNames = {
  event: {
    category: 'eventCategory',
    action: 'eventAction',
    label: 'eventLabel',
    value: 'eventValue',
  },
}

// Only if you have some custom dimensions
const initialCustomDimensions = {
  customDM1: undefined,
  customDM2: undefined,
  dimension1: undefined,
  dimension2: undefined,
}

Page Tracking

The page tracking will work automatically if you finished your configuration properly. Let's change to another page and see the network.

Custom Dimensions

But if you want to attach some custom dimensions to the page tracking, you have to add the stats.gtm.customDimensions property to the returning object from getInitialProps().

import withPage from '@lib/page/withPage'
import * as ArticleService from '@features/article/data/services'

function ArticleDetailPage({ articleDetail }) {
  ...
}

ArticleDetailPage.getInitialProps = async ({ asPath, query }) => {
  const articleDetail = await ArticleService.getArticleDetail({ id: query.id })

  return {
    articleDetail,

    // Define custom dimensions for the page tracking here...
    stats: {
      gtm: {
        customDimensions: {
          customDM1: articleDetail.author.name,
          customDM2: articleDetail.pubDate,
        },
      },
    },
  }
}

export default withPage()(ArticleDetailPage)

Event Tracking

This is very straightforward, just import the GTM.logEvent helper and call it with appropriate values.

import * as GTM from '@lib/stats/gtm'

const trackEvent = (e) => {
  GTM.logEvent({
    category: 'Navigation',
    action: 'Clicked',
    label: 'Some Menu',

    // custom dimensions
    dimension1: 'value 1',
    dimension2: 'value 2',
  })
}

Please note that if you want to attach some custom dimensions to the event, just add them to the argument.