科技猎数据产品经理进阶：热力图分析的底层逻辑
热力图是网站、H5、APP运营的分析利器，可帮助产品经理分析用户行为。
热力图帮助我们深入了解用户在页面上的操作习惯和行为路径，并指导产品经理对产品进行用户体验优化，进而提升网站的转化效果。
而热力图分析是数据分析的重要手段之一。如何进行热力图分析，是数据产品经理工作中的重中之重。
1.了解热力图
热力图通过记录用户在网站或APP的点击与浏览行为，并通过热力图的形式展现出来。
简而言之，热力图就是将用户行为可视化展示。
热力图本质上是一个数值矩阵，图上每一个色块都是一个数值，通过离散数值、权重算法与分析模型等技术手段，将用户行为频度以色块的形式展现出来。
热力图通过可视化的效果呈现，帮助产品经理深入分析用户对内容及功能的访问情况、操作习惯、行为偏好等。
2.热力图分类
热力图就是将用户行为轨迹录像。
根据用户在网站、H5或APP上的点击、滚动等行为，可将热力图分为点击热力图、移动热力图、滚动热力图、链接热力图等。
1）点击热力图
点击热力图统计用户的点击行为，通过点击频度生成的热力图，可以直观了解用户对功能模块、页面内容的喜好。
数极客点击热力图
点击热力图帮助产品经理进行首屏优化，或网站深度测试。
2）移动热力图
移动热力图记录用户鼠标移动、停留等行为，通过跟踪PC端用户的鼠标移动轨迹，可以了解用户对那个区域比较感兴趣。
Google移动热力图
移动热力图帮助产品经理分析操作重点，或优化网站文案。
3）滚动热力图
滚动热力图显示了用户上下滚动页面的数据，可识别用户在页面中看到的页面比例。通过页面比例了解抵达区域留存，数值越低，越少访客关注。
Hotjar滚动热力图
滚动热力图帮助产品经理了解用户行为偏好，或辅助页面设计与内容调整等。
4）链接热力图
链接热力图聚焦链接元素的点击热度，可直观地展示用户点击页面元素的点击量、点击率等。
数极客链接热力图
链接热力图帮助产品经理检查网站链接设置是否合理，或分析链接的A/B Test效果。
3.绘制 热力图
绘制热力图（heatmap）是数据分析的常用方法，常用的绘制热力图(heatmap)软件有R，Excel，MATLAB，Graphpad，Python的matplitlib、Seaborn和pyHeatMap等。
用Excel绘制热力图，可以快速了解网站和落地页数据情况，并展现数据的差异性。
Excel原始数据
Excel绘制热力图
用Python绘制热力图，通过色差、亮度来展示数据的差异，直观易理解，能快速识别高频功能。
Python原始数据
Python绘制热力图
4.热力图应用场景
热力图是把用户的交互按照热度渲染出来的一个分析能力，因其丰富的色彩变化和生动饱满的信息表达，被应用在各种数据分析场景。
热力图分析的本质是点数据分析。热力图的应用场景有：事件分析、页面分析、活跃分析、留存分析、漏斗分析、路径分析等。
对产品经理而言，主要表现在产品运营、用户运营、内容运营及渠道运营等几个方面：
-
产品运营 ：基于热力图进行功能界面、交互设计等优化，发现问题并快速迭代产品，提高着陆页转化率。
-
用户运营： 基于热力图进行用户触点、用户路径等优化，通过运营与用户建立漏斗，降低网站的跳出率。
-
内容运营： 基于热力图进行产品卖点、文案内容等优化，深度洞察用户点击 偏好，提 升整体用户留存率。
-
渠道运营： 基于热力图进行广告投放、品牌宣传等优化，通过流量解决获客问题，激发渠道用户活跃度。
5.热力图案例拆解
以华创微课落地页为例，我们推荐了一些专栏作者的精选文章，为进一步了解文章的跳出率和退出率，并直观的分析用户行为轨迹，借助热力图分析就可以解决。
首先，新建热力图，设置首页需要分析的区域或内容，比如自定义圈选华创微课的Logo、热门活动和精选文章等内容。
华创微课圈选内容
然后，获取数据，基于页面埋点收集网站访问数据，网站通常关注的数据指标有新增用户数、用户留存率、PV、UV、转化率等，比如华创微课的用户数、页面浏览PV、内容点击UV等。
华创微课数据指标
最后，获取目标图像，进行高斯滤波、灰度处理、二值化、开运算，轮廓提取，计算坐标，绘制热力图等。
import cv2 import numpy as np import matplotlib import matplotlib.pyplot as plt from PIL import Image from pyheatmap.heatmap import HeatMap
1 ） 获取图像
Python获取指定图像，可借助PIL库来实现，PIL(Python Imaging Library)是Python一个强大方便的图像处理库，获取图像也可借助matplotlib、opencv等库。
华创微 课 官网
def ReadImg () : img = cv2.imread( 'hcwk.jpg' , 1 ) cv2.imshow( '1src' , img) return img
2）高斯滤波
Python实现高斯滤波，提取图片特征常用的方法，可以让处理后图像看起来更模糊。
华创微课 高斯滤波
def GausBlur (src) : dst = cv2.GaussianBlur(src, ( 5 , 5 ), 1.5 ) cv2.imshow( '2GausBlur' , dst) return dst
3）灰度处理
Python处理图像灰度值，是图片处理中最为重要的环节之一，包括特征提取、图像OCR、图片降噪、图片加噪等。
华创微课灰度处理
def Gray_img (src) : gray = cv2.cvtColor(src, cv2.COLOR_BGR2GRAY) cv2.imshow( '3gray' , gray) return gray
4）二值化
Python图像二值化,就是将图像上的像素点的灰度值设置为0或255,使得整个图像只有黑和白的视觉效果。
华创微课 二值化
def threshold_img (src) : ret, binary = cv2.threshold(src, 0 , 255 , cv2.THRESH_BINARY | cv2.THRESH_TRIANGLE) print( "binaryzation value %s" % ret) cv2.imshow( 'hcwk' , binary) return binary
5）开运算
Python图像开运算，就是将图像腐蚀后，进行膨胀处理，去除噪声，并保持原有形状。
华创微课 开运算
def open_mor (src) : kernel = np.ones(( 5 , 5 ), np.uint8) opening = cv2.morphologyEx(src, cv2.MORPH_OPEN, kernel, iterati class="code-snippet__number">3 ) # iterations进行3次操作 cv2.imshow( 'operation' , opening) return opening
6）轮廓提取并计算坐标
Python实现轮廓提取，需找到图像主题轮廓，用指定颜色对源图像进行轮廓标记，计算轮廓中的主体。
华创微课 轮廓坐标
def draw_shape (open_img, gray_img) : contours, hierarchy = cv2.findContours(open_img, cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE) cnt = contours[ 0 ] # 得到第一个的轮廓 rect = cv2.minAreaRect(cnt) box = cv2.boxPoints(rect) box = np.int0(box) cv2.drawContours(src, [box], 0 , ( 0 , 0 , 255 ), 3 ) # 画矩形框 # 图像轮廓及中心点坐标 M = cv2.moments(cnt) # 计算第一条轮廓的各阶矩,字典形式 center_x = int(M[ 'm10' ] / M[ 'm00' ]) center_y = int(M[ 'm01' ] / M[ 'm00' ]) print( 'center_x:' , center_x) print( 'center_y:' , center_y)
7 ）绘制热力图
Python绘制热力图，需借助pyheatmap库，将识别结果得到data的值，即data = [[x1,y1] [x2,y2] …]，传入到apply_heatmap(image，data)来绘制热力图，然后将热力图加权叠加到原图上。
华创微课 热力图
hm = HeatMap(data) hit_img = hm.heatmap( base =background, r = 100 ) # background为背景图片，r是半径，默认为10 hit_img = cv2.cvtColor(np.asarray(hit_img),cv2.COLOR_RGB2BGR) #Image格式转换成cv2格式 overlay = image1.copy() alpha = 0.5 # 设置覆盖图片的透明度 cv2.rectangle(overlay, ( 0 , 0 ), (image1.shape[ 1 ], image1.shape[ 0 ]), ( 255 , 0 , 0 ), -1 ) # 设置蓝色为热度图基本色蓝色 image2 = cv2.addWeighted(overlay, alpha, image1, 1 -alpha, 0 ) # 将背景热度图覆盖到原图 image3 = cv2.addWeighted(hit_img, alpha, image2, 1 -alpha, 0 ) # 将热度图覆盖到原图 cv2.imshow( 'ru' ,image3) cv2.imwrite( 'hcwk_heatmap.jpg' ,image3) cv2.waitKey( 0 ) return image3 if __name__== '__main__' : apply_heatmap( 'hcwk.jpg' ,[[ 191 , 80 , 80 ],[ 296 , 516 , 150 ],[ 270 , 108 , 32 ],[ 282 , 169 , 85 ],[ 400 , 163 , 8 ],[ 320 , 773 , 26 ],[ 200 , 170 , 20 ],[ 180 , 336 , 80 ],[ 220 , 230 , 10 ],[ 280 , 426 , 10 ],[ 280 , 640 , 90 ],[ 260 , 430 , 136 ],[ 240 , 360 , 50 ],[ 50 , 1126 , 220 ]])
用热力图把用户的点击、浏览、滚屏、停留等行为数据可视化，方便我们分析用户行为，了解到用户的关注点，进而优化用户体验，提升转化率，实现精细化运营。
