HTML 5 是具有擴展性的設計，它初衷是資料應與特定的元素相關聯，但不需要任何定義。 data-* 屬性允許我們在標準內於 HTML 元素中存儲額外的資訊，而不許需要使用類似於 classList，標準外屬性， DOM 額外屬性或是 setUserData 之類的方式。
HTML 語法非常簡單。所有在元素上以data-開頭的屬性為資料屬性。比如說你有一個連結，你想要儲存一些沒有視覺化展現意義的額外資訊。請使用 Data 屬性：
1 | <a data-ga-event-action="離開網站" data-ga-event-category="連結網址" data-ga-event-label="7947844506124926619 - 解決問題" href="http://www.cheers.com.tw/blog/blogTopic.action?id=460&nid=5394">解決問題</a> |
Data 屬性同樣可以儲存不斷變化的資訊。
不要在 Data 屬性裡儲存需要顯示及訪問的內容，因為一些其他的技術可能存取不到它們。另外爬蟲不能將Data 屬性的值編入索引中。 IE 的支援度及顯示效果是最主要討論的問題。 IE 11+ 支持這個標準，但所有更早期的版本都不支援 dataset 。為了支持 IE 10 及以下的版本，你必須使用 getAttribute() 來訪問。使用 JavaScript 的 dataset 屬性會比使用 DOM 的 getAttribute() 屬性讀取資料來得慢。
1 2 3 4 5 6 7 8 9 10 11 | var cus_div = document.getElementById('cus_div'); //使用 DOM 的 getAttribute() 屬性 var owner = cus_div.getAttribute("data-owner");// 回傳 "unknown" cus_div.setAttribute("data-owner", "henry"); // "data-owner" 變更為 "henry" cus_div.removeAttribute("data-owner"); // 完整移除 "data-owner" 屬性 //使用 JavaScript 的 dataset 屬性 var owner = cus_div.dataset.owner; // 回傳 "unknown" cus_div.dataset.owner = 'henry'; // "data-owner" 變更為 "henry" cus_div.dataset.owner = null; // 移除 "data-owner" 屬性 |
如果要追蹤點擊連結，可參考使用的頁面，請採取下列步驟：
① 將data-開頭的自訂 GA 事件類別屬性設為變數做對應，類別是您所提供的名稱，可用來分類想要追蹤的物件。
② 將data-開頭的自訂 GA 事件動作屬性設為變數做對應。替某個網頁物件要追蹤的事件或互動類型命名時，您需要使用動作參數。
③ 將data-開頭的自訂 GA 事件標籤屬性設為變數做對應。有了標籤，您就可以針對想要追蹤的事件提供更多資訊。
④ 設定點擊連結觸發條件，啟動時間設為自訂 GA 事件類別屬性必須有設定值，非預設值，才會啟動。
⑤ 在「容器」畫面中按一下 [新增代碼]，然後選取代碼類型為 Google Analytics ，並指定代碼啟用時機的觸發條件為當自訂 GA 事件類別屬性必須有設定值時，點擊建立標籤，設定如下：
⑥ 在所需版本的旁邊選取 [動作] → [預覽]。啟用預覽模式後，只要前往導入容器的網站，您就會在瀏覽器底部看到主控台視窗，檢查點擊連結會否有觸發該連結事件。
④ 按一下上方導覽列的 [版本]。接著按一下表格中所需的版本，然後按一下 [動作] → [發佈]。 Google 代碼管理工具會保留發佈紀錄，方便您查看版本生效的時間及發佈者。
完成以上的步驟即可。