## 在 <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>
{"metaMigratedAt":"2023-06-15T11:04:52.302Z","metaMigratedFrom":"YAML","title":"在 LINE Chatbot 中串接 Google Analytics 的經驗分享","breaks":true,"description":"在 LINE Chatbot 中串接 Google Analytics 的經驗分享","slideOptions":"{\"allottedMinutes\":40,\"width\":1200,\"height\":675}","contributors":"[{\"id\":\"0d9a5e06-1f92-4142-b9df-fed4c8873573\",\"add\":13583,\"del\":6762}]"}