Automation Hướng dẫn tích hợp Google Tag Manager, Google Analytics 4, Google Search Console & PostHog CDP

Nguyễn Văn Thương

Nguyễn Văn Thương

Moderator
1. Tổng quan kiến trúc

1774014728617.png


Tại sao dùng GTM làm trung tâm?

  • Chỉ cần developer gắn code một lần duy nhất (script GTM).
  • Marketer/Analyst tự quản lý mọi tracking tag qua giao diện GTM mà không cần nhờ dev.
  • Dễ dàng thêm/sửa/xoá bất kỳ công cụ nào mà không chạm vào source code.
  • Có chế độ Preview & Debug để test trước khi publish.

2. Bước 1 — Tạo tài khoản & container GTM​

2.1. Tạo tài khoản GTM​

  1. Truy cập tagmanager.google.com.
  2. Nhấn "Create Account" (Tạo tài khoản).
  3. Điền thông tin:
    • Account Name: Tên công ty / tổ chức (VD: Cong ty ABC).
    • Country: Chọn Vietnam.
  4. Ở mục Container Setup:
    • Container Name: Tên website (VD: abc.vn).
    • Target Platform: Chọn Web.
  5. Nhấn "Create" → Đồng ý Terms of Service.
1774015173935.png

2.2. Lấy mã container GTM​

Sau khi tạo xong, GTM hiển thị popup chứa 2 đoạn code. Ghi nhớ mã container có dạng GTM-XXXXXXX.

1774015237992.png


Nếu lỡ đóng popup, vào lại bằng cách: Admin (menu trên cùng) → Install Google Tag Manager.


3. Bước 2 — Gắn script GTM vào website​

⚠️ Đây là bước DUY NHẤT cần chỉnh sửa source code. Sau bước này, mọi thứ đều thao tác trên giao diện GTM.

3.1. Đoạn code cần gắn​

Đoạn 1 — Dán vào bên trong thẻ <head>, càng gần thẻ mở <head> càng tốt:
<!-- 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-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Đoạn 2 — Dán ngay sau thẻ mở <body>:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Thay GTM-XXXXXXX bằng mã container thực tế của bạn.

3.2. Hướng dẫn theo từng nền tảng​

Website HTML thuần: Mở file index.html (hoặc file template chung), dán 2 đoạn code vào đúng vị trí.
WordPress:
  • Cách 1: Dùng plugin "Insert Headers and Footers" (hoặc "WPCode") — Dán đoạn 1 vào mục Header, đoạn 2 vào mục Body.
  • Cách 2: Chỉnh file header.php trong theme (không khuyến khích nếu không quen code).
Next.js / React: Thêm vào file _document.js (Next.js) hoặc public/index.html (CRA):
// Trong thẻ <Head> (Next.js _document.js)
<Script
id="gtm-script"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `(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-XXXXXXX');`
}}
/>

// Ngay sau thẻ <body>
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0"
width="0"
style={{ display: 'none', visibility: 'hidden' }}
/>
</noscript>

3.3. Xác nhận GTM đã hoạt động​

  1. Mở website trên trình duyệt.
  2. Nhấn F12 → Tab Console → Gõ dataLayer rồi Enter.
  3. Nếu thấy một mảng (array) chứa object gtm.start → GTM đã gắn thành công.
1774015402671.png



4. Bước 3 — Tích hợp Google Analytics 4 qua GTM​

4.1. Tạo Property GA4​

  1. Truy cập analytics.google.com.
  2. Nhấn Admin (biểu tượng bánh răng, góc dưới bên trái).
  3. Nhấn "+ Create" → "Property".
  4. Điền thông tin:
    • Property name: Tên website (VD: ABC Website).
    • Reporting time zone: (GMT+07:00) Ho Chi Minh City.
    • Currency: Vietnamese Dong (VND).
  5. Tiếp tục qua các bước Business Details → chọn Business Objectives.
  6. Ở bước Data Collection, chọn Web → điền URL website → đặt tên Stream.
  7. Nhấn "Create stream".
1774015488238.png

4.2. Lấy Measurement ID​

Trong trang Web stream details, copy Measurement ID (dạng G-XXXXXXXXXX). Đây là mã duy nhất cần dùng.

4.3. Tạo Tag GA4 trong GTM​

  1. Mở tagmanager.google.com → chọn container website.
  2. Trong menu bên trái, nhấn "Tags" → "New".
1774015540328.png

  1. Đặt tên tag: GA4 - Configuration (hoặc tên tuỳ ý dễ nhận biết).

  2. Cấu hình Tag (Tag Configuration):
    • Nhấn vào vùng "Tag Configuration" → Chọn "Google Tag".
    • Ở ô Tag ID, dán Measurement ID (G-XXXXXXXXXX).
1774015603819.png

  1. Cấu hình Trigger (Triggering):
    • Nhấn vào vùng "Triggering" → Chọn "All Pages" (tên mặc định: Initialization - All Pages hoặc All Pages).
    • Trigger này đảm bảo GA4 chạy trên mọi trang của website.
1774015614337.png

  1. Nhấn "Save" ở góc trên phải.

4.4. Theo dõi sự kiện tuỳ chỉnh (Custom Events) — Tuỳ chọn​

GA4 tự động theo dõi một số sự kiện cơ bản (page_view, scroll, outbound click, v.v.) sau khi bật Enhanced Measurement trong GA4. Nếu cần theo dõi thêm sự kiện tuỳ chỉnh:
  1. Tags → New → Đặt tên (VD: GA4 - Event - Button Click).
  2. Tag Configuration → Chọn "Google Analytics: GA4 Event".
  3. Ở Configuration Tag, chọn tag GA4 - Configuration đã tạo ở trên (hoặc nhập trực tiếp Measurement ID).
  4. Ở Event Name, nhập tên event (VD: button_click).
  5. Thêm Event Parameters nếu cần (VD: button_text = {{Click Text}}).
  6. Chọn Trigger phù hợp (VD: trigger "Click - All Elements" kèm điều kiện filter).
  7. Save.


5. Bước 4 — Xác minh Google Search Console qua GTM​

5.1. Thêm property trong GSC​

  1. Truy cập search.google.com/search-console.
  2. Nhấn vào dropdown chọn property (góc trên bên trái) → "+ Add property".
  3. Chọn loại "URL prefix" → Nhập đầy đủ URL (VD: https://abc.vn).
  4. Nhấn "Continue".
1774015665471.png

5.2. Chọn phương pháp xác minh bằng HTML Tag​

  1. Trong danh sách các phương pháp xác minh, mở mục "HTML tag".
  2. Google sẽ cung cấp một thẻ meta có dạng:
<meta name="google-site-verification" content="XXXXXXXXXXXXXXXXXXXX" />

  1. Copy toàn bộ giá trị content (chuỗi ký tự XXXXXXXXXXXXXXXXXXXX). CHƯA nhấn Verify.
1774015744269.png

5.3. Tạo Tag xác minh GSC trong GTM​

  1. Quay lại GTM → Tags → New.
  2. Đặt tên: GSC - Verification.
  3. Tag Configuration:
    • Nhấn vào vùng cấu hình → Chọn "Custom HTML".
    • Dán đoạn code sau vào ô HTML:
<meta name="google-site-verification" content="XXXXXXXXXXXXXXXXXXXX" />

(Thay XXXXXXXXXXXXXXXXXXXX bằng giá trị content thực tế.)
  1. Trigger: Chọn "All Pages".
  2. Nhấn "Save".
  3. Publish container GTM (nhấn nút "Submit" ở góc trên phải → Đặt tên version → "Publish").
  4. Quay lại Google Search Console → Nhấn "Verify".
  5. Nếu thành công, sẽ thấy thông báo "Ownership verified".
⚠️ Lưu ý: Không được xoá tag này trong GTM sau khi xác minh, nếu không GSC có thể mất xác minh.


6. Bước 5 — Tích hợp PostHog CDP qua GTM​

6.1. Tạo tài khoản PostHog & lấy thông tin cần thiết​

  1. Truy cập posthog.com → Đăng ký tài khoản (plan Free đã đủ cho hầu hết nhu cầu ban đầu).
  2. Tạo Project mới (hoặc dùng project mặc định).
  3. Vào Settings (biểu tượng bánh răng) → Project Settings.
  4. Tìm và copy hai giá trị:

6.2. Tạo Tag PostHog trong GTM​

  1. Mở GTM → Tags → New.
  2. Đặt tên: PostHog - Initialization.
  3. Tag Configuration:
    • Chọn "Custom HTML".
    • Dán đoạn code sau:
<script>
!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);

posthog.init('phc_YOUR_PROJECT_API_KEY', {
api_host: 'https://us.i.posthog.com',
person_profiles: 'identified_only',
capture_pageview: true,
capture_pageleave: true
});
</script>

  1. Thay thế các giá trị:
    • phc_YOUR_PROJECT_API_KEY → Thay bằng Project API Key thực tế.
    • https://us.i.posthog.com → Thay bằng Instance Address thực tế nếu khác.
  2. Cấu hình nâng cao (Advanced Settings):
    • Mở phần "Advanced Settings" → "Tag firing options".
    • Chọn "Once per page" (đảm bảo PostHog chỉ khởi tạo 1 lần mỗi trang).
1774016057364.png

  1. Trigger: Chọn "All Pages".
  2. Nhấn "Save".

6.3. Các tuỳ chọn cấu hình PostHog quan trọng​

Trong đoạn posthog.init(...), bạn có thể tuỳ chỉnh thêm:
Tuỳ chọnGiá trịMô tả
capture_pageviewtrue / falseTự động ghi nhận sự kiện xem trang
capture_pageleavetrue / falseGhi nhận khi user rời trang
person_profiles'identified_only' / 'always'Chế độ tạo profile: chỉ khi identify hoặc luôn luôn
autocapturetrue / falseTự động ghi nhận mọi click, input, submit
session_recording{ ... }Cấu hình Session Replay (xem lại phiên người dùng)
disable_session_recordingtrue / falseTắt/bật Session Replay

6.4. Gửi sự kiện tuỳ chỉnh từ PostHog — Tuỳ chọn​

Nếu muốn gửi custom event tới PostHog khi user thực hiện hành động cụ thể:
  1. Tags → New → Đặt tên (VD: PostHog - Event - Sign Up).
  2. Tag Configuration → Custom HTML:
<script>
posthog.capture('user_signed_up', {
signup_method: 'google',
plan: 'free'
});
</script>

  1. Chọn Trigger phù hợp (VD: trigger Form Submission, hoặc custom trigger).
  2. Save.

6.5. Identify user (liên kết user ID) — Tuỳ chọn​

Nếu website có hệ thống đăng nhập và bạn muốn liên kết session PostHog với user thực:
  1. Tạo tag Custom HTML mới:
<script>
posthog.identify('USER_ID_FROM_DATALAYER', {
email: 'user@example.com',
name: 'Nguyen Van A'
});
</script>

  1. Thay USER_ID_FROM_DATALAYER bằng biến GTM chứa user ID (cần push vào dataLayer từ backend).
  2. Trigger: Khi user đăng nhập thành công (custom event).


7. Kiểm tra & Debug​

7.1. Dùng GTM Preview Mode​

  1. Trong GTM, nhấn nút "Preview" (góc trên phải, cạnh nút Submit).
  2. Nhập URL website → Nhấn "Connect".
  3. Website mở ra trong tab mới, kèm panel Tag Assistant ở phía dưới.
  4. Kiểm tra:
    • ✅ Tag GA4 - Configuration hiển thị trong mục "Tags Fired".
    • ✅ Tag GSC - Verification hiển thị trong mục "Tags Fired".
    • ✅ Tag PostHog - Initialization hiển thị trong mục "Tags Fired".
    • ❌ Nếu tag nào nằm trong "Tags Not Fired" → kiểm tra lại Trigger.
1774016132460.png

7.2. Kiểm tra GA4​

  1. Mở GA4 → Reports → Realtime (Thời gian thực).
  2. Truy cập website từ trình duyệt khác hoặc tab ẩn danh.
  3. Nếu thấy có active user và sự kiện page_view → GA4 hoạt động.
1774016181491.png

7.3. Kiểm tra PostHog​

  1. Mở PostHog → Activity (hoặc Events).
  2. Tìm sự kiện $pageview với URL website của bạn.
  3. Nếu thấy sự kiện xuất hiện → PostHog hoạt động.
1774016206037.png

7.4. Kiểm tra GSC​

  1. Mở Google Search Console → Property đã thêm.
  2. Nếu hiển thị dashboard với dữ liệu (hoặc thông báo "Processing data") → Xác minh thành công.
⚠️ GSC cần 24–48 giờ để bắt đầu hiển thị dữ liệu.
 
Bài viết mới
Tổng quan về API bởi BlackDrag0n,
[P1] Automation là gì? bởi BlackDrag0n,
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Back
Top