GA Event Autogen

Auto generation tool for Google Analytics Event with TypeScript Compiler API.

This tool converts yaml to ts file.

Run this command below and types.ts will generate from events.yaml.

$ yarn convert

# input (events.yaml)
- name: ConvertStart
  property:
    action: 'convert_start'
    category: 'convert'

- name: ConvertEnd
  property:
    action: 'convert_end'
    category: 'convert'

- name: ConvertError
  property:
    action: 'convert_error'
    category: 'convert'

// output (types.ts)
type ConvertStart = {
    action: "convert_start";
    category: "convert";
};

type ConvertEnd = {
    action: "convert_end";
    category: "convert";
};

type ConvertError = {
    action: "convert_error";
    category: "convert";
};

export type Event = (ConvertStart | ConvertEnd | ConvertError) & {
  label?: Record<string, string | number | boolean>;
  value?: string;
}

You don't need to define Google Analytics Event type manually.

import { Event } from './types.ts'

export const GA_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || ''
export const existsGaId = GA_ID !== ''

export const pageview = (path: string) => {
  window.gtag('config', GA_ID, {
    page_path: path,
  })
}

export const event = ({ action, category, label, value = '' }: Event) => {
  if (!existsGaId) {
    return
  }

  window.gtag('event', action, {
    event_category: category,
    event_label: label ? JSON.stringify(label) : '',
    value,
  })
}

If you want to check the whole code, see my blog post -> Next.jsでGoogle Analyticsを使えるようにする.