前言
相信大部分做浙政釘應用的朋友都必然要經歷一次“埋點部分成功”的坑，怎麼排查？對於老司機可能沒有難度，但是對於第一次做浙政釘應用的新手司機來說，就會有一種無從下手的感覺。因爲你感覺一切都是按照文檔上來的啊，偷偷告訴我你是不是有這種感覺？哈哈哈...
不論大家的埋點都是怎麼操作的，這裏我也介紹一下我這邊的埋點，希望對那些埋點還沒有成功還在苦惱的朋友來說，可以提供一些幫助，早日脫離埋點的坑。
提示：我這邊採用的是vue的單頁面的開發方式，對於其它開發方式僅供參考。
埋點分類
浙政釘埋點代碼分爲：
- 穩定性監控代碼(Emas)：穩定性監控代碼(Emas)只需要在首頁加入
- 流量分析代碼(A+)：流量分析代碼(A+)每個頁面都需要加入。
- 通用採集SDK
- 基礎埋點
- 用戶信息埋點
穩定性監控代碼(Emas)相信基本上都沒有什麼難度，貼在首頁即可。流量分析代碼就需要將它封裝到一個js中，然後每個頁面調用一下即可。
穩定性監控代碼(Emas)
這個埋點幾乎沒有難度，一般應用在審批上架後，浙政釘應用技術人員會給提交審批單的人(一般是業主單位)發送一個文件，文件中包含了：
- 應用名稱
- 應用標識
- 正式的App Key
- 正式的 App Secret
- 業主單位的浙政釘租戶Id
- 正式環境的浙政釘域名
- 以及埋點的代碼
- 穩定性監控
- 通用採集SDK
- 基礎埋點
- 用戶信息埋點
我們只用把其中穩定性監控代碼貼到首頁(index.html)head內即可，因爲該穩定性代碼中，已經包含了正式的 bid 和 signkey。比如：
<script src='https://wpk-gate.zjzwfw.gov.cn/static/wpk-jssdk.1.0.2/wpkReporter.js' crossorigin='true'></script>
<script>
try {
const config = {
bid: 'xxxxxxxxxx',
signkey: 'xxxxxxxxxxx',
gateway: 'https://wpk-gate.zjzwfw.gov.cn'
};
const wpk = new wpkReporter(config);
wpk.installAll();
window._wpk = wpk;
} catch (err) {
console.error('WpkReporter init fail', err);
}
</script>
流量分析代碼(A+)
流量分析代碼每個頁面都要加，但是“通用採集SDK”這塊由於是固定值，所以放在首頁即可。
通用採集SDK
接下來是通用採集SDK的埋點，這一步幾乎也是沒有難點。都是一些固定代碼，我們只用跟着貼在穩定性監控代碼的後邊即可。比如：
(function(w, d, s, q, i) {
w[q] = w[q] || [];
var f = d.getElementsByTagName(s)[0],j = d.createElement(s);
j.async = true;
j.id = 'beacon-aplus';
j.src = 'https://alidt.alicdn.com/alilog/mlog/aplus_cloud.js';
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'aplus_queue');
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn']
});
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn']
});
var u = navigator.userAgent
var isAndroid = u.indexOf('Android') > -1
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['appId', isAndroid ? '28302650' : isIOS ? '28328447' : '47130293']
});
大概就是醬紫了
基礎埋點和用戶信息埋點
相信只要是埋點出問題的同學基本上都是這裏的問題，由於這兩塊埋點代碼每個頁面都需要，所以我們將這兩塊代碼封裝到一個js文件中，每次路由切換的時候就調用一下即可。
基礎埋點
// 單頁應用 或 “單個頁面”需異步補充PV日誌參數還需進行如下埋點：
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-waiting', 'MAN']
});//
// 單頁應用路由切換後 或 在異步獲取到pv日誌所需的參數後再執行sendPV：
aplus_queue.push({
'action':'aplus.sendPV',
'arguments':[{
is_auto: false
}, {
// 當前你的應用信息，此兩行請勿修改
sapp_id: 'xxxx',
sapp_name: 'xxxxxx',
//自定義PV參數key-value鍵值對（只能是這種平鋪的json，不能做多層嵌套），
page_id: '頁面ID，與page 參數配合使用，保證唯一性',
page_name: '頁面中文名稱',
page_url: '頁面URL'
}]
})
分析：
- sapp_id：該值在浙政釘給的正式配置文件中可以找到
- sapp_name：同上
- page_id：每個頁面的唯一ID，可以使用頁面組件名稱，因爲它也項目中也是唯一的
- page_name：每個頁面的中文名稱，vue中頁面的中文名即可
- page_url：頁面Url，vue中傳該頁面的路由即可
我這邊的處理方式是，先在路由那邊每個頁面路由添加一個meta，包含了id和title兩個屬性，這樣每個頁面調用封裝方法的時候只用把路由傳過去就可以取到 page_id、page_name、page_url。比如：
封裝的方法：
我這邊創建了一個 baseAplus.js 文件，具體內容如下，有兩點需要注意：
- settings 是一個配置文件，我把sapp_id和sapp_name寫在了其中
- local-cache 是封裝的一個緩存類，首次打開應用的時候將獲取到的浙政釘用戶信息緩存到localStorage中， getUserInfoCache 就是獲取緩存的用戶信息。
- 會員暱稱和會員ID的埋點中，注意大小寫，浙政釘文檔上返回的是小駝峯，我這邊後端反序列化的成了大駝峯，這裏需要注意。具體看你們那邊情況。
import GLOBAL from '../settings'
import { getUserInfoCache } from './local-cache'
/**
* 添加基礎埋點
* @param {object} route 路由
*/
export function addBaseAplus(route) {
//基礎埋點
// 單頁應用 或 “單個頁面”需異步補充PV日誌參數還需進行如下埋點：
aplus_queue.push({
action: "aplus.setMetaInfo",
arguments: ["aplus-waiting", "MAN"],
});
// 單頁應用路由切換後 或 在異步獲取到pv日誌所需的參數後再執行sendPV：
aplus_queue.push({
action: "aplus.sendPV",
arguments: [
{
is_auto: false,
},
{
// 當前你的應用信息，此兩行請勿修改
sapp_id: GLOBAL.sapp_id,
sapp_name: GLOBAL.sapp_name,
// 自定義PV參數key-value鍵值對（只能是這種平鋪的json，不能做多層嵌套），如：
page_id: route.meta.id,
page_name: route.meta.title,
page_url: route.path,
},
],
});
//用戶信息埋點
// 如採集用戶信息是異步行爲需要先執行這個BLOCK埋點
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'BLOCK']
});
let userInfo = getUserInfoCache();
// 設置會員暱稱
aplus_queue.push({
action: "aplus.setMetaInfo",
arguments: ["_user_nick", userInfo.NickNameCn]
});
// 設置會員ID
aplus_queue.push({
action: "aplus.setMetaInfo",
arguments: ["_user_id", userInfo.AccountId]
});
// dd.getUUID().then(res => {
// aplus_queue.push({
// action: "aplus.setMetaInfo",
// arguments: ["_dev_id", "設備ID是業務定義的，用於定義唯一的設備標識。這個目前沒有要求，可不設置。"]
// });
// })
// 如採集用戶信息是異步行爲，需要先設置完用戶信息後再執行這個START埋點
// 此時被block住的日誌會攜帶上用戶信息逐條發出
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'START']
});
}
頁面調用
每個頁面都要這樣調用！！！
每個頁面都要這樣調用！！！
每個頁面都要這樣調用！！！
埋點部分成功
完成埋點後，等待浙政釘埋點數據的更新，羣裏說通常是下午五六點的樣子。然後可以到 宜搭 上查看埋點情況。
穩定性監控基本上都能成功，如果流量分析中引用出現在左邊則說明成功，如果出現在右邊則說明只有部分成功，就需要排查了。比如：
成功示例：
失敗示例：
排查方法
可以參考 https://www.yuque.com/docs/share/a2ca4143-dba7-4b8e-8bf5-f0746a7214c3#ljnli 文檔中，上報日誌API塊文檔。
但是對於那些沒有排查過的同學來說，按照文檔中的方法看到了日誌也不知道對不對，就像該文檔的評論中說的那樣“聽君一席話，如聽一席話”，寫的不是一般的難懂。
其實，新同學只是不知道日誌的關注點是什麼，搞懂這個就可以了。這個其實在文檔中的“埋點注意h事項及FAQ”中已經有提及。
16)
我們可以一個一個排除：
- 確保前邊“基礎埋點和用戶信息埋點”一節中封裝的方法在每個頁面都有調用。
- page_id、page_name、page_url、用戶信息等參數的排查。確保page_id唯一(檢查路由配置)、page_url和page_name按照要求填寫。
- 確保用戶信息有上報，其實大部分可能都是因爲 _user_id 爲空導致的。
由於本地無法通過 dd.getAuthCode({}) 獲取免登授權碼，該方法只能在浙政釘環境或專有釘釘環境可以調用，所以也就無法在本地獲取用戶信息。
但是我們可以在後端獲取浙政釘用戶信息接口處添加一個日誌，記錄一下傳進來的免登授權碼，然後把該值寫到前端，繞過 dd.getAuthCode({}) 方法，直接調用獲取用戶信息接口，這樣本地就可以拿到浙政釘或專有釘釘的用戶信息了。然後就可以按照 語雀文檔 上說的那樣獲取到上報日誌。查看(page_id、page_name、page_url和用戶信息)這幾項是否有傳即可。
等理解後，是不是發現其實也沒那麼難。
寫在最後
如果你覺的哪裏寫的不清楚的，可以提出來，我儘量再補充一下，儘量每個人都可以看的懂。
如果這篇文章解決了您的埋點問題，麻煩給個贊。
踩過坑，纔會覺得如果有個人能給予指點，那是多麼幸福的一件事啊！
最後，看着桌面上掉落的頭髮，感覺自己又變強許多！！
如果您覺得這篇文章有幫助到你，歡迎推薦，也歡迎關注我的公衆號。
