Vue 2.x折騰記 - (21) CNZZ統計在引流頁中的應用姿式

前言

由於單頁面開發，因此統計代碼的封裝和考慮點是咱們須要着手設計的(好比維護性）。

cnzz提供的js注入有四種方式，以下

我這邊用的是第一種，爲了方便定位問題，採起問答式來寫這篇水文。

實現

cnzz js的注入

最普通的就是咱們直接去操做html的head，而後手動複製那麼一段進去；

如果咱們要考慮下維護性，基於 vue cli 3 構建項目的小夥伴能夠用腳手架封裝的特性來抽離；

就是 .env 文件 + 模板插值 來實現； 前者是環境配置文件，後者是模板語言。

具體能夠官方的文檔：

• html-and-static-assets
• environment-variables : 客戶端使用要用 VUE_APP 開頭才能生效

接着看我業務代碼的實現，來加深你的瞭解。

• .env(這個再也不接着帶環境後綴的是全部環境均可以讀取，.env.dev 這種是專用於開發模式的，具體看文檔）

• public/index.html

移除醜陋的站長統計DOM

由於用的文字版，因此會植入一個 a 標籤，看了下dom結構，就很好處理了，
咱們監聽事件 DOMContentLoaded （頁面結構解析完畢【和load差異很大】），順利拿到dom而後隱藏掉；

行爲封裝

埋點行爲觸發主要用的是CNZZ這個事件(trackevent)

對於能夠重複利用的東西，抽離爲函數是最佳姿式，具體代碼以下（結合我業務的），

爲何要判斷 _czc ,是那個js注入的文件有時候不必定加載成功，這時候就沒有這個東東了。

category 咱們這邊主要用來做爲分享的 app 來源,默認值因此從工程的配置文件讀取（統一維護）

監聽頁面打開的埋點

行爲觸發

總結

其餘一些行爲點擊的，具體在對應的函數執行便可，這樣單頁面的埋點觸發基本是ok的。

具體業務具體分析，如果行爲封裝要分離的更完全一些，那一些業務代碼的設計也確定要調整。