npm - gbu-accessibility-package - Versions diffs - 3.8.8 → 3.9.0 - Mend

gbu-accessibility-package 3.8.8 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README-vi.md CHANGED Viewed

@@ -25,6 +25,7 @@ gbu-a11y --forms-only        # Sửa form labels + dọn dẹpio/js/gbu-accessib
 - 🎯 **Nested Controls Detection** - Phát hiện và sửa các control tương tác lồng nhau
 - 🔍 **Broken Links Detection** - Phát hiện liên kết external bị hỏng
 - 📁 **404 Resources Detection** - Phát hiện tài nguyên local bị thiếu (hình ảnh, CSS, JS, v.v.)
+- 🏷️ **Kiểm tra Google Tag Manager** - Xác thực cài đặt GTM (script + noscript)
 - 🗂️ **Unused Files Detection** - Tìm file không được tham chiếu ở đâu trong dự án
 - ☠️ **Dead Code Analysis** - Phát hiện CSS rules và JavaScript functions không sử dụng
 - 📏 **File Size Analysis** - Kiểm tra dung lượng file và đề xuất tối ưu hóa
@@ -162,6 +163,7 @@ Chế độ sửa lỗi:
   --links-check            Kiểm tra liên kết bị hỏng và tài nguyên 404 (toàn diện, không tự động sửa)
   --broken-links           Chỉ kiểm tra liên kết external bị hỏng (không tự động sửa)
   --404-resources          Chỉ kiểm tra tài nguyên local bị thiếu (không tự động sửa)
+  --gtm-check              Kiểm tra cài đặt Google Tag Manager (không tự động sửa)
   --unused-files           Kiểm tra file không sử dụng trong dự án
   --dead-code              Kiểm tra dead code trong CSS và JavaScript
   --file-size, --size-check Kiểm tra dung lượng file và đề xuất tối ưu hóa
@@ -199,6 +201,7 @@ gbu-a11y --headings-only --auto-fix-headings  # Tự động sửa heading struc
 gbu-a11y --links-check       # Kiểm tra liên kết bị hỏng và tài nguyên thiếu + dọn dẹp
 gbu-a11y --broken-links      # Chỉ kiểm tra liên kết external bị hỏng + dọn dẹp
 gbu-a11y --404-resources     # Chỉ kiểm tra tài nguyên local bị thiếu + dọn dẹp
+gbu-a11y --gtm-check         # Kiểm tra cài đặt Google Tag Manager
 gbu-a11y --unused-files      # Kiểm tra file không sử dụng trong dự án
 gbu-a11y --dead-code         # Kiểm tra dead CSS và JavaScript code
 gbu-a11y --file-size         # Kiểm tra dung lượng file và đề xuất tối ưu hóa
@@ -373,12 +376,103 @@ await fixer.checkFileSizes('./src');
   - JavaScript functions không bao giờ được gọi trong toàn bộ codebase
   - Variables được khai báo nhưng không sử dụng
   - Smart skipping các patterns động và third-party code
+- **Kiểm tra Google Tag Manager** → Xác thực cài đặt GTM
+  - Phát hiện GTM script trong phần `<head>`
+  - Xác minh noscript fallback trong phần `<body>`
+  - Kiểm tra tính nhất quán của container ID
+  - Xác thực vị trí đặt đúng của cả hai đoạn mã
+  - Báo cáo: cài đặt hoàn chỉnh, thiếu thành phần, vấn đề vị trí
 - **Phân tích dung lượng file** → Kiểm tra kích thước file và đề xuất tối ưu hóa
   - Phát hiện file lớn vượt ngưỡng khuyến nghị
   - Đề xuất tối ưu hóa theo từng loại file (hình ảnh, CSS, JS, v.v.)
   - Thống kê dung lượng theo loại file
   - Top 10 file có dung lượng lớn nhất
+## 🏷️ Xác thực Google Tag Manager
+Tính năng `--gtm-check` xác thực cài đặt Google Tag Manager đúng cách trong toàn bộ dự án của bạn.
+### Những gì được kiểm tra
+1. **Script trong `<head>`**: Xác minh GTM script có mặt trước thẻ đóng `</head>`
+2. **Noscript trong `<body>`**: Xác nhận noscript fallback ngay sau thẻ mở `<body>`
+3. **Container ID**: Đảm bảo cả hai đoạn mã sử dụng cùng GTM container ID (định dạng: GTM-XXXXXX)
+4. **Xác thực vị trí**: Kiểm tra vị trí tối ưu của cả hai đoạn mã
+### Cách sử dụng
+```bash
+# Kiểm tra cài đặt GTM trong toàn bộ dự án
+gbu-a11y --gtm-check
+# Kiểm tra thư mục cụ thể
+gbu-a11y --gtm-check ./public
+# Các lệnh thay thế
+gbu-a11y --check-gtm
+gbu-a11y --google-tag-manager
+```
+### Ví dụ kết quả
+```
+🏷️ Đang kiểm tra cài đặt Google Tag Manager (GTM)...
+📁 public/index.html:
+  ✅ GTM Container ID: GTM-ABC1234
+  ✅ Script trong head: Đã đặt đúng vị trí trước </head>
+  ✅ Noscript trong body: Đã đặt đúng vị trí sau <body>
+📁 public/about.html:
+  ✅ GTM Container ID: GTM-ABC1234
+  ✅ Script trong head: Đã đặt đúng vị trí trước </head>
+  ❌ Noscript trong body: Thiếu sau thẻ <body>
+  ❌ Thiếu GTM Noscript: Tìm thấy GTM script nhưng thiếu noscript dự phòng trong <body>
+    💡 Thêm đoạn mã GTM noscript ngay sau thẻ mở <body>
+📊 Tóm tắt: Đã phân tích 2 file
+  ✅ File có GTM: 2
+  ⚠️ File có vấn đề về GTM: 1
+💡 GTM cần có cả <script> trong <head> và <noscript> sau <body>
+```
+### Yêu cầu cài đặt GTM
+Để cài đặt GTM đúng cách, mỗi trang cần có:
+1. **Đoạn mã script trong `<head>`**:
+```html
+<head>
+  <!-- Google Tag Manager -->
+  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
+  <!-- End Google Tag Manager -->
+</head>
+```
+2. **Đoạn mã noscript ngay sau `<body>`**:
+```html
+<body>
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->
+  <!-- Nội dung trang của bạn -->
+</body>
+```
+### Các vấn đề thường gặp được phát hiện
+- ❌ **Thiếu Script**: Không tìm thấy GTM script trong `<head>`
+- ❌ **Thiếu Noscript**: Không tìm thấy noscript fallback sau `<body>`
+- ⚠️ **Vị trí sai**: Script hoặc noscript không ở vị trí tối ưu
+- ❌ **ID không khớp**: Container ID khác nhau giữa script và noscript
+- ⚠️ **Cài đặt không đầy đủ**: Chỉ có một trong hai đoạn mã bắt buộc
 ## 🔧 Quản lý Package
 ### Kiểm tra thông tin package

package/README.md CHANGED Viewed

@@ -22,6 +22,7 @@
 - 🎯 **Nested Controls Detection** - Detect and fix nested interactive controls
 - 🔍 **Broken Links Detection** - Detect broken external links
 - 📁 **404 Resources Detection** - Detect missing local resources (images, CSS, JS, etc.)
+- 🏷️ **Google Tag Manager Check** - Validate GTM installation (script + noscript)
 - 🗂️ **Unused Files Detection** - Find files not referenced anywhere in the project
 - ☠️ **Dead Code Analysis** - Detect unused CSS rules and JavaScript functions
 - 📏 **File Size Analysis** - Check file sizes and suggest optimizations
@@ -154,9 +155,10 @@ Fix Modes:
   --landmarks-only         Fix landmarks + cleanup
   --headings-only          Analyze heading structure with optional auto-fix
   --auto-fix-headings      Enable automatic heading structure fixes
-    --links-check            Check for broken links and 404 resources (comprehensive, no auto-fix)
+  --links-check            Check for broken links and 404 resources (comprehensive, no auto-fix)
   --broken-links           Check for broken external links only (no auto-fix)
   --404-resources          Check for missing local resources only (no auto-fix)
+  --gtm-check              Check Google Tag Manager installation (no auto-fix)
   --unused-files           Check for unused files in project
   --dead-code              Check for dead code in CSS and JavaScript
   --file-size, --size-check Check file sizes and suggest optimizations
@@ -195,6 +197,7 @@ gbu-a11y --headings-only --auto-fix-headings  # Auto-fix heading structure
 gbu-a11y --links-check       # Check broken links and missing resources + cleanup
 gbu-a11y --broken-links      # Check broken external links only + cleanup
 gbu-a11y --404-resources     # Check missing local resources only + cleanup
+gbu-a11y --gtm-check         # Check Google Tag Manager installation
 gbu-a11y --unused-files      # Check for unused files in project
 gbu-a11y --dead-code         # Check for dead CSS and JavaScript code
 gbu-a11y --file-size         # Check file sizes and suggest optimizations
@@ -357,12 +360,103 @@ await fixer.checkFileSizes('./src');
   - JavaScript functions never called
   - Variables declared but never used
   - Smart skipping of dynamic patterns
+- **Google Tag Manager Check** → Validate GTM installation
+  - Detect GTM script in `<head>` section
+  - Verify noscript fallback in `<body>` section
+  - Check container ID consistency
+  - Validate proper positioning of both snippets
+  - Reports: complete installation, missing components, position issues
 - **File Size Analysis** → Check file sizes and suggest optimizations
   - Detect large files exceeding recommended thresholds
   - Type-specific optimization suggestions (images, CSS, JS, etc.)
   - File size breakdown by type
   - Top 10 largest files reporting
+## 🏷️ Google Tag Manager Validation
+The `--gtm-check` feature validates proper Google Tag Manager installation across your project.
+### What It Checks
+1. **Script in `<head>`**: Verifies GTM script is present before `</head>` closing tag
+2. **Noscript in `<body>`**: Confirms noscript fallback is immediately after `<body>` opening tag
+3. **Container ID**: Ensures both snippets use the same GTM container ID (format: GTM-XXXXXX)
+4. **Position Validation**: Checks optimal placement of both code snippets
+### Usage
+```bash
+# Check GTM installation in entire project
+gbu-a11y --gtm-check
+# Check specific directory
+gbu-a11y --gtm-check ./public
+# Alternative commands
+gbu-a11y --check-gtm
+gbu-a11y --google-tag-manager
+```
+### Example Output
+```
+🏷️ Đang kiểm tra cài đặt Google Tag Manager (GTM)...
+📁 public/index.html:
+  ✅ GTM Container ID: GTM-ABC1234
+  ✅ Script trong head: Đã đặt đúng vị trí trước </head>
+  ✅ Noscript trong body: Đã đặt đúng vị trí sau <body>
+📁 public/about.html:
+  ✅ GTM Container ID: GTM-ABC1234
+  ✅ Script trong head: Đã đặt đúng vị trí trước </head>
+  ❌ Noscript trong body: Thiếu sau thẻ <body>
+  ❌ Thiếu GTM Noscript: Tìm thấy GTM script nhưng thiếu noscript dự phòng trong <body>
+    💡 Thêm đoạn mã GTM noscript ngay sau thẻ mở <body>
+📊 Tóm tắt: Đã phân tích 2 file
+  ✅ File có GTM: 2
+  ⚠️ File có vấn đề về GTM: 1
+💡 GTM cần có cả <script> trong <head> và <noscript> sau <body>
+```
+### GTM Installation Requirements
+For proper GTM installation, each page should have:
+1. **Script snippet in `<head>`**:
+```html
+<head>
+  <!-- Google Tag Manager -->
+  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
+  <!-- End Google Tag Manager -->
+</head>
+```
+2. **Noscript snippet immediately after `<body>`**:
+```html
+<body>
+  <!-- Google Tag Manager (noscript) -->
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  <!-- End Google Tag Manager (noscript) -->
+  <!-- Your page content -->
+</body>
+```
+### Common Issues Detected
+- ❌ **Missing Script**: GTM script not found in `<head>`
+- ❌ **Missing Noscript**: Noscript fallback not found after `<body>`
+- ⚠️ **Wrong Position**: Script or noscript not in optimal position
+- ❌ **ID Mismatch**: Different container IDs between script and noscript
+- ⚠️ **Incomplete Installation**: Only one of the two required snippets present
 ## 🔧 Package Management
 ### Check package information