Hướng dẫn Thiết lập Google Analytics cho Theme TanaFlows
Tài liệu này cung cấp bảng danh sách các CSS Selector (Class và ID) quan trọng trong theme TanaFlows để bạn hoặc đội ngũ kỹ thuật có thể dễ dàng thiết lập theo dõi sự kiện (Event Tracking) thông qua Google Tag Manager (GTM) hoặc Google Analytics 4 (GA4).
1. Bảng Tổng hợp CSS Selector cho Event Tracking
Dưới đây là các phần tử tương tác chính trên theme và selector tương ứng để bạn dùng làm điều kiện kích hoạt (Trigger) trong GTM:
| Khu vực / Thành phần | Hành động của người dùng | CSS Selector mục tiêu | Tên sự kiện gợi ý (GA4 Event Name) | Ghi chú / Dữ liệu thu thập kèm theo |
|---|---|---|---|---|
| Header (Thanh đầu) | Nhấp nút CTA chính | a.btn-menu | header_cta_click | Nút đăng ký/kêu gọi hành động chính ở góc phải header. |
| Nhấp ô Tìm kiếm | .btn-search | search_open | Theo dõi tần suất người dùng bấm mở ô tìm kiếm. | |
| Nhấp đổi ngôn ngữ | .language-dropdown-trigger | language_switch | Theo dõi tương tác đổi ngôn ngữ của độc giả. | |
| Nhấp đổi Dark Mode | button.dark-mode-toggle | theme_toggle_click | Theo dõi hành vi đổi giao diện sáng/tối. | |
| Biolink (Trang Tác giả) | Nhấp vào link liên kết | a.biolink-btn | biolink_link_click | Link chính trong danh sách Biolink. Có thể gửi kèm Click URL và Click Text. |
| Nhấp nút Hero CTA | a.hero-cta-button | biolink_hero_cta_click | Nút CTA chính nằm ở phần đầu trang Biolink cá nhân. | |
| Nhấp link mạng xã hội | .author-social-link | biolink_social_click | Các icon Facebook, Twitter, GitHub… của tác giả. | |
| Nhấp quay lại trang chủ | a.author-nav-back-link | biolink_back_home | Hành vi thoát trang Biolink quay lại Blog. | |
| Trang Sản phẩm (Product) | Nhấp nút Mua ngay (Checkout) | a.product-btn-primary.lemonsqueezy-button | product_buy_click | Nút thanh toán chính (ví dụ: Lemon Squeezy, Gumroad). |
| Nhấp xem Live Demo | a.product-btn-secondary#live-demo | product_demo_click | Nút xem thử bản demo sản phẩm. | |
| Nhấp link Web Testimonial | .product-sidebar-box a | product_testimonial_web_click | Click vào link website cá nhân của người đánh giá. | |
| Trang Khóa học (Course) | Nhấp mở khóa bài học | button[data-portal="signup/free"] | course_unlock_click | Người dùng chưa có tài khoản bấm nút mở khóa bài học. |
| Nhấp bắt đầu học ngay | button chứa @click*="setCurrentLesson" | course_start_click | Bấm nút “Start Now” hoặc “Continue” bài học. | |
| Chọn bài học ở Sidebar | a.course-lesson-btn | course_lesson_select | Chuyển bài học qua sidebar. Gửi kèm Click Text (tên bài học). | |
| Nhấp nút Bài tiếp theo | button chứa @click="nextLesson" | course_next_lesson | Bấm nút chuyển sang bài học tiếp theo ở cuối bài. | |
| Nhấp nút Bài trước đó | button chứa @click="previousLesson" | course_prev_lesson | Bấm nút quay lại bài học trước đó ở cuối bài. | |
| Newsletter / Form | Gửi form đăng ký | Form: .subscribe-form hoặc Nút: form button[type="submit"] | newsletter_signup | Độc giả hoàn thành đăng ký nhận tin (Newsletter). |
2. Hướng dẫn 3 bước Cấu hình nhanh trên Google Tag Manager (GTM)
Để track bất kỳ nút nào trong bảng trên bằng GTM, bạn thực hiện theo các bước chuẩn sau:
Bước 1: Kích hoạt các Biến Click mặc định
- Vào trang quản trị GTM của bạn > Variables (Biến) > chọn Configure (Cấu hình).
- Tích chọn toàn bộ các biến trong mục Clicks (bao gồm: Click Element, Click Classes, Click ID, Click Target, Click URL, Click Text).
Bước 2: Tạo Trình kích hoạt (Trigger) cho Nút
Ví dụ: Bạn muốn theo dõi khi có ai đó bấm vào Nút Mua hàng trên trang sản phẩm:
- Vào mục Triggers (Trình kích hoạt) > Chọn New (Mới).
- Đặt tên:
Click - Nút Mua Sản Phẩm. - Chọn loại cấu hình: Click - All Elements (Chỉ liên kết hoặc Tất cả các yếu tố).
- Ở phần “This trigger fires on” chọn: Some Clicks (Một số lượt nhấp).
- Thiết lập điều kiện:
- Click Classes chứa
product-btn-primary - (Hoặc chọn Click Element > matches CSS selector >
a.product-btn-primary.lemonsqueezy-button).
- Click Classes chứa
- Bấm Save (Lưu).
Bước 3: Tạo Thẻ sự kiện gửi về GA4 (Tag)
- Vào mục Tags (Thẻ) > Chọn New (Mới).
- Đặt tên:
GA4 Event - Product Buy Click. - Chọn cấu hình thẻ: Google Analytics > Google Analytics: GA4 Event.
- Chọn Thẻ cấu hình GA4 (Measurement ID) của bạn.
- Đặt tên Sự kiện (Event Name):
product_buy_click. - (Tùy chọn) Thêm thông số sự kiện (Event Parameters) để gửi thêm thông tin:
- Tên thông số:
product_name| Giá trị: Chọn biến{{Page Title}}hoặc tự định nghĩa để biết người dùng mua sản phẩm nào.
- Tên thông số:
- Ở phần Triggering (Kích hoạt): Chọn Trigger
Click - Nút Mua Sản Phẩmđã tạo ở Bước 2. - Bấm Save (Lưu) và Submit (Gửi) để xuất bản các thay đổi lên trang web.