• Overview
• Features
• Development
  • Current Status
  • Prerequisites
  • Frontend (Angular)
  • Backend (NestJS)
  • Electron
  • Storybook
• Build and Production
  • Build
  • Package
  • Make
• Feedback and Contribution

Overall Project Health

Code Quality Metrics

Project Size and Test Coverage

This desktop application automates the Google Tag Manager (GTM) container review process and production analytics deployment validation. It streamlines the quality assurance process by providing:

1. GTM Container Review: Load GTM preview mode, run Chrome recorder, and generate dataLayer correctness reports. Users can review tag configurations through GTM preview mode.
2. Production Analytics Validation: Validate analytics on the production website, ensuring dataLayer accuracy.

Designed for QA, development, and analytics teams, this free standalone tool leverages Angular, NestJS, and Electron.

• Unified JSON Format: Generate GTM-compatible JSON files and run different recorded tests using a consistent specification.

• Video Recording: The entire process is recorded as a .webm video.

• GTM Accompanied Mode: Observe unpublished tags within GTM using a shareable link and the website's landing page.

• Request Capture: Efficiently capture and validate tags automatically. Captured requests are recomposed to data layer object for validation.

• XLSX Report: Test results are encapsulated in an XLSX report, including:

  • Data layer
  • Raw captured requests
  • Reconstructed data layer based on raw captured requests
  • Screenshots of event triggers

• Project Transfer: Archive projects as .zip files for import into other users' applications.

  

This project uses LTS NodeJS v22.19.0 npm v10.9.3 for development. If cannot compile, please run nx reset and rm -rf .nx to reset the project. Please refer to the package.json's engines field for the exact version.

• TagCheck in e2e testing phase and potential minor amendments are mandatory regarding user journey
• TagBuild is already in production stage but subject to change by the Google Tag Manager team.
• Documentation site is already in production stage but subject to change by users' feedback.

%%{init: {'theme': 'neutral'}}%%
graph TD
    subgraph A [User Journey]
        direction LR
        B(Plan & Configure) --> C(Verify & Debug) --> D(Report & Collaborate)
    end

    subgraph Stories_Plan [Stories for Plan & Configure]
        direction TB
        B --> P1("Generate GTM Container from Spec")
        B --> P2("Import Tracking Plan as Spec")
        B --> P3("Import Project File")
    end

    subgraph Stories_Verify [Stories for Verify & Debug]
        direction TB
        C --> V1("Verify Tags in GTM Preview Mode")
        C --> V2("Validate Network Requests (GA4 Hits)")
        C --> V3("Automate Verification via Journey Replay")
    end

    subgraph Stories_Report [Stories for Report & Collaborate]
        direction TB
        D --> R1("Generate Sharable Report")
        D --> R2("Capture Verification Evidence")
        D --> R3("Export Project & Results")
    end

Install dependencies:

npm install -g pnpm

pnpm install

Approve the build for the listed packages warned by pnpm after installation:

pnpm approve-builds

For development:

pnpm run dev-front

For development:

pnpm run dev-back

For Electron development with a development server:

pnpm run dev-electron

For Storybook development:

pnpm run storybook-front

Compile the application:

pnpm run build-prod

Output folders (in dist/apps):

• ng-frontend
• nest-backend

Build the Electron app:

pnpm run package

Output will be in the out folder.

Generate a OS-based zip file:

pnpm run make

The building efficiency depends on the machine performance. The first time running the app usually takes longer.

When debugging with unexpected crashes such as electron-forge make

DEBUG=electron-forge:\* pnpm electron-forge make

The example project is located at the tag_check_projects folder generated the root directory after starting the backend server.

We welcome your feedback and contributions! If you have suggestions or encounter issues, please file them in the issues section.