[Javascript] Shopify App - 修正 location.replace 與 GA 追蹤碼 utm_* 的應用

認真使用 Shopify 大概也有一個多月了，使用了一些付費 Shopify App 在做本地化加強，發現這些第三方 app 還滿善用 variant 機制，原先是拿來設計一個商品有多種顏色等用途，現在則是應用在多儲存一些在地化的資訊。

因此，當發現需要轉化成在地化資訊時，會透過接近導網址架構，多添加 variant 資訊：

var new_url = window.location.protocol + '//' + window.location.host + window.location.pathname + '?variant=' + variant_id;

然而這樣的小機制，卻把 utm_* 的追蹤碼都給去掉了 XD 所以在幫他補強一下：

var new_url = window.location.protocol + '//' + window.location.host + window.location.pathname + '?variant=' + variant_id;

if (window.location && window.location.href) {

var m = window.location.href.match(/[\?&]([^=]+=[^&]+)/g);

if (m) {

var params = null;

for (var i=0; i<m.length ; ++i) {

if (m[i].indexOf('utm_') > 0) {

if (params == null) {

params = m[i].substr(1);

} else {

params += '&' + m[i].substr(1);

}

}

}

if (params != null) {

new_url += '&' + params;

}

}

}

收工！

服務流量變現和數據追蹤儀表板 - 透過 Google Adsense 和 Google Analytics 建置免費的儀表板

至今執行了一年半的流量變現任務，也進入了成長瓶頸。進入成長瓶頸時，會越來越依賴數據的推敲跟追蹤。雖然翻著 GA 跟 Adsense 報表也很夠用，但如果要追蹤的項目超過二十項時，就會非常累了，非常耗時，便開始適合建置 Dashboard 一眼觀看。

好在一年前已經有想好規則，但一直沒空製作儀表板，這週末剛好擠出了點時間，就把這些想法筆記也產出個雛形：github.com/changyy/TrackingLibrary

需求：

• 想要追蹤新舊使用者類型的價值(value per person)，究竟我們可以從單一使用者身上挖出多少礦呢？
• 想要細膩到小小功能的變現能力
• 能否讓 GA 數據跟 Adsense 數據自動匹配

推敲方式：

• 讓新舊使用者觀看到的廣告單元是不一樣的
• 讓想追蹤的小小功能的廣告單元是不一樣的
• 在 GA 數據裡，採用 event ，並且對 event report 進行設計；在 Adsense 則是在廣告名稱進行設計。後續就可以依據撈出來的資料，自動組出對應的報表。

最後產出的規則：

有兩個服務 Service1, Service2 ，其中 Service 1 共有 1 個功能，而 Service 2 有 3 個功能。假設 Service 2 的第三個功能還有兩個子功能。

Service1
Function1 [GA event report = (ec="pageview",ea="Service1",el="Function1")]
Service2
Function1 [GA event report = (ec="pageview",ea="Service2",el="Function1")]
Function2 [GA event report = (ec="pageview",ea="Service2",el="Function2")]
Function3 [GA event report = (ec="pageview",ea="Service3",el="Function3")]
SubFunction1
Google Analytics event = (ec="pageview",ea="Service3",el="Function3,SubFunction1")
Google Adsense AdName =
New User 觀看 = "[#]NU,Service2,Function3,SubFunction1"
Old User 觀看 = "[#]OU,Service2,Function3,SubFunction1"
SubFunction2 [GA event report = (ec="pageview",ea="Service3",el="Function3,SubFunction2")]

上述的高度結構後，也不是沒有缺點的，缺點就是 Adsense 的廣告單元會爆多，例如自己經手製作的廣告單元就高達兩百個，如某個想關注服務其底下共有 80 個廣告單元時，這時靠 Adsense 內建的報表，篩選了 80 個廣告單元時，這時報表很容易產不出來的。而用 GA 觀看時，因為不是用常見的網頁 ga pageview 的方式，而是靠 ga event 查看，這時也會有些不方便。上述更別說還有對應的服務開發時，需要設置規則，讓新舊使用者、不同子服務觀看不同的廣告單元和 GA event report。

最後，則是 Dashboard 要產生時，需要呼叫多次 adsense api 跟 analytics api ，而免費版使用要留意會不會踩到額度限制。

其他資訊 - 關於 TrackingLibrary 的使用：

1. 先將程式碼中 ga_adsense_rule.json 複製至 dev.json ，程式判斷出 dev.json 就會以此為優先處理
2. 先建立一個 Google Cloud Project，來使用 Google Adsense / Google Analytics API。
• 切換到 "API 與服務" -> 憑證 -> OAuth 同意畫面
• 應用程式名稱：Tracking
• 已授權網域：changyy.org
• 切換到 "API 與服務" -> 憑證 -> 建立憑證
• OAuth 用戶端 ID
• 網路應用程式：TrackingDashboard
• 已授權的 JavaScript 來源：http://tracking.changyy.org:8000
• 已授權的重新導向 URI：http://tracking.changyy.org:8000
• 取得 "這是您的用戶端 ID" 並更新在 dev.json
• 將各個 project -> google_api_project 欄位更新成 XXXXXX.apps.googleusercontent.com 即可
3. 開啟 Google Adsense / Google Analytics API
• API和服務 -> 資訊主頁 -> 啟用 API和服務
• 搜尋 "Analytics API" 以及點擊啟用
• 搜尋 "AdSense Management API" 以及點擊啟用
4. 切換至程式碼，編輯 dev.json ，建置想要關注的 GA 專案，例如單純複製 GA only 專案內容，只修改 project -> analytics -> ga_profile_id 欄位即可
5. 切換到專案 php/web 位置，並運行本地端 web server ，即可瀏覽
• $ cd TrackingLibrary/php/web
• $ php -S tracking.changyy.org:8000 ../tools/ci-routing.php
• $ open "http://tracking.changyy.org:8000/dashboard"

Google Analytics 使用筆記 - 設定目標(Goal)追蹤關鍵字成效

很久以前就想研究，一直拖到工作上買 Adwords 需要追蹤成效時，才開始學習 XD 而設定 Goal 其實非常簡單，就是在專案管理介面上，切換到最右邊有個"目標"可以設定，填一填就搞定，其中用 GA event 是最彈性的是部分，可以在對應的網頁動作上，發個 GA event 就能追蹤了。









如此回到 GA 專案 -> 客戶開發 -> 廣告活動 -> 所有廣告活動/付費關鍵字/隨機關鍵字 ，就可以看到 “轉換” 那邊，可以有目標來關注，十分方便。

就 Adwords 就可以不斷調整、找尋最洽當的關鍵字購買。