Nuxt Gtag

Abstract

1. Introduction

Google Analytics, Google Ads and Consent Mode v2 for Nuxt, through Google's own gtag.js.

2. Objective

🔸 Google Analytics, Google Ads and Consent Mode v2 for Nuxt

This project demonstrates how TypeScript can be applied to a real-world Digital Marketing & SEO problem.

3. Key Features / Modules

• Loads no tracking library of its own, only Google's gtag.js
• Use Google Analytics 4, Google Ads and other products
• Supports Google Consent Mode v2
• Manually initialize a Google tag
• Supports multiple tag IDs
• Track events with composables
• Fully typed gtag.js API
• SSR-ready

4. Technology Stack

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm / yarn / pnpm
• VS Code or any code editor
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/johannschopplich/nuxt-gtag.git
cd nuxt-gtag

npx nuxt module add gtag

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-gtag'],

  gtag: {
    id: 'G-XXXXXXXXXX'
  }
})

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Export reports to Google Sheets or PDF
• Schedule weekly automated reports
• Add competitor comparison

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Which marketing or SEO problem does this tool solve?
2. Which data sources or APIs does it use (Search Console, Analytics, social platforms)?
3. Which metrics or KPIs does it report and how are they calculated?
4. How could the output help a business make decisions?
5. How would you schedule it to run automatically?

9. Source Code & License

This project is developed by johannschopplich and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.