# analytics.js, gtag.js, GTM (Google Tag Manager) 介紹
# Google Analytics (ga)
一般來說都會簡稱 GA，是 Google 公司提供的數據分析工具，可用來分析網站或 APP 的數據狀況，同時也是目前全世界最普及的數據分析軟體。
## 基本使用方法
### 基底
```javascript=
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
```
ga('create', 'UA-XXXXX-Y', 'auto'); => ga載入後，將UA-XXXXX-Y設置為默認的Google Analytics（分析）媒體資源ID。
ga('send', 'pageview'); => 當一進頁面時，就先跟ga送一個事件'pageview'
### function
```javascript=
ga('send', {
hitType: 'event', //自訂字串
eventCategory: 'eventCategory', //自訂字串
eventAction: 'Action', //自訂字串
eventLabel: 'Label', //自訂字串
eventValue: '200' //自訂字串
});
```
eventCategory : 類別 字元(必填)
eventAction : 動作 字元(必填)
eventLabel : 標籤 字元(選填) 建議要用
eventValue : 標籤 數字(選填) 可以不用加
其它參考
https://developers.google.com/analytics/devguides/collection/analyticsjs
---
# Global Site Tag (gtag)
全稱叫 Global Site Tag (全域網站代碼)。GA 預設提供的追蹤碼就是 gtag.js, 所以大多數網站埋的是 gtag.js
## 基本使用方法
### 基底
```javascript=
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID');
</script>
```
此代碼段會加載gtag.js庫，將GA_MEASUREMENT_ID設置為默認的Google Analytics（分析）媒體資源ID，並向Google Analytics（分析）發送網頁瀏覽匹配。
### *停用網頁瀏覽衡量
如果您不希望代碼段向Google Analytics（分析）發送網頁瀏覽匹配，請將send_page_view參數設置為false:
```javascript=
gtag('config', 'GA_MEASUREMENT_ID', { 'send_page_view': false });
```
### function
```javascript=
gtag('event', '<action>', {
'event_category': 'category', //自訂字串
'event_label': 'Label', //自訂字串
'value': <value>, //非負整數
})
動作為自訂的動作名稱 EX: click, play 字串
```
action 是在Google Analytics（分析）事件報告中顯示為事件操作的字符串。
category 是顯示為事件類別的字符串。
label 是顯示為事件標籤的字符串。
value 是一個顯示為事件價值的非負整數。 (選用)
### GTM 轉換 GA
由於GTM 和 GA都是由google的產品，GTM已有內建的轉換方式，因此在轉換時，不用另外加基底code，只要設定變數就可以。
其它參考
https://developers.google.com/analytics/devguides/collection/gtagjs/events
---
# GTM
Google Tag Manager (Google 代碼管理工具)。
GTM 與 gtag.js 是完全不同的產品，GTM 至少包含以下幾個好處：
1. 可以填入第三方追蹤碼，例如 Facebook Pixel
2. 追蹤事件 (轉換) 或其他項目時，不用請工程師再改 code.
3. 可大幅簡化設定事件的難度，例如網頁捲動事件、修正跳出率的計算等
## 基本使用方法
### 基底
```javascript=
<head>
<!-- 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-XXXX');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
</body>
```
### function
如需透過javascript送gtm事件時，需加上
```javascript=
<script>
dataLayer = [];
</script>
```
可直接加在基底code裡
```javascript=
<script>
dataLayer = [{}];
(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-XXXX');
</script>
```
<br>
事件用法
```javascript=
dataLayer.push({'event': '事件名稱'});
```
gtm在送事件時，是以 `dataLayer.push({'event': '事件名稱'})` 方法在送，因此要在網站上先宣告變數dataLayer，
`dataLayer = [];` 就是在宣告變數dataLayer。
其它參考
https://developers.google.com/tag-manager/devguide
html點擊事件:
```javascript=
<div gtm-data="事件名稱">
```
註: 使用gtm-data屬性時，在管理工具中的觸發條件需設定Element Attribute_gtm-data來接相對應的事件名稱，這個方法限用於我們公司而已，不是每個地方都通用。
---
## 三者之間的關係
### 1. GTM≠GA。GTM可以管理GA。
### 2. 網站埋了GTM，沒在管理平台裡設定GA是沒有作用的。
### 3. GTAG可以看作是新版的GA。
### 4. 理論上同一個網站是可以埋GTM和GA，但目前觀測的結果，發現瀏覽率及跳出率會有問題。
### 5. 根據google tag manager文件，同一個網站可以埋2組GTM，但不建議。
參考來源
[ga官網](https://developers.google.com/analytics/devguides/collection/upgrade/analyticsjs)
[gtm官網](https://developers.google.com/tag-manager/quickstart)
[analytics.js, gtag.js 還是 GTM](https://blog.yuyansoftware.com.tw/2019/06/analytics-gtag-gtm/)
[【概念篇】給行銷人的GTM入門－埋GA、FB Pixel不求人](https://medium.com/@papaya116/%E6%A6%82%E5%BF%B5%E7%AF%87-%E7%B5%A6%E8%A1%8C%E9%8A%B7%E4%BA%BA%E7%9A%84gtm%E5%85%A5%E9%96%80-%E5%9F%8Bga%E7%A2%BC-fb-pixel%E4%B8%8D%E6%B1%82%E4%BA%BA-2f70f39863d6)
---
### 其它工具
# fb pixel
### 基底
```javascript=
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '{your-pixel-id-goes-here}');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
```
### function
```javascript=
fbq('trackCustom', 'ShareDiscount', 'Event_name');
```
### GTM 轉換 fb pixel
基底設定
事件設定
---
# LINE Ads Platform
### 基底
```javascript=
<!-- LINE Tag Base Code -->
<!-- Do Not Modify -->
<script>
(function(g,d,o){
g._ltq=g._ltq||[];g._lt=g._lt||function(){g._ltq.push(arguments)};
var h=location.protocol==='https:'?'https://d.line-scdn.net':'http://d.line-cdn.net';
var s=d.createElement('script');s.async=1;
s.src=o||h+'/n/line_tag/public/release/v1/lt.js';
var t=d.getElementsByTagName('script')[0];t.parentNode.insertBefore(s,t);
})(window, document);
_lt('init', {
customerType: 'lap',
tagId: 'line tag id'
});
_lt('send', 'pv', ['line tag id']);
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://tr.line.me/tag.gif?c_t=lap&t_id=line tag id&e=pv&noscript=1" />
</noscript>
<!-- End LINE Tag Base Code -->
```
### function
#### 自定事件
```javascript=
<script>
_lt('send', 'cv', {
type: '事件名稱'
},['line tag id']);
</script>
```
#### 轉換程式碼
```javascript=
<script>
_lt('send', 'cv', {
type: 'Conversion'
},['line tag id']);
</script>
```
註: 當用GTM轉換時，type需設定固定值'Conversion'
### GTM 轉換 LineAds
基底設定
事件設定
Sign in with Wallet
Connect another wallet