Overview:

The @nuxtjs/gtm is a Google Tag Manager module specifically designed for Nuxt.js, which is a framework for building server-side rendered Vue.js applications. The module allows for easy integration of Google Tag Manager into Nuxt.js projects, providing a streamlined way to add tracking and analytics functionality. With @nuxtjs/gtm, developers can easily add, configure, and manage their Google Tag Manager setup within their Nuxt.js projects.

Features:

• Google Tag Manager Integration: The @nuxtjs/gtm module enables the integration of Google Tag Manager into Nuxt.js projects, allowing for easy tracking and analytics implementation.
• Runtime Config Support: The module supports the use of runtime config, allowing for dynamic environment variables to be used in production.
• Manual GTM Initialization: The @nuxtjs/gtm module provides options for more control over initialization, such as blocking Google Tag Manager before user permission, setting dynamic ID based on request path or domain, initializing with multiple containers, and enabling GTM on a page-level basis.
• Router Integration: The module offers router integration, with the option to track page views by setting the pageTracking option to true.
• Event Tracking: Developers can easily push events into the configured layer, allowing for custom event tracking.

Installation:

To install the @nuxtjs/gtm module, follow these steps:

1. Add the @nuxtjs/gtm dependency to your project by running the following command:

npm install @nuxtjs/gtm

2. Add @nuxtjs/gtm to the modules section of your nuxt.config.js file:

modules: [
  '@nuxtjs/gtm',
],

3. Configure the module according to your needs in the nuxt.config.js file. You can set options such as enabled (to enable or disable the module), debug (whether $gtm API calls are logged to the console), pageTracking (to enable tracking of page views), and more.

4. If you need to use dynamic environment variables in production, you can utilize the runtime config feature. This allows you to set options dynamically during runtime, rather than hardcoding them during the build process. Refer to the documentation for more information on how to use runtime config.

5. Start your Nuxt.js application and verify that the Google Tag Manager integration is working as expected.

Summary:

The @nuxtjs/gtm module provides seamless integration of Google Tag Manager into Nuxt.js projects, allowing developers to easily add tracking and analytics functionality. With features such as runtime config support, manual GTM initialization options, router integration, and event tracking, the module offers flexibility and control over the Google Tag Manager setup. By following the installation guide, developers can quickly and efficiently implement the @nuxtjs/gtm module into their Nuxt.js projects and start harnessing the power of Google Tag Manager.