https://github.com/wodenwang820118/tag-check
A Google Tag Manager tag audit/preview automation tool
https://github.com/wodenwang820118/tag-check
angular audit automation electron ga4 googletagmanager nestjs nx
Last synced: 2 months ago
JSON representation
A Google Tag Manager tag audit/preview automation tool
- Host: GitHub
- URL: https://github.com/wodenwang820118/tag-check
- Owner: WodenWang820118
- License: mit
- Created: 2023-08-24T05:19:18.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2026-02-05T07:32:16.000Z (4 months ago)
- Last Synced: 2026-02-05T19:39:27.589Z (4 months ago)
- Topics: angular, audit, automation, electron, ga4, googletagmanager, nestjs, nx
- Language: TypeScript
- Homepage: https://tag-build.vercel.app
- Size: 188 MB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# TagCheck (Preview)
## Table of Contents
- [Overview](#overview)
- [Features](#features)
- [Development](#development)
- [Current Status](#current-status)
- [Prerequisites](#prerequisites)
- [Frontend (Angular)](#frontend-angular)
- [Backend (NestJS)](#backend-nestjs)
- [Electron](#electron)
- [Storybook](#storybook)
- [Build and Production](#build-and-production)
- [Build](#build)
- [Package](#package)
- [Make](#make)
- [Feedback and Contribution](#feedback-and-contribution)
Overall Project Health
[](https://sonarcloud.io/summary/new_code?id=WodenWang820118_tag-check)
[](https://sonarcloud.io/summary/new_code?id=WodenWang820118_tag-check)
[](https://sonarcloud.io/summary/new_code?id=WodenWang820118_tag-check)
Code Quality Metrics
[](https://sonarcloud.io/summary/new_code?id=WodenWang820118_tag-check)
[](https://sonarcloud.io/summary/new_code?id=WodenWang820118_tag-check)
[](https://sonarcloud.io/summary/new_code?id=WodenWang820118_tag-check)
Project Size and Test Coverage
[](https://sonarcloud.io/summary/new_code?id=WodenWang820118_tag-check)
[](https://sonarcloud.io/summary/new_code?id=WodenWang820118_tag-check)
## Overview
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.
## Features
- **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.
## Development
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.
### Current Status
- TagCheck in e2e testing phase and potential minor amendments are mandatory regarding user journey
- TagBuild is already in [production stage](https://tag-build.vercel.app/) but subject to change by the Google Tag Manager team.
- Documentation site is already in [production stage](https://tag-check-documentation.vercel.app/) but subject to change by users' feedback.
```mermaid
%%{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
```
### Prerequisites
Install dependencies:
```bash
npm install -g pnpm
```
```bash
pnpm install
```
Approve the build for the listed packages warned by pnpm after installation:
```bash
pnpm approve-builds
```
### Frontend (Angular)
For development:
```bash
pnpm run dev-front
```
### Backend (NestJS)
For development:
```bash
pnpm run dev-back
```
### Electron
For Electron development with a development server:
```bash
pnpm run dev-electron
```
### Storybook
For Storybook development:
```bash
pnpm run storybook-front
```
## Build and Production
### Build
Compile the application:
```bash
pnpm run build-prod
```
Output folders (in `dist/apps`):
- `ng-frontend`
- `nest-backend`
### Package
Build the Electron app:
```bash
pnpm run package
```
Output will be in the `out` folder.
### Make
Generate a OS-based zip file:
```bash
pnpm run make
```
The building efficiency depends on the machine performance. The first time running the app usually takes longer.
### Debugging
When debugging with unexpected crashes such as `electron-forge make`
```bash
DEBUG=electron-forge:\* pnpm electron-forge make
```
### Actual project and end-to-end tests
The example project is located at the `tag_check_projects` folder generated the root directory after starting the backend server.
## Feedback and Contribution
We welcome your feedback and contributions! If you have suggestions or encounter issues, please file them in the issues section.