整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
擊上方 "程序員小樂(lè)"關(guān)注, 星標(biāo)或置頂一起成長(zhǎng)
Style 對(duì)象
Style 對(duì)象表示一個(gè)個(gè)別的樣式聲明。
訪問(wèn) Style 對(duì)象
Style 對(duì)象可以從文檔的頭部區(qū)域訪問(wèn)，或者從指定的 HTML 元素訪問(wèn)。
從文檔的頭部區(qū)域訪問(wèn) style 對(duì)象：
var x=document.getElementsByTagName("STYLE");嘗試一下
訪問(wèn)一個(gè)指定元素的 style 對(duì)象：
var x=document.getElementById("myH1").style;
創(chuàng)建 Style 對(duì)象
您可以使用 document.createElement() 方法來(lái)創(chuàng)建 <style> 元素：
var x=document.createElement("STYLE");嘗試一下
您也可以設(shè)置一個(gè)已有元素的 style 屬性：
document.getElementById("myH1").style.color="red";
Style 對(duì)象屬性
"CSS" 列表示該屬性是在哪一個(gè) CSS 版本中定義的（CSS1、CSS2 或 CSS3）。
| 屬性 | 描述 | CSS |
|---|---|---|
| alignContent | 設(shè)置或返回當(dāng)靈活容器內(nèi)的各項(xiàng)沒(méi)有占用所有可用的空間時(shí)各項(xiàng)之間的對(duì)齊方式（水平）。 | 3 |
| alignItems | 設(shè)置或返回靈活容器內(nèi)的各項(xiàng)的對(duì)齊方式。 | 3 |
| alignSelf | 設(shè)置或返回靈活容器內(nèi)被選中項(xiàng)目的對(duì)齊方式。 | 3 |
| animation | 是下面除了 animationPlayState 屬性之外的其他屬性的速記屬性。 | 3 |
| animationDelay | 設(shè)置或返回動(dòng)畫(huà)何時(shí)開(kāi)始。 | 3 |
| animationDirection | 設(shè)置或返回是否循環(huán)交替反向播放動(dòng)畫(huà)。 | 3 |
| animationDuration | 設(shè)置或返回動(dòng)畫(huà)完成需花費(fèi)的秒數(shù)或毫秒數(shù)。 | 3 |
| animationFillMode | 設(shè)置或返回當(dāng)動(dòng)畫(huà)不播放時(shí)（當(dāng)動(dòng)畫(huà)完成時(shí)，或當(dāng)動(dòng)畫(huà)有一個(gè)延遲未開(kāi)始播放時(shí)），要應(yīng)用到元素的樣式。 | 3 |
| animationIterationCount | 設(shè)置或返回動(dòng)畫(huà)的播放次數(shù)。 | 3 |
| animationName | 設(shè)置或返回關(guān)鍵幀 @keyframes 動(dòng)畫(huà)的名稱。 | 3 |
| animationTimingFunction | 設(shè)置或返回動(dòng)畫(huà)的速度曲線。 | 3 |
| animationPlayState | 設(shè)置或返回動(dòng)畫(huà)是運(yùn)行的還是暫停的。 | 3 |
| background | 設(shè)置或返回在一個(gè)聲明中的所有背景屬性。 | 1 |
| backgroundAttachment | 設(shè)置或返回背景圖像是否固定或隨頁(yè)面滾動(dòng)。 | 1 |
| backgroundColor | 設(shè)置或返回元素的背景色。 | 1 |
| backgroundImage | 設(shè)置或返回元素的背景圖像。 | 1 |
| backgroundPosition | 設(shè)置或返回的背景圖像的起始位置。 | 1 |
| backgroundRepeat | 設(shè)置或返回如何重復(fù)背景圖像。 | 1 |
| backgroundClip | 設(shè)置或返回背景的繪制區(qū)域。 | 3 |
| backgroundOrigin | 設(shè)置或返回背景圖像的定位區(qū)域。 | 3 |
| backgroundSize | 設(shè)置或返回背景圖像的大小。 | 3 |
| backfaceVisibility | 設(shè)置或返回當(dāng)一個(gè)元素背對(duì)屏幕時(shí)是否可見(jiàn)。 | 3 |
| border | 設(shè)置或返回在一個(gè)聲明中的 borderWidth、borderStyle 和 borderColor。 | 1 |
| borderBottom | 設(shè)置或返回在一個(gè)聲明中的所有 borderBottom* 屬性。 | 1 |
| borderBottomColor | 設(shè)置或返回下邊框的顏色。 | 1 |
| borderBottomLeftRadius | 設(shè)置或返回左下角邊框的形狀。 | 3 |
| borderBottomRightRadius | 設(shè)置或返回右下角邊框的形狀。 | 3 |
| borderBottomStyle | 設(shè)置或返回下邊框的樣式。 | 1 |
| borderBottomWidth | 設(shè)置或返回下邊框的寬度。 | 1 |
| borderCollapse | 設(shè)置或返回表格的邊框是否被折疊為一個(gè)單一的邊框。 | 2 |
| borderColor | 設(shè)置或返回元素邊框的顏色（最多可以有四個(gè)值）。 | 1 |
| borderImage | 一個(gè)用于設(shè)置或返回所有的 borderImage* 屬性的速記屬性。 | 3 |
| borderImageOutset | 設(shè)置或返回邊框圖像區(qū)域超出邊界框的量。 | 3 |
| borderImageRepeat | 設(shè)置或返回圖像邊框是重復(fù)拼接圖塊還是延伸圖塊。 | 3 |
| borderImageSlice | 設(shè)置或返回圖像邊框的向內(nèi)偏移。 | 3 |
| borderImageSource | 設(shè)置或返回要作為邊框使用的圖像。 | 3 |
| borderImageWidth | 設(shè)置或返回圖像邊框的寬度。 | 3 |
| borderLeft | 設(shè)置或返回在一個(gè)聲明中的所有 borderLeft* 屬性。 | 1 |
| borderLeftColor | 設(shè)置或返回左邊框的顏色。 | 1 |
| borderLeftStyle | 設(shè)置或返回左邊框的樣式。 | 1 |
| borderLeftWidth | 設(shè)置或返回左邊框的寬度。 | 1 |
| borderRadius | 一個(gè)用于設(shè)置或返回四個(gè) border*Radius 屬性的速記屬性。 | 3 |
| borderRight | 設(shè)置或返回在一個(gè)聲明中的所有 borderRight* 屬性。 | 1 |
| borderRightColor | 設(shè)置或返回右邊框的顏色。 | 1 |
| borderRightStyle | 設(shè)置或返回右邊框的樣式。 | 1 |
| borderRightWidth | 設(shè)置或返回右邊框的寬度。 | 1 |
| borderSpacing | 設(shè)置或返回表格中單元格之間的距離。 | 2 |
| borderStyle | 設(shè)置或返回元素邊框的樣式（最多可以有四個(gè)值）。 | 1 |
| borderTop | 設(shè)置或返回在一個(gè)聲明中的所有 borderTop* 屬性。 | 1 |
| borderTopColor | 設(shè)置或返回上邊框的顏色。 | 1 |
| borderTopLeftRadius | 設(shè)置或返回左上角邊框的形狀。 | 3 |
| borderTopRightRadius | 設(shè)置或返回右上角邊框的形狀。 | 3 |
| borderTopStyle | 設(shè)置或返回上邊框的樣式。 | 1 |
| borderTopWidth | 設(shè)置或返回上邊框的寬度。 | 1 |
| borderWidth | 設(shè)置或返回元素邊框的寬度（最多可以有四個(gè)值）。 | 1 |
| bottom | 設(shè)置或返回定位元素的底部位置。 | 2 |
| boxDecorationBreak | 設(shè)置或返回分頁(yè)處元素的背景和邊框行為，或者換行處內(nèi)聯(lián)元素的背景和邊框行為。 | 3 |
| boxShadow | 設(shè)置或返回元素的下拉陰影。 | 3 |
| boxSizing | 允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。 | 3 |
| captionSide | 設(shè)置或返回表格標(biāo)題的位置。 | 2 |
| clear | 設(shè)置或返回元素相對(duì)浮動(dòng)對(duì)象的位置。 | 1 |
| clip | 設(shè)置或返回定位元素的可見(jiàn)部分。 | 2 |
| color | 設(shè)置或返回文本的顏色。 | 1 |
| columnCount | 設(shè)置或返回元素應(yīng)該被劃分的列數(shù)。 | 3 |
| columnFill | 設(shè)置或返回如何填充列。 | 3 |
| columnGap | 設(shè)置或返回列之間的間隔。 | 3 |
| columnRule | 一個(gè)用于設(shè)置或返回所有的 columnRule* 屬性的速記屬性。 | 3 |
| columnRuleColor | 設(shè)置或返回列之間的顏色規(guī)則。 | 3 |
| columnRuleStyle | 設(shè)置或返回列之間的樣式規(guī)則。 | 3 |
| columnRuleWidth | 設(shè)置或返回列之間的寬度規(guī)則。 | 3 |
| columns | 一個(gè)用于設(shè)置或返回 columnWidth 和 columnCount 的速記屬性。 | 3 |
| columnSpan | 設(shè)置或返回一個(gè)元素應(yīng)橫跨多少列。 | 3 |
| columnWidth | 設(shè)置或返回列的寬度。 | 3 |
| content | 與 :before 和 :after 偽元素一起使用，來(lái)插入生成的內(nèi)容。 | 2 |
| counterIncrement | 增加一個(gè)或多個(gè)計(jì)數(shù)器。 | 2 |
| counterReset | 創(chuàng)建或重置一個(gè)或多個(gè)計(jì)數(shù)器。 | 2 |
| cursor | 設(shè)置或返回鼠標(biāo)指針顯示的光標(biāo)類(lèi)型。 | 2 |
| direction | 設(shè)置或返回文本的方向。 | 2 |
| display | 設(shè)置或返回元素的顯示類(lèi)型。 | 1 |
| emptyCells | 設(shè)置或返回是否顯示表格中的空單元格的邊框和背景。 | 2 |
| filter | 設(shè)置或返回圖片濾鏡(可視效果，如：高斯模糊與飽和度) | 3 |
| flex | 相對(duì)于同一容器其他靈活的項(xiàng)目，設(shè)置或返回項(xiàng)目的長(zhǎng)度。 | 3 |
| flexBasis | 設(shè)置或靈活項(xiàng)目的初始長(zhǎng)度。 | 3 |
| flexDirection | 設(shè)置或返回靈活項(xiàng)目的方向。 | 3 |
| flexFlow | 是 flexDirection 和 flexWrap 屬性的速記屬性。 | 3 |
| flexGrow | 設(shè)置或返回項(xiàng)目將相對(duì)于同一容器內(nèi)其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。 | 3 |
| flexShrink | 設(shè)置或返回項(xiàng)目將相對(duì)于同一容器內(nèi)其他靈活的項(xiàng)目進(jìn)行收縮的量。 | 3 |
| flexWrap | 設(shè)置或返回靈活項(xiàng)目是否拆行或拆列。 | 3 |
| cssFloat | 設(shè)置或返回元素的水平對(duì)齊方式。 | 1 |
| font | 設(shè)置或返回一個(gè)聲明中的 fontStyle、fontVariant、fontWeight、fontSize、lineHeight 和 fontFamily。 | 1 |
| fontFamily | 設(shè)置或返回文本的字體。 | 1 |
| fontSize | 設(shè)置或返回文本的字體尺寸。 | 1 |
| fontStyle | 設(shè)置或返回字體樣式是否是 normal（正常的）、italic（斜體）或 oblique（傾斜的）。 | 1 |
| fontVariant | 設(shè)置或返回是否以小型大寫(xiě)字母顯示字體。 | 1 |
| fontWeight | 設(shè)置或返回字體的粗細(xì)。 | 1 |
| fontSizeAdjust | 當(dāng)使用備用字體時(shí)，確保文本的可讀性。 | 3 |
| fontStretch | 從字體庫(kù)中選擇一種正常的、濃縮的或擴(kuò)大的字體。 | 3 |
| hangingPunctuation | 規(guī)定一個(gè)標(biāo)點(diǎn)符號(hào)是否可以放置在線框外。 | 3 |
| height | 設(shè)置或返回元素的高度。 | 1 |
| hyphens | 設(shè)置如何拆分單詞來(lái)提高段落布局。 | 3 |
| icon | 向作者提供為一個(gè)帶有等價(jià)于圖標(biāo)的元素定義樣式的功能。 | 3 |
| imageOrientation | 規(guī)定一個(gè)用戶代理應(yīng)用到圖像上的順時(shí)針?lè)较虻男D(zhuǎn)。 | 3 |
| justifyContent | 設(shè)置或返回當(dāng)靈活容器內(nèi)的各項(xiàng)沒(méi)有占用所有可用的空間時(shí)各項(xiàng)之間的對(duì)齊方式（垂直）。 | 3 |
| left | 設(shè)置或返回定位元素的左部位置。 | 2 |
| letterSpacing | 設(shè)置或返回文本中字符之間的空間。 | 1 |
| lineHeight | 設(shè)置或返回在文本中行之間的距離。 | 1 |
| listStyle | 設(shè)置或返回一個(gè)聲明中的 listStyleImage、listStylePosition 和 listStyleType。 | 1 |
| listStyleImage | 設(shè)置或返回作為列表項(xiàng)標(biāo)記的圖像。 | 1 |
| listStylePosition | 設(shè)置或返回列表項(xiàng)標(biāo)記的位置。 | 1 |
| listStyleType | 設(shè)置或返回列表項(xiàng)標(biāo)記的類(lèi)型。 | 1 |
| margin | 設(shè)置或返回元素的外邊距（最多可以有四個(gè)值）。 | 1 |
| marginBottom | 設(shè)置或返回元素的的下外邊距。 | 1 |
| marginLeft | 設(shè)置或返回元素的左外邊距。 | 1 |
| marginRight | 設(shè)置或返回元素的右外邊距。 | 1 |
| marginTop | 設(shè)置或返回元素的上外邊距。 | 1 |
| maxHeight | 設(shè)置或返回元素的最大高度。 | 2 |
| maxWidth | 設(shè)置或返回元素的最大寬度。 | 2 |
| minHeight | 設(shè)置或返回元素的最小高度。 | 2 |
| minWidth | 設(shè)置或返回元素的最小寬度。 | 2 |
| navDown | 設(shè)置或返回當(dāng)使用向下箭頭導(dǎo)航鍵時(shí)要導(dǎo)航到哪里。 | 3 |
| navIndex | 設(shè)置或返回元素的顯示順序。 | 3 |
| navLeft | 設(shè)置或返回當(dāng)使用向左箭頭導(dǎo)航鍵時(shí)要導(dǎo)航到哪里。 | 3 |
| navRight | 設(shè)置或返回當(dāng)使用向右箭頭導(dǎo)航鍵時(shí)要導(dǎo)航到哪里。 | 3 |
| navUp | 設(shè)置或返回當(dāng)使用向上箭頭導(dǎo)航鍵時(shí)要導(dǎo)航到哪里。 | 3 |
| opacity | 設(shè)置或返回元素的不透明度。 | 3 |
| order | 設(shè)置或返回一個(gè)靈活的項(xiàng)目相對(duì)于同一容器內(nèi)其他靈活項(xiàng)目的順序。 | 3 |
| orphans | 設(shè)置或返回當(dāng)元素內(nèi)有分頁(yè)時(shí)，必須在頁(yè)面底部預(yù)留的最小行數(shù)。 | 2 |
| outline | 設(shè)置或返回在一個(gè)聲明中的所有 outline 屬性。 | 2 |
| outlineColor | 設(shè)置或返回一個(gè)元素周?chē)妮喞伾?/td> | 2 |
| outlineOffset | 對(duì)輪廓進(jìn)行偏移，并在邊框邊緣進(jìn)行繪制。 | 3 |
| outlineStyle | 設(shè)置或返回一個(gè)元素周?chē)妮喞獦邮健?/td> | 2 |
| outlineWidth | 設(shè)置或返回一個(gè)元素周?chē)妮喞獙挾取?/td> | 2 |
| overflow | 設(shè)置或返回如何處理呈現(xiàn)在元素框外面的內(nèi)容。 | 2 |
| overflowX | 規(guī)定如果內(nèi)容溢出元素的內(nèi)容區(qū)域，是否對(duì)內(nèi)容的左/右邊緣進(jìn)行裁剪。 | 3 |
| overflowY | 規(guī)定如果內(nèi)容溢出元素的內(nèi)容區(qū)域，是否對(duì)內(nèi)容的上/下邊緣進(jìn)行裁剪。 | 3 |
| padding | 設(shè)置或返回元素的內(nèi)邊距（最多可以有四個(gè)值）。 | 1 |
| paddingBottom | 設(shè)置或返回元素的下內(nèi)邊距。 | 1 |
| paddingLeft | 設(shè)置或返回元素的左內(nèi)邊距。 | 1 |
| paddingRight | 設(shè)置或返回元素的右內(nèi)邊距。 | 1 |
| paddingTop | 設(shè)置或返回元素的上內(nèi)邊距。 | 1 |
| pageBreakAfter | 設(shè)置或返回元素后的分頁(yè)行為。 | 2 |
| pageBreakBefore | 設(shè)置或返回元素前的分頁(yè)行為。 | 2 |
| pageBreakInside | 設(shè)置或返回元素內(nèi)的分頁(yè)行為。 | 2 |
| perspective | 設(shè)置或返回 3D 元素被查看的視角。 | 3 |
| perspectiveOrigin | 設(shè)置或返回 3D 元素的底部位置。 | 3 |
| position | 設(shè)置或返回用于元素定位方法的類(lèi)型（static、relative、absolute 或 fixed）。 | 2 |
| quotes | 設(shè)置或返回嵌入引用的引號(hào)類(lèi)型。 | 2 |
| resize | 設(shè)置或返回是否可由用戶調(diào)整元素的尺寸大小。 | 3 |
| right | 設(shè)置或返回定位元素的右部位置。 | 2 |
| tableLayout | 設(shè)置或返回表格單元格、行、列的布局方式。 | 2 |
| tabSize | 設(shè)置或返回制表符（tab）字符的長(zhǎng)度。 | 3 |
| textAlign | 設(shè)置或返回文本的水平對(duì)齊方式。 | 1 |
| textAlignLast | 設(shè)置或返回當(dāng) text-align 屬性設(shè)置為 "justify" 時(shí)，如何對(duì)齊一個(gè)強(qiáng)制換行符前的最后一行。 | 3 |
| textDecoration | 設(shè)置或返回文本的修飾。 | 1 |
| textDecorationColor | 設(shè)置或返回文本修飾的顏色。 | 3 |
| textDecorationLine | 設(shè)置或返回文本修飾要使用的線條類(lèi)型。 | 3 |
| textDecorationStyle | 設(shè)置或返回文本修飾中的線條樣式。 | 3 |
| textIndent | 設(shè)置或返回文本第一行的縮進(jìn)。 | 1 |
| textJustify | 設(shè)置或返回當(dāng) text-align 屬性設(shè)置為 "justify" 時(shí)，要使用的對(duì)齊方法。 | 3 |
| textOverflow | 設(shè)置或返回當(dāng)文本溢出包含它的元素，應(yīng)該發(fā)生什么。 | 3 |
| textShadow | 設(shè)置或返回文本的陰影效果。 | 3 |
| textTransform | 設(shè)置或返回文本的大小寫(xiě)。 | 1 |
| top | 設(shè)置或返回定位元素的頂部位置。 | 2 |
| transform | 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。 | 3 |
| transformOrigin | 設(shè)置或返回被轉(zhuǎn)換元素的位置。 | 3 |
| transformStyle | 設(shè)置或返回被嵌套的元素如何呈現(xiàn)在 3D 空間中。 | 3 |
| transition | 一個(gè)用于設(shè)置或返回四個(gè)過(guò)渡屬性的速記屬性。 | 3 |
| transitionProperty | 應(yīng)用過(guò)渡效果的 CSS 屬性的名稱。 | 3 |
| transitionDuration | 設(shè)置或返回完成過(guò)渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）。 | 3 |
| transitionTimingFunction | 設(shè)置或返回過(guò)渡效果的速度曲線。 | 3 |
| transitionDelay | 設(shè)置或返回過(guò)渡效果何時(shí)開(kāi)始。 | 3 |
| unicodeBidi | 設(shè)置或返回文本是否被重寫(xiě)，以便在同一文檔中支持多種語(yǔ)言。 | 2 |
| verticalAlign | 設(shè)置或返回元素中內(nèi)容的垂直對(duì)齊方式。 | 1 |
| visibility | 設(shè)置或返回元素是否應(yīng)該是可見(jiàn)的。 | 2 |
| whiteSpace | 設(shè)置或返回如何處理文本中的制表符、換行符和空格符。 | 1 |
| width | 設(shè)置或返回元素的寬度。 | 1 |
| wordBreak | 設(shè)置或返回非 CJK 語(yǔ)言的換行規(guī)則。 | 3 |
| wordSpacing | 設(shè)置或返回文本中單詞之間的空間。 | 1 |
| wordWrap | 允許長(zhǎng)單詞或 URL 地址換行到下一行。 | 3 |
| widows | 設(shè)置或返回一個(gè)元素必須在頁(yè)面頂部的可見(jiàn)行的最小數(shù)量。 | 2 |
| zIndex | 設(shè)置或返回定位元素的堆疊順序。 | 2 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
為前端，和業(yè)務(wù)上下游交流數(shù)據(jù)的時(shí)候，經(jīng)常會(huì)出現(xiàn)頁(yè)面 PV、UV、點(diǎn)擊率、轉(zhuǎn)化率等中英混雜不知所云的名詞。特別是在存量競(jìng)爭(zhēng)的當(dāng)下，數(shù)據(jù)更是頻頻出現(xiàn)在高層的目標(biāo)和規(guī)劃中。
那么，當(dāng)我們，一個(gè)前端同學(xué)，談起數(shù)據(jù)時(shí)，我們?cè)谡勑┦裁茨兀?/span>
追本溯源
我們先拋開(kāi) spm 這些埋點(diǎn)名詞，從一個(gè)行外人的角度來(lái)審視用戶的交互過(guò)程。
讓我們先從一個(gè)頁(yè)面開(kāi)始。
前端永遠(yuǎn)是從一個(gè)頁(yè)面開(kāi)始。
這個(gè)頁(yè)面可能是一個(gè)內(nèi)容流如各大內(nèi)容平臺(tái)的首頁(yè)，可能是一個(gè)詳情頁(yè)，可能是一個(gè)會(huì)場(chǎng)頁(yè)（如果你更容易理解的話）：
看起來(lái)有點(diǎn)花哨？沒(méi)關(guān)系，我們來(lái)抽象一下。這，就是我們的頁(yè)面：
當(dāng)然，我們的頁(yè)面自然也不是孤立的。它與其它千千萬(wàn)萬(wàn)個(gè)頁(yè)面一起，互相聯(lián)系，構(gòu)成了吞噬你我業(yè)余時(shí)光的時(shí)間黑洞：
作為頁(yè)面的開(kāi)發(fā)者，最基本的，我們要做好頁(yè)面的渲染、功能的交互、跳轉(zhuǎn)的響應(yīng)。
然后，就可以了，嗎？
如果作為一個(gè)獨(dú)立的博客網(wǎng)站，往互聯(lián)網(wǎng)里一丟，圈地自萌就好了。
用戶來(lái)了，玩了，爽了，走了，不帶走一片云彩。
但是作為一個(gè)商業(yè)公司，我們開(kāi)發(fā)的頁(yè)面需要產(chǎn)生價(jià)值。
玩爽了是要給錢(qián)的。
怎么給呢？
淘寶，本身就是一個(gè)賣(mài)貨的場(chǎng)，從一個(gè)商品引流到另一個(gè)商品，從一個(gè)類(lèi)目關(guān)聯(lián)到更多類(lèi)目，從衛(wèi)生紙一路買(mǎi)到電視機(jī)。
我們希望用戶在我們的業(yè)務(wù)里花更多時(shí)間，看更多東西，下更多訂單。
這個(gè)時(shí)候，我們的頁(yè)面更像是一個(gè)觀光車(chē)：從火車(chē)站招攬游客上車(chē)，拉他們?nèi)タ床噬R俑：
為了從商家拿到更多的回扣，出租車(chē)司機(jī)會(huì)主動(dòng)去人流量大的場(chǎng)所拉客，旅行社會(huì)在簽約前給到足夠多的情緒價(jià)值，導(dǎo)游會(huì)不遺余力地把游客往玉石店里拉。
這個(gè)幾乎出于本能的循環(huán)有足夠強(qiáng)的自驅(qū)力，它能一直運(yùn)行到市場(chǎng)監(jiān)督管理局或央視的介入。
這個(gè)循環(huán)本身不需要數(shù)據(jù)。
數(shù)據(jù)的引入是為了優(yōu)化這個(gè)循環(huán)。
為什么要優(yōu)化這個(gè)循環(huán)？
因?yàn)槲覀兿Ｍ懈嗟娜诉M(jìn)來(lái)，更少的人流失，更多的人到達(dá)目的地，買(mǎi)票參觀，這樣我們才能從景區(qū)手里拿到更多的回扣、返點(diǎn)。
用戶交互也一樣。
我們希望有更多的人來(lái)看我們的頁(yè)面，更多的比例引導(dǎo)到商品域，更多的人下單，從而收取更多的傭金。
為了追求這個(gè)目標(biāo)，我們需要知道：
知道了這些，我們就能做有針對(duì)性的調(diào)整：
作為電商頻道，交易的絕對(duì)值是我們的終極目標(biāo)。
這就是為什么，我們大多數(shù)業(yè)務(wù)都在致力于提升頁(yè)面的流量、用戶停留、轉(zhuǎn)化率。
而哪怕是一些與交易可能沒(méi)有直接關(guān)系的，比如螞蟻森林，只要能夠增加用戶的回訪和停留，我們也總有辦法從中獲取權(quán)益。
做出我們自己的數(shù)據(jù)產(chǎn)品看到這里，你也許會(huì)詫異，原來(lái)我們的數(shù)據(jù)目標(biāo)這么簡(jiǎn)單而明確，為什么集團(tuán)那么多花里胡哨的東西，看都看不懂！
剛好，我也是這么想的。不如我們另起爐灶！
先來(lái)明確一下我們的任務(wù)：
明確下來(lái)，只有三個(gè)內(nèi)容：
So easy!
整套數(shù)據(jù)產(chǎn)品里，最核心的就是，如何感知頁(yè)面的跳轉(zhuǎn)行為。知道這個(gè)，我們才有可能將成交和引導(dǎo)頁(yè)關(guān)聯(lián)起來(lái)，進(jìn)而通過(guò)引導(dǎo)頁(yè)的優(yōu)化來(lái)促進(jìn)成交。
假設(shè)我們有這么個(gè)場(chǎng)景：用戶在瀏覽時(shí)，看到一條廣告，被引流到首頁(yè)，最終在商詳頁(yè)完成下單：
要感知頁(yè)面之間的行為，首先要認(rèn)識(shí)頁(yè)面，給每個(gè)頁(yè)面獨(dú)一無(wú)二的標(biāo)識(shí)。
先來(lái)快速科普一下。對(duì)于瀏覽器來(lái)說(shuō)，頁(yè)面就是一條鏈接。www.taobao.com就是淘寶的頁(yè)面。（APP 里略有差異，不遵循 web 的網(wǎng)頁(yè)協(xié)議，但是原理是差不多的，也是一長(zhǎng)串亂糟糟的字母。）
一條網(wǎng)頁(yè)鏈接通常長(zhǎng)這樣，詳細(xì)可以看這里：
重點(diǎn)關(guān)注 Parameters 這部分，它的結(jié)構(gòu)是用 & 符號(hào)分隔的鍵/值對(duì)列表：
這個(gè)叫參數(shù)，有了它我們就能在一條資源鏈接上實(shí)現(xiàn)更多玩法。
比如，通過(guò)拼接商品 id 的參數(shù)，就能實(shí)現(xiàn)不同商品的瀏覽：
https://item.taobao.com/item.html?id=1111111111111 和
https://item.taobao.com/item.html?id=22222222222 就是兩個(gè)不同商品的詳情頁(yè)。
那怎么知道一個(gè)頁(yè)面是從哪個(gè)頁(yè)面過(guò)來(lái)的呢？我們就可以通過(guò)約定一個(gè) from 參數(shù)來(lái)傳遞：
www.item.taobao.com?id=1111111111&from=首頁(yè)
這就表示用戶從首頁(yè)過(guò)來(lái)，訪問(wèn)了商品 1111111111。
我們的頁(yè)面只要從鏈接上讀到 from=xxx 參數(shù)，就代表用戶是從那個(gè)源頭過(guò)來(lái)的。
另一個(gè)關(guān)于網(wǎng)頁(yè)的小知識(shí)點(diǎn)是：鏈接后的參數(shù)可以隨意加，參數(shù)有沒(méi)有用取決于頁(yè)面有沒(méi)有使用到。
比如在 www.item.taobao.com 后加 id 參數(shù)有用，但是在 www.taobao.com 后加 id 參數(shù)就不起作用，因?yàn)槭醉?yè)不消費(fèi) id 參數(shù)。
我們需要頁(yè)面去消費(fèi) from 參數(shù)。
因此，基于上述約定，我們還需要在頁(yè)面代碼側(cè)做具體的實(shí)現(xiàn)：
這樣，我們就能夠統(tǒng)計(jì)出如下信息：
恭喜你，已經(jīng)成功做出了丐版的 spm 和上報(bào) SDK。
接下來(lái)就是數(shù)據(jù)任務(wù)了，將所有頁(yè)面繁雜的流量和來(lái)源日志處理成符合我們需要的數(shù)據(jù)結(jié)構(gòu)。
最后，當(dāng)我們給出一個(gè)頁(yè)面標(biāo)識(shí)，就能查出這個(gè)頁(yè)面的流量、來(lái)源、去向。
但是我不會(huì)寫(xiě) sql……新和聯(lián)勝的計(jì)劃只能中道崩殂了。
重新認(rèn)識(shí)一下集團(tuán)的數(shù)據(jù)方案現(xiàn)在我們可以重新認(rèn)識(shí)一下 spm了。
spm（Super Position Model，超級(jí)位置模型）是阿里埋點(diǎn)體系的重要規(guī)范，它的作用就是為每一個(gè)頁(yè)面添加了一個(gè)獨(dú)立的標(biāo)識(shí)。阿里的spm位置編碼由A.B.C.D四段構(gòu)成, 各分段分別代表 A:站點(diǎn)/業(yè)務(wù), B:頁(yè)面, C:頁(yè)面區(qū)塊, D:區(qū)塊內(nèi)點(diǎn)。
假設(shè)我們現(xiàn)在做羽毛球行業(yè)的業(yè)務(wù)，該業(yè)務(wù)下有許多頁(yè)面：
那么我們就能夠輕松確定各個(gè)頁(yè)面的 SPM 分別是 羽毛球行業(yè).營(yíng)銷(xiāo)頁(yè)、羽毛球行業(yè).商詳、羽毛球行業(yè).店鋪。
那么問(wèn)題來(lái)了，既然 B 位代表了頁(yè)面，為什么我們還需要 A 位呢？
我個(gè)人的理解，引入 A 位的好處是 B 位的定義可以更加語(yǔ)義化且業(yè)務(wù)無(wú)關(guān)，也可以通過(guò) A 位對(duì)業(yè)務(wù)下的多個(gè)頁(yè)面做統(tǒng)計(jì)分析。當(dāng)然后者對(duì)業(yè)務(wù)同學(xué)可能更重要些。但作為前端同學(xué)，還是比較關(guān)心前者，畢竟命名真的是太難了。
既然 spmA.spmB 已經(jīng)可以確定一個(gè)頁(yè)面的標(biāo)識(shí)，后面兩位是什么作用呢？
讓我們稍微細(xì)化一下場(chǎng)景。
假如我們營(yíng)銷(xiāo)頁(yè)現(xiàn)在有兩個(gè)活動(dòng)，秒殺活動(dòng)和場(chǎng)景購(gòu)都導(dǎo)流到同一個(gè)商詳頁(yè)：
看起來(lái)沒(méi)有什么問(wèn)題。
讓我們把視角放到商詳頁(yè)。你會(huì)發(fā)現(xiàn)它只能感知用戶是從營(yíng)銷(xiāo)頁(yè)過(guò)來(lái)，而不知道具體哪個(gè)活動(dòng)導(dǎo)流過(guò)來(lái)的。相應(yīng)的，秒殺業(yè)務(wù)的同學(xué)也無(wú)法感知模塊的引導(dǎo)效率。
spmC 位和 spmD 位就是為了解決頁(yè)面精準(zhǔn)定位的需要。
當(dāng)用戶點(diǎn)擊了秒殺模塊的商品 2 時(shí)，商詳頁(yè)感知到的來(lái)源就是 羽毛球行業(yè).營(yíng)銷(xiāo)頁(yè).秒殺.商品2，既有來(lái)源頁(yè)，又有來(lái)源頁(yè)的具體點(diǎn)擊位置。如果統(tǒng)計(jì)頁(yè)面維度的引導(dǎo)效率，可以只消費(fèi) spmA.spmB。如果有更細(xì)粒度的分析需求，也有相應(yīng)的數(shù)據(jù)做支持。
spm 參數(shù)同樣是通過(guò) url 參數(shù)傳遞的。如果大家留意一下正在看的這篇文章的鏈接，可能會(huì)發(fā)現(xiàn)這么個(gè) spm 參數(shù)：
前兩位分別代表了 ata 業(yè)務(wù)和 2xxxxxx0 頁(yè)面。
spmC 和 spmD 位是 0.0，這是因?yàn)?ata 不關(guān)心模塊級(jí)的引導(dǎo)，給的默認(rèn)值。
細(xì)心的同學(xué)可能注意到在 spmD 位之后還有一串亂七八糟的字符， SPM 官方解釋是這樣的：
看不懂吧。這描述確實(shí)太技術(shù)了，我來(lái)翻譯一下：
不關(guān)你事！莫挨勞資！
通過(guò) SPM 規(guī)范，我們能夠定位到一個(gè)頁(yè)面中的任意位置。
不過(guò)就像前面說(shuō)的，約定 just 約定，在沒(méi)有實(shí)現(xiàn)之前就只是概念而已。
前面提到，這套體系要運(yùn)轉(zhuǎn)起來(lái)，需要所有頁(yè)面都統(tǒng)一動(dòng)作：保證自己有一個(gè) spm id，且在渲染時(shí)消費(fèi)外部帶過(guò)來(lái)的 spm，跳轉(zhuǎn)時(shí)拼接自身的 spm。
從原理上分析，這就是個(gè)橫向項(xiàng)目，需要自上而下的推廣。
阿里集團(tuán)側(cè)給出的方案是一套上報(bào)工具 SDK。頁(yè)面內(nèi)集成這套腳本之后，它會(huì)做兩件事：頁(yè)面曝光上報(bào)、跳轉(zhuǎn)鏈接劫持等。
一個(gè)頁(yè)面有兩個(gè) spm 相關(guān)的參數(shù)：
頁(yè)面加載后，SDK 會(huì)做頁(yè)面曝光上報(bào)，攜帶自身 spm 和來(lái)源 spm。
對(duì)跳轉(zhuǎn)鏈接的攔截是通過(guò)對(duì) a 標(biāo)簽的點(diǎn)擊事件攔截實(shí)現(xiàn)的。它會(huì)自動(dòng)往其 href 屬性上拼接頁(yè)面的 spmA.spmB，如果 a 標(biāo)簽被包裹在區(qū)塊或點(diǎn)擊熱區(qū)內(nèi)，還會(huì)進(jìn)一步攜帶上 spmC.spmD，以標(biāo)識(shí)該跳轉(zhuǎn)的點(diǎn)擊來(lái)源。
前端同學(xué)請(qǐng)注意
從 SDK 的實(shí)現(xiàn)原理不難發(fā)現(xiàn)，如果跳轉(zhuǎn)不是通過(guò) a 標(biāo)簽完成的，那這個(gè)劫持就失效了。進(jìn)而，二跳頁(yè)就會(huì)失去當(dāng)前頁(yè)面的來(lái)源信息。
因?yàn)?a 標(biāo)簽的樣式問(wèn)題和默認(rèn)行為問(wèn)題，以及點(diǎn)擊行為通常存在跳轉(zhuǎn)前的邏輯處理等，前端同學(xué)更傾向使用 js 方式跳轉(zhuǎn)頁(yè)面，這時(shí)就需要特別關(guān)注下，有沒(méi)有做好 spm 信息的手動(dòng)拼接。
因?yàn)?spm 參數(shù)是依賴網(wǎng)頁(yè)鏈接的，在這條鏈路下面沒(méi)有任何問(wèn)題。
但是當(dāng)某個(gè)頁(yè)面被分享出去時(shí)，分享鏈接里攜帶了 頁(yè)面1 的 spm。所有從該分享鏈接進(jìn)入的流量，SDK 也會(huì)認(rèn)為它是來(lái)自頁(yè)面 1 的，進(jìn)而出現(xiàn)頁(yè)面 1 引導(dǎo)到頁(yè)面 2 的流量比頁(yè)面 1 本身的流量大的多的情況。
比如你把當(dāng)前頁(yè)面鏈接分享出去：
別人通過(guò)你的鏈接訪問(wèn)，由于 spm 的傳遞特性，SDK 仍會(huì)認(rèn)為用戶是從首頁(yè)過(guò)來(lái)的，進(jìn)而計(jì)入首頁(yè)的引導(dǎo)轉(zhuǎn)化。
在具體實(shí)踐中，除了統(tǒng)計(jì)頁(yè)面的來(lái)源頁(yè)面，還會(huì)統(tǒng)計(jì)頁(yè)面來(lái)源頁(yè)面的來(lái)源頁(yè)面：
還拿這個(gè)例子，頁(yè)面 3 不但知道用戶是從頁(yè)面 2 過(guò)來(lái)的，還知道用戶在此之前訪問(wèn)了頁(yè)面 1。
是怎么做到的呢？
答案就是 Referer 請(qǐng)求頭：Referer 請(qǐng)求頭包含了當(dāng)前請(qǐng)求頁(yè)面的來(lái)源頁(yè)面的地址，即表示當(dāng)前頁(yè)面是通過(guò)此來(lái)源頁(yè)面里的鏈接進(jìn)入的。
別忘了，我們的 spm 數(shù)據(jù)就藏在 url 上。
能拿到上一個(gè)頁(yè)面的 url，自然就能夠從當(dāng)前頁(yè)面感知到上上一個(gè)頁(yè)面。
（對(duì)于一些拿不到 referer 請(qǐng)求頭的場(chǎng)景「比如小程序」，業(yè)務(wù)實(shí)現(xiàn)上會(huì)往 url 上加 preSpm 參數(shù)，實(shí)現(xiàn)對(duì)來(lái)源頁(yè)來(lái)源的感知）。
那么，你可能又要問(wèn)了，為什么不統(tǒng)計(jì)來(lái)源頁(yè)面的來(lái)源頁(yè)面的來(lái)源頁(yè)面，乃至于無(wú)限套娃呢？
我個(gè)人理解，這一方面是技術(shù)問(wèn)題，另一方面也是成本和需求的平衡：
成本上，我們是否需要記錄這么長(zhǎng)的用戶路徑。因?yàn)榭紤]到存取的需求，路徑必然是可枚舉的。
技術(shù)上，有一個(gè)奧卡姆剃刀原理：如無(wú)必要，勿增實(shí)體。意思是不做無(wú)謂的復(fù)雜度升級(jí)。僅僅是往 url 上拼接 spm 參數(shù)，就已經(jīng)需要集全集團(tuán)之力，反復(fù)宣導(dǎo)，尚且常有漏報(bào)錯(cuò)報(bào)。如果要再增加 preSpm，乃至 prePreSpm，系統(tǒng)的穩(wěn)健性乃至數(shù)據(jù)結(jié)果的可信度必然要打折扣。
除了關(guān)注頁(yè)面流量和跳轉(zhuǎn)情況，我們還是希望感知到用戶在當(dāng)前頁(yè)面里做了什么。感知的其中一個(gè)目的，就是為了改善頁(yè)面的跳轉(zhuǎn)率。
當(dāng)用戶進(jìn)入頁(yè)面，到執(zhí)行跳轉(zhuǎn)前，通常有一些必須的行為。我們就可以通過(guò)考察用戶在每個(gè)步驟中的行為情況，最終提高進(jìn)入跳轉(zhuǎn)的用戶量：
頁(yè)面 pv 和黃金令箭埋點(diǎn)通常被認(rèn)為是兩種東西。但從前端角度來(lái)看，它們都只是一個(gè)發(fā)向日志服務(wù)器的 http 請(qǐng)求。只不過(guò)在后續(xù)的數(shù)據(jù)任務(wù)處理中會(huì)有差別。（當(dāng)然，在端側(cè)，為了統(tǒng)計(jì)頁(yè)面的停留時(shí)長(zhǎng)，頁(yè)面 pv 的發(fā)送時(shí)機(jī)也會(huì)有些變化，不過(guò)這些也不需要前端開(kāi)發(fā)者去感知。）
現(xiàn)在我們可以梳理一下 SDK 在用戶訪問(wèn)頁(yè)面的過(guò)程中都做了什么事：
借助 SPM 體系和 SDK 方案，我們現(xiàn)在有了用戶的訪問(wèn)路徑。我們的最終目標(biāo)是知道每個(gè)頁(yè)面究竟創(chuàng)造了多少下單。
用戶瀏覽產(chǎn)生頁(yè)面交互數(shù)據(jù)，用戶下單產(chǎn)生訂單數(shù)據(jù)。我們需要把用戶的瀏覽行為和下單結(jié)果關(guān)聯(lián)起來(lái)。
這更多是一個(gè)數(shù)據(jù)任務(wù)。
在計(jì)算引導(dǎo)成交時(shí)，會(huì)涉及到兩個(gè)概念：
在目標(biāo)頁(yè)的來(lái)源頁(yè)和來(lái)源頁(yè)的來(lái)源頁(yè)里找到了當(dāng)前頁(yè)的 spm，就認(rèn)為是當(dāng)前頁(yè)的引導(dǎo)數(shù)據(jù)。
根據(jù)路徑不同：
根據(jù)目標(biāo)頁(yè)類(lèi)型的不同
其指標(biāo)關(guān)系如下：
從上圖我們可以直觀地發(fā)現(xiàn)：全引導(dǎo)進(jìn)店的口徑是最大的，直接引導(dǎo)寶貝的口徑是最小的。
成交的口徑就比較簡(jiǎn)單了。用戶對(duì)該商品有購(gòu)買(mǎi)記錄，就認(rèn)為用戶這天有成交。
引導(dǎo)成交的紙面意義是：用戶通過(guò)我們的頁(yè)面被引導(dǎo)到目標(biāo)頁(yè)，并在目標(biāo)頁(yè)完成了下單。我們才將這個(gè)用戶及其成交情況計(jì)作當(dāng)前頁(yè)的成果。
但是從上面提到的統(tǒng)計(jì)口徑來(lái)看，成交和引導(dǎo)其實(shí)是兩個(gè)相對(duì)獨(dú)立的事件。
根據(jù)引導(dǎo)類(lèi)型的不同，又能夠進(jìn)一步拆分為直接引導(dǎo)寶貝成交，直接引導(dǎo)店鋪成交……相應(yīng)的，也有同樣的數(shù)據(jù)關(guān)系：
看數(shù)
集團(tuán)除了提供一套上報(bào) SDK，還建設(shè)了一個(gè)看數(shù)平臺(tái)，將上述提及的所有數(shù)據(jù)需求匯總在平臺(tái)上。
我們所有需要的東西就是一個(gè)頁(yè)面 spm，在平臺(tái)上檢索：
然后你就會(huì)得到想要的一切。
頁(yè)面流量
頁(yè)面引導(dǎo)轉(zhuǎn)化
頁(yè)面來(lái)源去向
區(qū)塊分析（包含區(qū)塊曝光和引導(dǎo)成交）
黃金令箭
FBI 報(bào)表
當(dāng)然，也可以從數(shù)據(jù)底表里寫(xiě) sql ，借助 FBI 平臺(tái)構(gòu)建可視化效果更好的報(bào)表。
結(jié)語(yǔ)
盡管數(shù)據(jù)之路并非總是一帆風(fēng)順，諸如數(shù)據(jù)準(zhǔn)確性、技術(shù)實(shí)現(xiàn)挑戰(zhàn)等問(wèn)題依舊存在，但正因如此，不斷探索與優(yōu)化數(shù)據(jù)應(yīng)用的方法顯得尤為重要。作為前端開(kāi)發(fā)者，掌握這些知識(shí)與技能，意味著能在激烈的市場(chǎng)競(jìng)爭(zhēng)中，為產(chǎn)品與團(tuán)隊(duì)帶來(lái)更堅(jiān)實(shí)的數(shù)據(jù)支撐，推動(dòng)業(yè)務(wù)持續(xù)增長(zhǎng)。
總之，當(dāng)前端談數(shù)據(jù)時(shí)，我們實(shí)際上在談?wù)撊绾胃玫乩斫庥脩簟?yōu)化體驗(yàn)、驅(qū)動(dòng)決策與創(chuàng)造價(jià)值。在這個(gè)數(shù)據(jù)驅(qū)動(dòng)的時(shí)代，每一位前端同學(xué)都是數(shù)據(jù)海洋中的領(lǐng)航員，用代碼編織數(shù)據(jù)的網(wǎng)，捕捉商業(yè)成功的浪花。
作者:子蟲(chóng)
來(lái)源-微信公眾號(hào):大淘寶技術(shù)
出處:https://mp.weixin.qq.com/s/fN0XiCvcLqAEXcHwxo1D0w
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
