# Hướng dẫn cài đặt Analytics & Google Tag Manager ## Tổng quan Dự án này bao gồm hệ thống theo dõi phân tích toàn diện sử dụng Google Tag Manager (GTM) và Google Analytics 4 (GA4). ## Hướng dẫn cài đặt ### 1. Thay thế GTM Container ID Trong cả hai file layout, thay `GTM-XXXXXX` bằng GTM container ID thực tế của bạn: **Các file cần cập nhật:** - `/resources/js/layouts/MattockLayout.vue` - `/resources/js/layouts/MattockBlogLayout.vue` ```javascript // Thay đổi từ: 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX' // Thành GTM ID thực tế của bạn: 'https://www.googletagmanager.com/gtm.js?id=GTM-ABC123' ``` ### 2. Cấu hình GA4 trong GTM Trong GTM container của bạn, cấu hình: - Google Analytics 4 tag - Triggers cho pageviews, clicks, scrolls, v.v. - Variables cho dữ liệu tracking ### 3. Các hành động được theo dõi #### Lượt xem trang - Tự động theo dõi pageview trên tất cả trang - Bao gồm tiêu đề trang và đường dẫn #### Click CTA (Call-to-Action) - Tất cả nút "Download" và "Consultation" - Nút submit form - Theo dõi kèm text nút và vị trí section #### Tương tác bài viết - Click nút like trên bài viết - Click nút save trên bài viết - Bao gồm tiêu đề bài viết để có context #### Độ sâu cuộn trang - Theo dõi khi người dùng cuộn đến 25%, 50%, 75%, 100% trang - Giúp đo lường mức độ tương tác với nội dung #### Truy vấn tìm kiếm - Theo dõi từ khóa tìm kiếm của người dùng - Chỉ theo dõi tìm kiếm với 3+ ký tự #### Gửi form - Đăng ký newsletter - Gửi form liên hệ - Yêu cầu tư vấn ## useAnalytics Composable ### Ví dụ sử dụng ```typescript import { useAnalytics } from '@/composables/useAnalytics'; const analytics = useAnalytics(); // Theo dõi sự kiện tùy chỉnh analytics.trackEvent('video_play', 'engagement', 'hero_video'); // Theo dõi click CTA analytics.trackCTAClick('Download Whitepaper', 'hero_section'); // Theo dõi gửi form analytics.trackFormSubmission('contact_form', 'footer'); ``` ### Các phương thức có sẵn - `trackPageView(title, path)` - Theo dõi lượt xem trang - `trackEvent(action, category, label, value)` - Theo dõi sự kiện tùy chỉnh - `trackCTAClick(buttonText, section)` - Theo dõi click nút CTA - `trackArticleEngagement(action, title)` - Theo dõi tương tác bài viết - `trackScrollDepth(percentage)` - Theo dõi độ sâu cuộn trang - `trackSearch(searchTerm, resultsCount)` - Theo dõi truy vấn tìm kiếm - `trackFormSubmission(formName, section)` - Theo dõi gửi form ## Sự kiện GTM DataLayer Các sự kiện tùy chỉnh sau được đẩy vào dataLayer: ### Click CTA ```javascript { event: 'cta_click', cta_text: 'Download Whitepaper', cta_section: 'hero_section' } ``` ### Tương tác bài viết ```javascript { event: 'article_engagement', engagement_type: 'like', article_title: 'Cách giảm chi phí phát triển 40%' } ``` ### Độ sâu cuộn ```javascript { event: 'scroll_depth', scroll_percentage: 50 } ``` ### Tìm kiếm ```javascript { event: 'site_search', search_term: 'offshore development', search_results: 10 } ``` ### Gửi form ```javascript { event: 'form_submission', form_name: 'newsletter_signup', form_section: 'footer' } ``` ## Kiểm tra Analytics ### 1. GTM Preview Mode - Bật Preview mode trong GTM - Kiểm tra xem events có fire đúng không - Verify các biến dataLayer ### 2. GA4 DebugView - Bật Debug mode trong GA4 - Theo dõi events real-time - Validation parameters ### 3. Browser Console - Kiểm tra dataLayer pushes - Verify GTM container loading - Monitor analytics errors ## Best Practices 1. **Luôn test trong staging trước** 2. **Sử dụng tên event và parameters có ý nghĩa** 3. **Không theo dõi PII (thông tin cá nhân)** 4. **Thiết lập conversion goals trong GA4** 5. **Tạo custom dashboards cho các metrics quan trọng** 6. **Audit tracking implementation thường xuyên** ## Các vấn đề thường gặp ### GTM không load - Kiểm tra container ID đúng chưa - Verify script placement trong `` - Kiểm tra ad blockers ### Events không fire - Verify dataLayer đã initialize - Kiểm tra tên event khớp với GTM triggers - Đảm bảo timing đúng của events ### Thiếu dữ liệu - Kiểm tra trạng thái publish GTM - Verify cấu hình GA4 - Kiểm tra Real-time reports trong GA4 ## Tuân thủ Privacy - Implement cookie consent nếu cần - Cân nhắc tuân thủ GDPR/CCPA - Anonymize IP addresses - Cung cấp cơ chế opt-out ## Cách sử dụng trong thực tế ### Theo dõi thành công marketing ```typescript // Track khi user download whitepaper analytics.trackCTAClick('Tải whitepaper', 'hero_section'); // Track khi user đăng ký consultation analytics.trackFormSubmission('consultation_form', 'contact_page'); ``` ### Phân tích hành vi người dùng ```typescript // Track khi user like bài viết analytics.trackArticleEngagement('like', 'Cách giảm chi phí phát triển'); // Track độ sâu cuộn để đo engagement // Tự động track khi scroll đến 25%, 50%, 75%, 100% ``` ### Tối ưu hóa conversion - Sử dụng data để xác định nút CTA nào hiệu quả nhất - Phân tích scroll depth để tối ưu độ dài content - Track search queries để hiểu nhu cầu người dùng ## Lưu ý quan trọng 1. **Thay GTM-XXXXXX** bằng GTM ID thực của bạn 2. **Cấu hình GTM container** với các tags và triggers phù hợp 3. **Test kỹ lưỡng** trước khi deploy production 4. **Theo dõi dữ liệu** thường xuyên để đảm bảo tracking hoạt động