---
title: 在 LINE Chatbot 中串接 Google Analytics 的經驗分享
tags: 簡報
description: 在 LINE Chatbot 中串接 Google Analytics 的經驗分享
langs: zh-tw
slideOptions:
allottedMinutes: 40
width: 1200
height: 675
---

## 在 <span style="color: lime">LINE Chatbot</span> 中串接
## <span style="color: gold">Google Analytics</span>

<br>

<small>和風信使 @ COSCUP 2020</small>
<small>共筆: https://hackmd.io/@chatbot-tw/coscup2020</small>

Note:

[DEMO 用程式碼](https://hackmd.io/VTlU3pF8SLCIilNaBM07CQ)

---

<table>
<tr>
<td><img src="https://i.imgur.com/4ZzXva0.jpg" style="width: 230px"></td>
<td style="text-align: center">
<h2>為了 DEMO 需要</h2>
<h3>在開始以前要麻煩大家加入</h3>
<h2>Chatbots Meetup 群組</h2>
<a href="https://lihi1.com/UUdgg">加入連結</a>
</td>
</tr>
</table>

---

## Who am I?

<table class="about-me">
<tr>
<td><img src="https://www.gravatar.com/avatar/8d9b432d861e4ac0e40954a800ae90a1?s=2048" class="avatar"></td>
<td>
<ul>
<li>戴均民</li>
<li>現職 <span style="color: #e2231a">微程式資訊</span></li>
<li><a href="https://lihi1.com/l5Dld/coscup-2020" target="_blank"><i class="fa fa-fw fa-rss-square"></i>部落格</a></li>
</ul>
</td>
</tr>
</table>
<style>
img.avatar {
border-radius: 50%;
width: 300px;
}
</style>

---

<table class="about-me">
<tr>
<td><img src="https://i.imgur.com/ypeCLV1.png" style="height: 600px"></td>
<td>
<h4>功能</h4>
<ul>
<li>站點查詢</li>
<li>行程規劃</li>
<li>最愛場站</li>
</ul>
<img src="https://i.imgur.com/hDh20ve.png" style="height: 250px; display: block; max-height: none; max-width: none;">
</td>
</tr>
</table>

---

### 使用者增長框架
# 以 <span style="color: lime">AARRR</span> 為例

---

# AARRR

<img src="https://i.imgur.com/E4mdU6U.png" style="border: 0">

---

## 使用者增長框架
# 需要<span style="color: gold">蒐集數據</span>

---

## 在網頁上可以直接套用
## Google Analytics

---

# 身為工程師
## 在 <span style="color: lime">LINE chatbot</span> 中
## 要怎麼蒐集這些數據？

---

# <span style="color: gold">技巧 #1</span>
## 網頁跳轉 + UTM

* 追蹤加入管道

---

## 為 LINE 連結
## 製作跳轉網頁

<ol style="font-size: .7em">
<li>加入: <code>https://line.me/R/ti/p/@youbike</code></li>
<li>預填文字: <code>https://line.me/R/oaMessage/@youbike/?test</code></li>
</ol>

---

## 追蹤 UTM

* 在跳轉網頁上埋 GA
* 給使用者的網址上面加 UTM

---

## [UTM 產生器](https://ga-dev-tools.appspot.com/campaign-url-builder/)


---

# <span style="color: gold">技巧 #2</span>
## 啟用 User-ID 功能

* 整合 LIFF 與後端的 GA 資料

---

## 啟用 User-ID 功能


---

## 啟用 User-ID 功能


---

## 啟用 User-ID 功能


---

## 啟用 User-ID 功能


---

## 啟用 User-ID 功能


---

## 補充資料

* [我寫的文章（含程式碼）](https://taichunmin.idv.tw/blog/2020-04-28-lintbot-google-analytics.html)

---

# <span style="color: gold">技巧 #3</span>
## 從後端送資料給 GA

* 輕鬆追蹤使用者在聊天機器人中的行為

---

## [Measurement Protocol](https://developers.google.com/analytics/devguides/collection/protocol/v1)


---

## Screenview


---

## 透過 GA screenview 追蹤

由於後端沒有網址，沒辦法用 pageview，所以就需要模擬成 app 送出 screenview。

---

## 把 userId 一起傳去 GA

* uid: `Udeadbeefdeadbeefdeadbeefdeadbeef`
* cid: `deadbeef-dead-beef-dead-beefdeadbeef`

---

## Event


---

### Event 必須<span style="color: gold">在 Screenview 之後傳送</span>
### 否則這些 Event 會被忽略

---

## [Hit Builder](https://ga-dev-tools.appspot.com/hit-builder/)


---

## 補充資料

* [我寫的文章（含程式碼）](https://taichunmin.idv.tw/blog/2020-04-28-lintbot-google-analytics.html)
* [Measurement Protocol 參數文件](https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters)

---

# <span style="color: gold">技巧 #4</span>
### [Measurement Protocol 批次發送](https://developers.google.com/analytics/devguides/collection/protocol/v1/devguide#batch)

* 節省後端效能

---

## Batch API


---

## 批次發送限制

* 一次最多 20 個 hits
* POST body 不大於 16 KB
* 單一 hit 不大於 8 KB

---

## Queue Time (qt)

透過 `qt=` 來補送最多 4 小時前的 hit

---

## 補充資料

* [我寫的文章（含程式碼）](https://taichunmin.idv.tw/blog/2020-05-25-linebot-google-analytics.html)

---

# <span style="color: gold">技巧 #5</span>
# LIFF 網頁追蹤 GA

* 紀錄 LINE 版本號
* 整合 LIFF 與後端的 GA 資料

---

## gtag 設定


---

## 紀錄 OS 及 LINE 版本號

* `liff.getOS()`
* `liff.getLineVersion()`

---

## 設定 User-ID 與後端送的資料整合


---

## screenview


---

## event


---

### 7/14 活動有效樣本數 7057

[Data Studio 統計報告](https://datastudio.google.com/reporting/72d4bf9d-df9b-4915-8d2f-8f3ab51bc777)

---

# <span style="color: gold">技巧 #6</span>
## Flex 訊息的閱讀裝置數

* 追蹤真的看過訊息的裝置數

---

## 產生 GA 追蹤連結 (lineId)


---

## 在 Flex 訊息中放隱藏圖


---

## 測試 Flex 訊息


---

## DEMO & 補充資料

* [Flex 開發人員工具](https://www.line-community.me/en/product_detail?botid=5efadf20851f74ab9c189ff6)
* [我寫的文章（含程式碼）](https://taichunmin.idv.tw/blog/2020-06-17-linebot-google-analytics.html)

---

## 如果沒辦法追蹤 LINE userId
## 可以考慮傳送隨機 uuid

---

## COSCUP 2020
## 數位版議程簡介

[分享數及閱讀裝置數報告](https://datastudio.google.com/reporting/72d4bf9d-df9b-4915-8d2f-8f3ab51bc777)

---

## 補充資料

* [我寫的文章（含程式碼）](https://taichunmin.idv.tw/blog/2020-06-17-linebot-google-analytics.html)
* [Measurement Protocol 參數文件](https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters)

---

# <span style="color: gold">技巧 #7</span>
## LINE Notify 的閱讀裝置數

* 追蹤真的看過 LINE Notify 的裝置數

---

## 由於沒辦法隱藏圖片
## 所以需要準備一個後端
## 讓追蹤連結可以變成圖片

---

## DEMO & 補充資料

* [我寫的文章（含程式碼）](https://taichunmin.idv.tw/blog/2020-06-29-linebot-google-analytics.html)

---

# <span style="color: gold">技巧 #8</span>
## 儲存 Insight 歷史資料

[官方文件](https://developers.line.biz/en/reference/messaging-api/#get-insight)

---

## 目前有三個 Insight 值得保留

* Get number of message deliveries
* Get number of followers
* Get friend demographics <span style="color: gold">(無法取得歷史資料)</span>

---

## 補充資料

* [我寫的抓取程式](https://github.com/taichunmin/gcf-line-chatbot-insight-google-analytics)

---

# QA 時間

<style>
code {
font-size: 0.85em;
color: #e83e8c;
word-wrap: break-word;
background-color: #fff;
padding: 3px 5px;
border-radius: 5px;
}
small code {
font-size: 0.6em;
}
</style>