愛伊米

谷歌Analytics幫助Web前端開發者進行UIUX設計

作者:Clara Buenconsejo

翻譯:W3Cschool

有沒有想過所有這些 Google Analytics(分析)程式碼段是幹什麼用的,為什麼您的營銷團隊會定期要求您新增一個新程式碼段?在本文中,我們將介紹 Google Analytics(分析)中的5個功能,這些功能可幫助網路開發人員和設計人員在其網站上提供更好的使用者體驗。

Google Analytics(分析)是目前最流行的市場營銷分析平臺之一,不僅因為其標準版本是免費的。全球有超過一百萬的組織使用此平臺來更好地瞭解其網站上的使用者行為。

但是,對於大多數 Web 開發人員而言,他們對 Google Analytics(分析)的參與僅需安裝瀏覽量的基本程式碼即可。使用 gtag。js 版本的程式碼時,該程式碼通常如下所示:

或透過 analytics。js 實現看起來像這樣:

儘管此基本實現已經提供了許多資料點,但它們最終卻錯過了其他關鍵功能。由於缺乏可用的資料進行查詢,因此甚至在某些情況下,Web開發人員或設計人員選擇刪除網站上的特定功能,卻沒有意識到大多數使用者會定期使用該功能。

因此,您可以利用以下五個 Google Analytics(分析)最重要的功能來改善使用者體驗,並將您與其他 Web 開發人員和設計人員區分開來:

1。使用事件來識別使用者在網站特定部分上的互動

如上所述,預設情況下,基本的Google Analytics(分析)程式碼僅跟蹤網頁瀏覽量。如果您想跟蹤網站上的操作,例如按鈕單擊或表單提交,則需要觸發一個單獨的Google Analytics(分析)事件。可以透過新增以下程式碼以及相應的事件類別,操作和標籤資訊來實現這些事件:

ga(‘send’, {   hitType: ‘event’,   eventCategory: ‘Event Category’,   eventAction: ‘Event Action’,   eventLabel: ‘Event Label’ });

該程式碼的簡寫版本也可以使用以下格式:

ga(‘send’, ‘event’, ‘Event Category’, ‘Event Action’, ‘Event Label’);

設定事件後,它們將顯示在 Google Analytics(分析)UI 中的“行為”>“事件”>“熱門事件”報告下:

谷歌Analytics幫助Web前端開發者進行UIUX設計

在Google Analytics(分析)中哪裡可以找到熱門事件報告。

最佳做法是,您可以使用“事件類別”根據特定功能(例如“頁面互動”,“電子商務”)對事件進行分組。同時,您可以使用事件操作來識別使用者執行的確切操作(單擊,滾動,提交表單),而可以使用事件標籤來獲取觸發事件的URL。

另外,實施這些事件的更好方法是改用 Google 跟蹤程式碼管理器。代替實際的 Google Analytics(分析)程式碼,您將需要安裝 Google 跟蹤程式碼管理器程式碼:

然後,一旦設定了Google跟蹤程式碼管理器,您所需要做的就是設定所需的Google Analytics(分析)頁面檢視程式碼和事件標籤。只需單擊“新建”按鈕來建立一個新標籤,然後單擊“標籤配置”,那麼Google Analytics(分析)將是可用的預設選項之一:

谷歌Analytics幫助Web前端開發者進行UIUX設計

在Google跟蹤程式碼管理器中建立Google Analytics(分析)程式碼。

然後,您可以在不同的Google Analytics(分析)標記型別之間進行選擇,其中包括“事件”作為其中之一。填寫程式碼配置詳細資訊後,您只需設定適當的觸發器即可觸發該事件。已經有內建的觸發器,例如在Google跟蹤程式碼管理器上的點選;您只需要選擇一種適合您的活動。

不要忘了在Google跟蹤程式碼管理器的預覽模式下測試程式碼,然後在設定完成後單擊“釋出”。

請注意,在透過Google跟蹤程式碼管理器實施事件或透過Google Analytics(分析)新增事件的實際程式碼時,請務必小心。在整個站點中,無論您選擇哪種實現方式都應該是相同的。您可以完全使用Google跟蹤程式碼管理器,也可以對實際事件程式碼進行硬編碼。

否則,您可能最終會跟蹤兩次相同的網站操作-一次是透過新增事件程式碼,另一次是透過Google跟蹤程式碼管理器-並在Google Analytics(分析)中記錄重複的資料。

在為Google Analytics(分析)設定電子商務和增強型電子商務跟蹤時,新增事件甚至變得更加重要。儘管確實需要在Google Analytics(分析)介面中開啟這些設定,但需要返回到跟蹤並新增單獨的電子商務事件。這些事件是將完整的電子商務資料集傳送回Google Analytics(分析)伺服器所必需的。

2。瞭解使用者使用滾動跟蹤事件向下滾動頁面的程度

除了跟蹤點選和表單提交之外,Google Analytics(分析)中的事件還可以用於滾動跟蹤。這可以透過新增Google Analytics(分析)事件程式碼以在視口中出現特定元素後觸發來完成。您還可以將程式碼設定為在使用者在螢幕上向下滾動特定百分比時觸發。

另外,在Google跟蹤程式碼管理器中,使用“滾動深度”觸發器可以更輕鬆地實現滾動跟蹤。您需要做的就是建立一個新觸發器,選擇“滾動深度”觸發器型別,然後填寫必要的詳細資訊。

谷歌Analytics幫助Web前端開發者進行UIUX設計

Google跟蹤程式碼管理器中的“滾動深度”觸發型別。

那麼,此功能如何在使用者體驗方面為您提供幫助?對於初學者來說,這顯然可以幫助您確定使用者願意向下滾動頁面的哪個部分。由於該資料位於Google Analytics(分析)中,因此您可以根據裝置或瀏覽器,一天中的時間,位置等對資料進行細分。

這樣,如果要確定是否可以為特定型別的使用者放置特定的小部件,則可以使用一些資料來備份您的決定。這還可以消除購買單獨的滾動跟蹤軟體的需要,因為您只需要一點時間來實現此功能。

3。估算他們實際在您的網站上花費了多少時間

瞭解人們在哪裡滾動是一回事。找出他們在網站上花費了多少時間是另一個問題。幸運的是,這也可以透過Google Analytics(分析)進行衡量。

預設情況下,安裝Google Analytics(分析)綜合瀏覽量標記後,使用者已經可以獲取一個稱為“平均”的指標。會話時長。通常理解為該度量標準,用於度量使用者每次訪問您的網站(會話)所花費的時間。

但是,該指標有時可能不準確。畢竟,Google Analytics(分析)實際上只能衡量平均。會話持續時間基於接收到的資料(命中)的時間戳。

這也解釋了為什麼大多數跳出-或其中只有一個瀏覽量或一個事件的網站訪問-具有平均水平。會話持續時間為00:00:00。

那麼您將如何解決這個限制?透過觸發定時命中。這些可以幫助準確計算使用者在頁面上花費的時間而無需記錄其他瀏覽量或事件。您只需透過實現以下程式碼以在您的站點上的特定時間間隔觸發程式碼來發送時間匹配資料:

ga(‘send’, ‘timing’, [timingCategory], [timingVar], [timingValue], [timingLabel], [fieldsObject]);

有關每個欄位的詳細說明,請訪問Google Developers網站 。

實施後,這些點選將在Google Analytics(分析)的“行為”>“網站速度”>“使用者計時”部分中可見。

另外,由於計時匹配的每日上限為10,000個,因此您可以建立自定義事件,該事件以特定的間隔觸發。與其他常規事件一樣,這些事件將在“行為”>“事件”>“熱門事件”部分中顯示。

但是,在設定定時匹配時要小心:請確保為其新增某種“超時”。這樣,如果只是在無人看管的瀏覽器上開啟頁面,這些點選就不會持續觸發,並且資料不會發送到Google Analytics(分析)。

4。找出網站上使用者卡在哪裡或其他痛點

在Google Analytics(分析)上實現事件和時間匹配後,您會在平臺的不同部分看到它們。但是,這帶來了一個新的挑戰:如何將這些不同的資料點組合到一個報告中,以顯示使用者在網站上的整個旅程?

這就是Google Analytics(分析)中的“行為流”報告起作用的地方。該報告以流程圖的形式顯示,顯示了使用者如何到達網站以及他們在下車之前進行的後續瀏覽量或採取的行動。

谷歌Analytics幫助Web前端開發者進行UIUX設計

Google Analytics(分析)中的“行為流”報告。

預設情況下,“行為流”報告使用登入頁面和使用者組要訪問的特定頁面。

您還可以更改“行為流”報告以將更多的精力放在事件上。只需單擊報表標題下方的下拉選單,然後選擇“事件”或“頁面和事件”。

谷歌Analytics幫助Web前端開發者進行UIUX設計

Google Analytics(分析)行為流報告-檢視選項。

但是,使用“行為流”報告時需要注意一點:在檢視較大網站(例如具有數百萬瀏覽量的網站)的資料時,可能會發生抽樣。設定此樣本是為了幫助Google Analytics(分析)在特定時間內處理所有資料。

為了最大程度地減少抽樣,您可以調整“行為流”報告涵蓋的日期範圍,以減少Google Analytics(分析)需要分析的資料量。此外,您還可以透過單擊“詳細程度”下拉選單並將其設定為“顯示較少的連線”來調整分析的粒度。

谷歌Analytics幫助Web前端開發者進行UIUX設計

透過選擇“詳細程度”選項,調整Google Analytics(分析)行為流報告中的粒度。

如果“行為流”報告不夠用,您還可以在Google Analytics(分析)中設定“自定義報告”。要進行設定,請轉到“自定義”>“自定義報告”,然後單擊“新建自定義報告”按鈕。

谷歌Analytics幫助Web前端開發者進行UIUX設計

在何處訪問Google Analytics(分析)中的自定義報告。

自定義報告可以採用三種不同的格式:

資源管理器,其外觀類似於預設的Google Analytics(分析)報告。

平面表。

地圖,最適合地理疊加。

您還可以調整設定以使用完全匹配或正則表示式基於特定指標進行過濾。

就是說,某些維度和指標在相互結合時可能會出現。這可能是由於這些指標具有不同的範圍-一個指標可能在使用者級別上進行衡量,而另一個指標可能在會話(網站訪問)級別上進行衡量。有關Google Analytics(分析)範圍的更多資訊,您可以檢視此Google Analytics(分析)幫助中心文章 的“處理”部分。

5。發現導致轉化和哪些操作不起作用的使用者行為型別

歸根結底,客戶或您的僱主正在建立一個網站以實現切實的目標。這可以是多種多樣的,例如線上銷售公司的產品(電子商務),為服務生成註冊(潛在客戶生成),甚至僅僅是為了促進公司的服務(知名度)。

這就是Google Analytics(分析)真正優勢所在。透過基於綜合瀏覽量和不同事件收集資料,您可以更深入地瞭解使用者在您的網站上的實際行為。此外,您可以透過建立目標來將特定的關鍵操作隔離為網站上的轉化。

為此,只需轉到管理>目標,然後單擊新目標。然後,您可以從模板中選擇,也可以根據目標“特定頁面的綜合瀏覽量”,事件,持續時間甚至許多綜合瀏覽量來設定自定義目標。

谷歌Analytics幫助Web前端開發者進行UIUX設計

轉到管理>目標,以訪問Google Analytics(分析)中的目標。

谷歌Analytics幫助Web前端開發者進行UIUX設計

使用Google Analytics(分析)目標設定設定轉化。

設定目標之後,您就可以使用Google Analytics(分析)細分來分析獲得轉化的使用者和未獲得轉化的使用者所進行的操作。預設情況下,這是可用的-只需選擇“轉化者”或“非轉化者”細分即可應用到您的報告中。

谷歌Analytics幫助Web前端開發者進行UIUX設計

Google Analytics(分析)細分:選擇“轉換器”細分。

如果您想要有關轉化的更具體的細分,則可以點選操作選項以複製細分並新增自己的條件。例如,您可以新增年齡,性別,位置或語言,以便根據受眾特徵進行進一步過濾。您還可以根據使用者訪問您網站的方式(來源和媒介),他們使用的裝置,甚至根據他們對您的網站進行的一系列操作(在“高階”>“序列”下)來建立細分。

當然,您始終可以在Google Analytics(分析)中從頭開始建立細分。只需開啟細分下拉選單,然後點選紅色的新建細分按鈕即可建立自己的細分。

谷歌Analytics幫助Web前端開發者進行UIUX設計

Google Analytics(分析)細分-細分選項。

藉助所有這些免費功能,Google Analytics(分析)確實是任何Web開發人員或設計人員都可以使用的最強大的工具之一。但是,將這些功能新增到您的站點只是冰山一角。還有許多其他功能可供探索,例如允許 Google Analytics(分析)從 IoT 裝置收集資料的 Measurement Protocol。

要了解有關 Google Analytics(分析)的更多資訊,您可以檢視以下 Google 官方資源:

Google Developers-Google Analytics(分析)文件

Analytics幫助-Google支援

Google Analytics Academy

最後,在實施Google Analytics(分析)之前,請確保仔細檢查您所在地區的資料隱私法規,以免發生任何意外違規行為。有關確保遵守這些規定的更多資訊,請查閱Google支援文章 。

透過平衡終端使用者的資料隱私權以及收集資料以獲取可行見解的需求,Google Analytics(分析)無疑是市場上最出色的UI / UX設計工具之一。