> ## Documentation Index
> Fetch the complete documentation index at: https://docs.li2.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Cài Đặt SDK Li2 Qua Google Tag Manager

> Hướng dẫn cài SDK Li2 Analytics qua Google Tag Manager (GTM) mà không cần sửa code website, để tự động thu thập pageview, heatmap, click và dữ liệu funnel. Có cả cách kiểm tra SDK hoạt động và xử lý các lỗi thường gặp khi cài qua GTM.

Triển khai **Li2 Analytics SDK** thông qua Google Tag Manager ghi nhận hành vi người dùng mà không cần chỉnh sửa mã nguồn website. Sau khi cài đặt SDK, Li2 sẽ tự động thu thập các dữ liệu sau:

* **Pageviews** — người dùng đã xem những trang nào và theo thứ tự ra sao.
* **Heatmap & Click patterns** — họ click nhiều nhất ở đâu trên từng trang.
* **Funnel analysis** — tỷ lệ người dùng đi qua từng bước trong phễu bạn thiết lập.

Sau khi SDK được cài, Li2 sẽ tự động thu thập các dữ liệu này mà không cần cấu hình thêm.

<Tip>
  Nếu bạn muốn theo dõi **lead** và **sale** (ví dụ: ai điền form, ai mua hàng, kênh nào mang lại doanh thu), hãy xem **Conversion Tracking qua Google Tag Manager** sau khi hoàn thành hướng dẫn này.
</Tip>

## Các bước thực hiện Li2 Analytics SDK thông qua Google Tag Manager

Trước khi bắt đầu, đảm bảo bạn đã có đủ các yếu tố sau:

| **Yêu cầu**        | **Lấy ở đâu**                                                                     |
| ------------------ | --------------------------------------------------------------------------------- |
| **GTM Container**  | GTM script đã được cài trên website                                               |
| **Quyền edit GTM** | [tagmanager.google.com](http://tagmanager.google.com) → container của website bạn |

<Note>
  **Chưa có GTM?** Làm theo [hướng dẫn cài đặt GTM của Google](https://support.google.com/tagmanager/answer/14842164?visit_id=639083788430160180-1855164391\&ref_topic=14841964\&rd=2) trước, sau đó quay lại đây.
</Note>

### Bước 1: Tạo Custom HTML Tag

<Steps>
  <Step title="Mở GTM Container">
    Đăng nhập vào **Google Tag Manager** và chọn container của bạn. 
  </Step>

  <Step title="Tạo Tag mới">
    Vào **Tags**. Chọn **New** và đặt tên `Li2 Analytics - SDK Loader`
  </Step>

  <Step title="Cấu hình Tag">
    * **Tag Type**: Chọn **Custom HTML**
    * **HTML Content**: Paste script bên dưới
    * **Triggering**: Chọn **All Pages**
  </Step>
</Steps>

### Bước 2: Tạo biến click ID

Variable (biến) này đọc cookie `li_cid` — mã được Li2 tự động ghi khi người dùng click vào link.

<Steps>
  <Step title="Tạo Variable mới">
    Vào **Variables.** Chọn **User-Defined Variables** click vào **New**
  </Step>

  <Step title="Cấu hình Variable">
    * Chọn **Variable Type** → chọn **1st Party Cookie**. Đặt tên: `Li2 Click ID`
    * Điền thông tin: **Cookie Name**: `li_cid`
    * Click **Save** để lưu cấu hình. Từ bước này, bạn có thể dùng biến `{{Li2 Click ID}}` trong bất kỳ tag nào.
  </Step>
</Steps>

### Bước 3: Publish

<Steps>
  <Step title="Click Submit ở góc trên bên phải của GTM workspace." />

  <Step title="Thêm tên version và mô tả ">
    ví dụ: Add Li2 tracking.
  </Step>

  <Step title="Click Publish." />
</Steps>

## Kiểm Tra Sau Khi Cài Đặt

### Dùng GTM Preview Mode

<Steps>
  <Step title="Trong GTM workspace, click nút Preview (góc trên phải).">
    <Frame>
      <img src="https://mintcdn.com/ftc/a5MDtP2tIUi9LAgC/images/tich-hop-google-tag-manager-voi-li2-9-1.png?fit=max&auto=format&n=a5MDtP2tIUi9LAgC&q=85&s=b3ac67156ca1dae7008ef2757334deab" alt="Tich Hop Google Tag Manager Voi Li2 9 1" width="1000" height="513" data-path="images/tich-hop-google-tag-manager-voi-li2-9-1.png" />
    </Frame>
  </Step>

  <Step title="Nhập URL website và click Connect — một cửa sổ mới mở với GTM Debugger phía dưới.">
    <Frame>
      <img src="https://mintcdn.com/ftc/a5MDtP2tIUi9LAgC/images/tich-hop-google-tag-manager-voi-li2-11-1.png?fit=max&auto=format&n=a5MDtP2tIUi9LAgC&q=85&s=6fb373b2699a22e169d25af10d0e0110" alt="Tich Hop Google Tag Manager Voi Li2 11 1" width="1000" height="418" data-path="images/tich-hop-google-tag-manager-voi-li2-11-1.png" />
    </Frame>
  </Step>

  <Step title="Duyệt web bình thường. Trong GTM Debugger, kiểm tra:">
    * Tag `Li2 Analytics - SDK Loader` xuất hiện trong **Tags Fired** ở tất cả các trang
          <Frame>
            <img src="https://mintcdn.com/ftc/a5MDtP2tIUi9LAgC/images/tich-hop-google-tag-manager-voi-li2-11-1.png?fit=max&auto=format&n=a5MDtP2tIUi9LAgC&q=85&s=6fb373b2699a22e169d25af10d0e0110" alt="Tich Hop Google Tag Manager Voi Li2 11 1" width="1000" height="418" data-path="images/tich-hop-google-tag-manager-voi-li2-11-1.png" />
          </Frame>
  </Step>
</Steps>

### Dùng Browser Console (F12)

Xác nhận SDK đã load thành công:

```js theme={null}
// Kiểm tra SDK đã load chưa
li2Analytics
// Kết quả đúng: {trackLead: ƒ, trackSale: ƒ, ...}
```

Xác nhận Click ID cookie tồn tại:

```js theme={null}
// Kiểm tra cookie
document.cookie.split(';').find(c => c.includes('li_cid'))
// Kết quả đúng: " li_cid=cm3w..."
```

Thêm `?li2_debug=true` vào URL để bật verbose logging trong console — hiển thị chính xác data mà SDK đang capture và gửi.

<Warning>
  **Lưu ý:** Cookie `li_cid` **chỉ được set** khi người dùng truy cập website qua touch-point link (short link, QR code, NFC tag) của Li2. Nếu gõ thẳng URL vào trình duyệt, cookie sẽ không tồn tại — đây là hoạt động bình thường.
</Warning>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Tag không fire trong GTM Preview">
    Trigger condition không match. Mở GTM Debugger → phần **Tags Not Fired** → click vào tag để xem lý do cụ thể. Kiểm tra lại Page URL condition có chứa đúng đoạn text bạn cài không.
  </Accordion>

  <Accordion title="Lỗi li2Analytics is not defined">
    SDK Loader tag chưa fire hoặc script bị block. Kiểm tra Network tab xem script từ [unpkg.com](http://unpkg.com) có load thành công không. Thử tắt Ad Blocker và test lại. Verify Publishable Key không bị typo.
  </Accordion>

  <Accordion title="Cookie li_cid không có">
    Người dùng không đến từ touch-point link của Li2. Test đúng cách bằng cách click vào short link trước, sau đó mới kiểm tra cookie.
  </Accordion>
</AccordionGroup>

Sau khi cài đặt xong, SDK đã chạy. Li2 bắt đầu ghi nhận dữ liệu hành vi ngay lập tức — bạn có thể vào xem tại:

* **Heatmap & click scroll** — Li2 Dashboard → **Site Analytics** → chọn trang cần xem.
* **Funnels** — Li2 Dashboard → Funnels → tạo phễu phân tích đầu tiên.

Bước tiếp theo, muốn biết ai điền form và ai mua hàng? Cài SDK mới chỉ là nền tảng. Để **đo conversion** — gắn lead và sale về đúng link/kênh đã mang lại khách — bạn cần thiết lập [**Conversion Tracking**](https://li2.ai/vi/blog/huong-dan-theo-doi-conversion-tren-li2#heading-0).