情人節的天空，撒旦的地╭★: 大家都想學的Google Analytics(GA)，期中前的一些小心得 PART1

本文是SCU BDM 網路行銷與搜尋引擎最佳化 課程整理，江宇老師

GA第一堂(補)

每一個網頁都有一個後台的html，上課所用的是學校提供的免費平台，供教育使用。
運用後臺我們可以去設計想呈現的網站，本課呈現的是最陽春的網站，用GA來追蹤。

運用到的程式包含

FileZilla Client：用來上更改過的html上傳到學校平台。

Microsoft Office FrontPage 2003：用來編輯網頁。
就可以創造以下的網站了!
http://myweb.scu.edu.tw/~03152138/03152138.htm

GA最重要的就是要有一個"橋樑"，橋梁使我們創造一個讓GA追蹤的途徑。
https://developers.google.com/analytics/devguides/collection/analyticsjs/
現在Google已經推出新的橋樑，但我們選擇使用舊的，因為新的使用率還沒有那麼廣泛。

橋梁(重要)

<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>


註：

UA-XXXXX-Y是用來填寫GA提供的識別碼tracking ID
GA的程式語言通常都非常淺顯易懂
例如：ga('create', 'UA-XXXXX-Y', 'auto'); = 製造一個追蹤某tracking ID的帳號

忘了說大家會有疑問說GA橋梁要放在哪裡?
官方的答案是The code should be added near the top of the <head> tag and before any other script or CSS tags
大家注意了!!!官方是放在head裡的底端(這樣GA才能追蹤到下方的其他程式碼)
以下意識圖：
<head>


我是GA橋梁!!!


</head>

安裝完GA橋梁後我們就可以著手製作提供追蹤的API應用程式的插件。
API 應用程式插件

Facebook 網頁專用的「讚」按鈕

https://developers.facebook.com/docs/plugins/like-button?locale=zh_TW

網頁上的教學步驟如下：

1.選擇網址或網頁
挑選要使用「讚」按鈕的網頁或 Facebook 粉絲專頁的網址。

2.程式碼配置器
將網址貼至程式碼配置器，然後調整「讚」按鈕的設定，如 width（寬度）。點擊 Get Code（取得程式碼）按鈕，產生您的「讚」按鈕程式碼。

3.複製並貼上 HTML 程式碼片段
複製該程式碼片段，然後貼至目標網站的 HTML。

http://203.66.14.154/fbapi.htm但當然安裝完「讚」按鈕後，可不能忘記告訴GA讓GA記得這件事情。

<script>
	window.fbAsyncInit = function() {
	FB.Event.subscribe('edge.create', function(targetUrl) {
	ga('send', 'social', '社交網路(facebook臉書)', '社交動作(like按讚)', '社交話題(Google T恤頁面)');
	});
	};
	</script>

註：
程式碼註記請GA 傳送社交網路臉書按讚行為

GA第二堂

LINE 分享按鈕

http://linetw.blogspot.com/2014/05/how-to-set-line-button-in-web.html
依照作者提供的三種去應用
一般網頁程式碼適用(第一種陽春型)：
<a href="http://line.naver.jp/R/msg/text/?要分享的文字或網址"><img src="按鈕圖檔的網址"></a>

WordPress 網站程式碼適用(第二種免費架站平台)：(放佈景主題中)
<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%20%0a<?php the_permalink(); ?>"><img src="按鈕圖檔的網址"></a>

Blogger(blogspot)網站程式碼適用(第三種BLOG，也就是我現在在用的這種)：(把它放到你想要分享的位置)
<a expr:href='"http://line.naver.jp/R/msg/text/?" + data:post.title + "%0D%0A" + data:post.url + ""'> <img src='按鈕圖檔的網址'/></a>

值得注意的是，LINE分享按鈕是圖檔，所以其實這個圖檔是可以自己畫的!!!
分享的例子如下：
花果山水濂洞美猴王齊天大聖孫悟空~買尬你是商學士 http://myweb.scu.edu.tw/~03152138/03152138.htm

當然完成一個API當然是要讓GA知道如果真的有人分享了會是什麼狀況!
讓GA認識LINE按鈕
http://203.66.14.154/lineapi.htm

<img src="http://media.line.me/img/button/ja/40x40.png

" border="0">

註：
onclick="ga('send','event','文章分享','點擊','Yahoo大趨勢','10');">

文章分享:事件類別
點擊:事件動作
Yahoo大趨勢:活動標籤
10:事件價值

大家應該有注意到"onclick"這個動作
https://stackoverflow.com/questions/16579979/onclick-onmouseover-and-onmouseout-with-image
其實還有包含onClick(), onMouseOver() and onMouseOut() with image等各種動作都是可以被捕捉的!有各種功能~

實作上
下面這裡我有點忘記了......後來發現應該是(問過同學後)
按F12 可以看到一個網頁的程式碼，點到那個想要onclick的圖(也就是想追蹤的圖)，通常網址上方，onclick程式碼加到要追蹤照片網址的後面就可以用GA追蹤(GA要放在網址前面，約莫是放在上面網址的最後那邊的位置)。

網址產生器
https://support.google.com/analytics/answer/1033867?hl=zh-Hant
若要產生連至網站的網址，請用 Google Analytics 廣告活動網址產生器 https://ga-dev-tools.appspot.com/campaign-url-builder/
把我們自己的網頁填在Website URL然後下面填其他資訊，GA有追蹤到的時候就會顯示你打的資訊這樣

GA第三堂

那可能有人會想說，現在YouTube很流行，如果要把影片放在網站上然後做一個分析呢?

YouTube影片

YouTube影片網址後面都有一個ID，會像是v=XXXXXXXXXXX這樣。
http://203.66.14.154/you.htm

<div id="player"></div>

<script>

window.onbeforeunload = sendVideoWatchedTime;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '250',   //此處可修改影片高度
width: '350',   //此處可修改影片寬度
videoId: 'fJWN7wtvaJ0',  //記得將此處修改為自己的影片ID
events: {
'onStateChange': onPlayerStateChange }});}

　
//此處為影片播放行為捕捉的程式碼
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
console.log('play');
ga('send', 'event', '事件類別(影片名稱)', '事件動作(撥放)');
}

//此處為影片暫停行為捕捉的程式碼
if (event.data == YT.PlayerState.PAUSED) {
console.log('paused, total: ' + player.getCurrentTime());
ga('send', 'event', '事件類別(影片名稱)', '事件動作(暫停)', '活動標籤 (於幾秒處按下暫停鍵:) ' + Math.round(player.getCurrentTime()));
}
//此處為影片收視完畢行為捕捉的程式碼
if (event.data == YT.PlayerState.ENDED) {
console.log('video ended');
ga('send', 'event', '事件類別(影片名稱)', '事件動作(收視完畢)')
}}
　
//此處為影片沒看完跳離頁面行為捕捉的程式碼
function sendVideoWatchedTime() {
console.log('leaving... watched: ' + player.getCurrentTime() + 'seconds');
ga('send', 'event', '事件類別(影片名稱)', '事件動作(沒看完跳離頁面)', '活動標籤 (於幾秒處關閉瀏覽器:) ' + Math.round(player.getCurrentTime()));
}
</script>

GA分析scroll bar的滾動功能

很多網址都有scroll bar，有時候商業上要分析scroll bar往下拉的程度。

http://203.66.14.154/scroll.htm

var callbackData = bamPercentPageViewed.callback();

if(callbackData != false)

{

console.group('Callback');

console.log(callbackData);

console.groupEnd();

ga('send', 'event', '頁面瀏覽深度', callbackData.documentLocation, callbackData.scrollPercent + '', undefined, true);

}

(function() {

var o=onload, n=function(){

bamPercentPageViewed.init({

trackDelay : '2000',

percentInterval : '10'

});

}

if (typeof o!='function'){onload=n} else { onload=function(){ n();o();}}

})

(window);

上面那個程式碼有匯入下面那個的檔案
http://203.66.14.154/bam-percent-page-viewed.js

首先，要把那個Java檔用FileZilla Client放入學校雲端上
再把，

進一步，更改script所讀取的程式語言

之後，下面的程式碼要放在最後script之前這樣就ok了!

註：
如果網頁本身沒有滾輪，可以在網頁編輯中欄位的下方一直按enter鍵，使產生空格拉長頁面，就ok了!

GA分析mouse移動到圖片上

http://203.66.14.154/1/1129.htm

http://203.66.14.154/mouse.htm
<script>
var delay = function (elem, callback) {
var timeout = null;
elem.onmouseover = function() {
// Set timeout to be a timer which will invoke callback after 1s
timeout = setTimeout(callback, 10000);
};
elem.onmouseout = function() {
// Clear any timers set to timeout
clearTimeout(timeout);
}
};

delay(document.getElementById('001'), function() {ga('send','event','相機頁面','游標停留','SONY RX100M5','50')});

</script>
註：

上面getElementById('001')這個是要把圖編碼，所以程式碼不一定要放在圖下面，只要有編制Id="001"即可。

timeout = setTimeout(callback, 1000);
1000代表1秒
10000代表10秒

題外話，如果部落格或是網址很多瀏覽量的話可以考慮用Google Adsense，參加全球分廣告利潤計畫
https://www.google.com.tw/adsense/start/#/?modal_active=none
研究一下，可以賺外快!!!

另外學習上，

Mastertalks 微學堂的GA課程，以考題帶實作，要錢就是了。
Hahow 好學校線上學習平台(素人專區)

用GA追蹤Gmail信件

一般GA要放在head裡面，當沒有head可以放的時候，就需要"變形"。
http://203.66.14.154/edm.htm
http://www.google-analytics.com/collect?v=1&tid=UA-12345678-1&cid=CLIENT_ID_NUMBER&t=event&ec=email&ea=open&el=recipient_id&cs=newsletter&cm=email&cn=Campaign_Name
變形的方式就是變成"圖形"，把追蹤碼打在用網址插入圖形即可以追蹤到Gmail信件的動作。
http://www.oxxostudio.tw/articles/201706/google-analytics-tracking-email.html
註：
由上面網址教學提供的解析

tid：GA 追蹤 ID，每個 GA 帳戶下的資源都會有一組。
cid：Client ID，客戶的識別 ID，可以自訂，如果要避免「重複」，每封信的 cid 都要不同。
t：事件類型，因為要追蹤事件，所以設定為「event」。
ec：事件類別，設定為「email」。
ea：事件活動，設定為「open」。
el：事件標籤，設定為「test@test.test」( 可以輸入收件人的 email 之類的 )
cs：廣告活動來源，設定為「電子報」
cm：廣告活動媒介，設定為「email」
cn：廣告活動名稱，設定為「我的第一個廣告活動」

加上上課聽到的一些內容

&是參數之間的區隔
CLIENT_ID_NUMBER是要寄給誰，例如：王大明

在GA建立Google示範帳戶

因為自己製作的陽春型網站資料不足夠，剛好GA官方有自己提供一個demo的帳號，上面有很多數據可以供大家使用!!!
https://support.google.com/analytics/answer/6367342?hl=zh-Hant
示範帳戶>存取示範帳戶(大標)>存取示範帳戶
接下來做細項的介紹

轉換>目標>程序視覺呈現

這項功能就是觀測訪客到底有沒有完成「目標」 (達標)
實作上建議自訂目標
https://support.google.com/analytics/answer/1012040?hl=zh-Hant&utm_id=ad
雖然GA本身的解釋非常讓人難懂但簡單的說就是像是做一個績效的評估
設定目標>新增目標

目標設定
目標說明
目標詳情

註：目標說明

目標網址就是瀏覽的網頁
時間長度是看你的客群有沒有觀看
單次工作階段頁數/畫面數是要你的客群看幾頁(畫面數就是App)
事件分析，例如Line分享按鈕

需要特別注意的是：
事件可以當目標，目標不能當事件(考試內容)!!!

事件：畫面跟網址都不變
目標：會換頁跟換網址的

註：目標詳情

在設定目標詳情的時候注意不要打上實際連結目標(主域網址)!!!

因為有些網站網址大小寫是一樣的，例如：https://tw.yahoo.com/ = https://tw.YAHOO.com/
GA有區分大小寫的按鈕選項

"程序"的選填鍵是製造漏斗的按鈕選項，新增幾個步驟就會製造幾個漏斗。

例如：
步驟一把製作的網站第一頁放上去
步驟二把製作的網站第二頁放上去

Demo Account上大家都由第一個網站進入(entrance)
有些人有進一步的動作，有些人選擇離開(exit)
實務上可以設定自己的漏斗作分析，最後一個漏斗下面的就是終極目標，以Demo Account上為例，即Purchase Completed完成購買。

有時候你會發現，你用不同裝置打入http://myweb.scu.edu.tw/~03152138/03152138.htm時，有時會跑進第一頁，有時候會跑進第二頁。這個就是運用了A/B測試。

A/B測試

也稱為對比測試或分離測試（split-testing）。它是測試網站或在線服務的遊戲中的兩個變量，最後得出哪個變量更符合要求。
GA也可以用實驗派遣功能，做隨機分配。
當你看到http://myweb.scu.edu.tw/~03152138/03152138.htm?utm_expid=171173262-0.3GF_ejEOSeWX7yyMGgxkdA.0
後面的utm_expid=104584924-3.Zq9v8qDERAOBTRXeg3Z8KQ.0，這就是實驗exp id。

行為>實驗>建立實驗

選擇一個實驗目標

選取實驗目標後，最重要的的是實驗選取流量百分比。

GA自己的定義很難讓人懂，但這個百分比代表著要選取的資料量的概念。
例如：如果是流量大的網站可以選擇比較低，流量小的網站可以選擇比較高到100%。

進階選項>將流量平均分散到所有變化版本(這個選項是讓GA公平隨機的把使用者帶到網頁)
進階選項>設定實驗的最短運作時長(看蒐集的流量時間)
進階選項>最低可信度跟信賴區間有點像

再來下一步，設定您的實驗

把第一頁與第二頁的網址貼上有成功出現預覽才表示是對的。
+ 新增變化版本(在需要增加2個以上的變化版本時可以用)

設定您的實驗程式碼

上述應注意兩個條件：

確定原始頁和變化頁已加入 Google Analytics (分析) 追蹤程式碼。
然後，將此實驗程式碼貼在您原始頁的上方，緊接在開頭代碼後面。

(基本上都要裝GA，程式碼要放在GA橋梁的前面才能隨機跳入第一頁跟第二頁)
放在head一開始，完成後上傳到FileZilla Client
以下意識圖：
<head>
我是exp程式碼!!!

我是GA橋梁!!!

</head>

查看並啟動

GA第四堂

本堂教大家一些GA項目的解釋：
GA簡而明瞭的就是"目標對象ABC"。

目標對象
A客戶開發 Aqusition ：獲取客戶，例如：讚的按鈕
B行為 Behavior ：行為要進站才會發生。
C轉換 Conversions：看有沒有達標。

目標對象>總攬

在GA中跟"數量"有關的資料叫做指標metrics(藍色顯示)
工作階段=進站次數
可以做趨勢分析(看兩個變數例如：使用者對比跳出率)，還可以按日期找其他週去做對比
+ 建立新註解，在圖表下方可以加上自己想說的話，按了之後可以調日期(啥時)
使用者人數通常小於進站次數(人數<次數)
進站次數以30分鐘為基準(預設)，可以自己設。例如：35分鐘算兩次，20分鐘算一次
設定在管理員>資源>追蹤資訊>工作階段設定，最少設定1分鐘

跳出率是什麼?
跳出率是在看你的網站跟你的訪客的初次期待有沒有符合。
註：

沒點離開叫做跳出
有點然後離開叫做離站

行為>網站內容>所有網站

圖表會用一個維度搭配相關的指標
另外，還可以加上一個次要維度(例如：性別)

區隔=segment 可以把東西隔開(可以先參考解決方案庫看看世界上其他人怎麼隔資料的)

管理員>資料檢視>所有網站資料>篩選器>新增篩選器

排除/包含(一體兩面的事情)

這個功能可以用來排除自我瀏覽
利用https://whatismyipaddress.com/，找出自己的IP位址。

另外，實務上會新增一個view(資料檢視)，來做篩選，不會用原始資料來做篩選。
利用https://www.whois365.com/tw，可以註冊網域，大概要一年500美金。
但要有先機，
http://www.chinatimes.com/realtimenews/20141025003585-260410
以上新聞就是最好的例子。

#GoogleAnalytics
#GA
#IOT
老師說過，以前會Excel就能賺大錢，現在會Excel不是什麼很特別的事情。
GA的情況就像當然的Excel，學了GA，未來一定用的到的。
Feat.還可以考GAIQ!!!

情人節的天空，撒旦的地╭★

總網頁瀏覽量

星期日, 4月 22, 2018

大家都想學的Google Analytics(GA)，期中前的一些小心得 PART1