商品頁視覺設計 — 成效衡量 Dashboard
過去我曾介紹過我在 CMoney如何將廣告點擊 GA 資料轉換 CTR Dashbaord，為 今天來分享我利用 Looker Studio 為 CMoney 視覺設計團隊所做的另一個 Dashboard — 用來衡量電商商品頁的設計成效。
以籌碼 K 線為例，我們的商品頁大致如下圖 : 會有一串長條圖來介紹商品 ( 此即為視覺設計師的負責範圍 )，右側則有浮動置頂的 CTA。
我認為設計師能將長條圖資訊做得精簡好讀、不至於讓用戶捲動太深而放棄觀看，或是用精美和引人入勝的設計吸引用戶看完，都能代表設計師的成功 — 因此追蹤 Scrolldepth；另外，商品圖的說服力也可能影響到用戶將商品加入購物車的意願，因此我也追蹤 CTA 轉換率。
Raw Data
依照 CMoney 在 GA 的埋點，我們在 Event Action 可以收到 CTA ( 追蹤加入購物車的點擊次數 )；在 Scrolldepth 部分，則能收到 10%, 20%, 40%, 60%, 80%, 100%，兩者都能偵測事件發生時的 URL，我透過運算式將其 utm 部分去除，也就是網址 & 以後都去掉後，即可將單一商品頁中的事件加總。
Dashboard
我將 Dashboard 完成後的成果如下，視覺設計師可以自行進來觀看，最直觀的部分是這個柱狀圖，這樣的排利方式近似漏斗圖，讓人能想像用戶是在頁面捲到何處離開的。
我們同樣可以看下面的 Pivot Table 來看明細數字 ( 藍色 )，而百分比則是指單一商品頁中的事件佔比，用來做跨商品頁的比較。
如果視計師想要只看他負責設計的單一商品頁面、或特定上網裝置、商品類型，我則有各提供一個 Filter 來讓設計師自行操作。
最後
商品頁會因為 APP / 課程的作者本身的知名度、經營個人名單認真度與其投資技法近期的獲利能力而有對用戶有不同的吸引力；而負則文案的行銷也有可能因企畫的不同造成超長、或簡短的商品圖，這些都有可能影響 Scrolldepth 的分佈與 CTA 點擊率。
當不確定哪個對象適合做成效比較時，我會請設計師們和商品頁全體來做比較，即高於總平均者是相對成功的。
以上是本次的分享，感謝觀看 ~
