广告-广告统计
广告统计模块功能解析文档
1. 系统架构
1.1 技术栈
分类
技术
版本
说明
前端框架
Vue.js
3.x
采用Composition API开发模式
UI组件库
Element Plus
最新版
提供丰富的UI组件支持
数据可视化
ECharts
5.x
用于绘制各种数据图表
HTTP客户端
Axios
0.27.2
用于前端与后端API通信
状态管理
Vuex
4.x
用于前端状态管理
后端框架
Spring Boot
2.5.x
提供RESTful API服务
持久层框架
MyBatis Plus
3.5.x
简化数据库操作
数据库
MySQL
5.7+
存储广告数据和统计信息
API集成
Amazon Advertising API
最新版
获取亚马逊广告数据
1.2 架构设计
广告统计模块采用前后端分离的架构设计,具体架构层次如下:
前端层 :
视图层:Vue组件,负责数据展示和用户交互
业务逻辑层:Vue组合式API,处理前端业务逻辑
API调用层:封装的API请求函数,与后端通信
后端层 :
控制层:Spring MVC控制器,处理HTTP请求
服务层:业务逻辑服务,处理核心业务逻辑
数据访问层:MyBatis Plus Mapper,与数据库交互
外部API层:与Amazon Advertising API交互,获取广告数据
数据层 :
数据库:存储广告数据和统计信息
缓存:可选,提高数据查询性能
1.3 核心流程图
sequenceDiagram
participant User as 用户
participant Frontend as 前端组件
participant API as 前端API调用
participant Backend as 后端控制器
participant Service as 后端服务
participant Mapper as 数据访问
participant DB as 数据库
participant AmazonAPI as 亚马逊广告API
User->>Frontend: 访问广告统计模块
Frontend->>API: 请求运行中活动数据
API->>Backend: GET /api/v1/advSummary
Backend->>Service: 调用getenablesumtype()
Service->>Mapper: 查询广告活动数据
Mapper->>DB: SELECT * FROM ad_campaigns WHERE status='enabled'
DB-->>Mapper: 返回活动数据
Mapper-->>Service: 处理数据
Service-->>Backend: 返回汇总数据
Backend-->>API: 200 OK { campaigns: 10, adGroups: 20, ... }
API-->>Frontend: 更新运行中活动卡片
Frontend->>API: 请求异常预警数据
API->>Backend: GET /api/v1/advSummary/warning
Backend->>Service: 调用getProductWarningIndicator()
Service->>Mapper: 查询异常数据
Mapper->>DB: SELECT * FROM ad_warning WHERE type='productads'
DB-->>Mapper: 返回异常数据
Mapper-->>Service: 处理数据
Service-->>Backend: 返回预警数据
Backend-->>API: 200 OK { impco: 5, clickco: 3, ... }
API-->>Frontend: 更新异常预警卡片
Frontend->>API: 请求广告数据分析
API->>Backend: POST /api/v1/advReport/getsumproduct
Backend->>Service: 调用getSumProduct()
Service->>Mapper: 查询广告数据
Mapper->>DB: SELECT * FROM ad_summary WHERE date BETWEEN ? AND ?
DB-->>Mapper: 返回广告数据
Mapper-->>Service: 处理数据
Service-->>Backend: 返回分析数据
Backend-->>API: 200 OK { summary: {...}, chartdata: {...} }
API-->>Frontend: 更新数据分析面板和图表
2. 前端实现
2.1 组件结构
组件名称
文件路径
主要功能
核心方法
主组件
wimoor-ui/src/views/amazon/advertisement/overview/index.vue
广告统计模块主界面
loadWaringData() , loadWaringDataDetail()
广告统计组件
wimoor-ui/src/views/amazon/advertisement/overview/components/adStatistics.vue
广告数据分析和报表
loadSummaryChartData() , loadMonthSummaryData() , refreshChart()
漏斗分析组件
wimoor-ui/src/views/amazon/advertisement/overview/components/adFunnel.vue
广告转化漏斗分析
-
ROAS排名组件
wimoor-ui/src/views/amazon/advertisement/overview/components/roasRank.vue
广告投入产出比排名
-
指标详情组件
wimoor-ui/src/views/amazon/advertisement/overview/components/indicator_detail.vue
异常指标详情
-
指标设置组件
wimoor-ui/src/views/amazon/advertisement/overview/components/indicator.vue
预警指标设置
-
2.2 核心功能实现
2.2.1 运行中活动统计
实现原理 :
通过调用 summaryApi.getenablesumtype() 获取当前运行中的广告活动、广告组、商品广告和关键词数量
数据返回后更新到 typedata 对象中,通过模板渲染到对应的数据卡片
关键代码 :
// 加载运行中活动数据
onMounted(()=>{
summaryApi.getenablesumtype().then(res=>{
state.typedata=res.data;
});
loadWaringData();
})
2.2.2 异常数据预警
实现原理 :
支持切换「商品广告」和「关键词」两种预警类型
支持选择「昨日变动」、「连续变动」、「同期变动」三种预警维度
通过调用 summaryApi.getProductWarningIndicator() 或 summaryApi.getKeywordsWarningIndicator() 获取异常预警数据
点击异常指标可查看详细信息,调用 loadWaringDataDetail() 方法
关键代码 :
// 加载预警数据
function loadWaringData(){
var param={ftype:state.waringType};
if(state.wardatatype=="productads"){
summaryApi.getProductWarningIndicator(param).then(res=>{
state.waringData=res.data;
});
}else{
summaryApi.getKeywordsWarningIndicator(param).then(res=>{
state.waringData=res.data;
});
}
}
// 查看预警详情
function loadWaringDataDetail(ftype){
indicatorDetailRef.value.show(ftype,state.waringType,state.wardatatype);
}
2.2.3 广告数据分析
实现原理 :
支持选择时间范围、广告组和币种
提供「广告数据分析」和「广告报表统计」两个标签页
「广告数据分析」标签页通过ECharts绘制趋势图表,支持多指标叠加显示
「广告报表统计」标签页以表格形式展示月度数据统计
通过调用 summaryApi.getsumproduct() 获取图表数据,调用 summaryApi.getmonthsum() 获取月度报表数据
关键代码 :
// 加载图表数据
function loadSummaryChartData(){
summaryApi.getsumproduct(state.queryParams).then(res=>{
state.summaryData=res.data.summary;
state.chartData=res.data.chartdata;
var data=res.data.summary;
data.ordersummary=res.data.ordersummary;
state.summaryData.acosas = isNanPvalue(parseFloat(data.cost), data.ordersummary);
state.summaryData.cpc = isNanvalue(parseFloat(data.cost),parseFloat( data.clicks));
state.summaryData.roi = isNanvalue(parseFloat(data.attributedSales), parseFloat(data.cost));
if(state.queryParams.currency=="USD"){
state.adList.forEach(item=>{
if(item.prefix=='¥'){
item.prefix='$';
}
})
}else{
state.adList.forEach(item=>{
if(item.prefix=='$'){
item.prefix='¥';
}
})
}
refreshChart();
})
}
// 加载月度报表数据
function loadMonthSummaryData() {
summaryApi.getmonthsum(state.queryParams).then(res=>{
state.monthData=res.data;
if(state.queryParams.currency=="USD"){
state.rows.forEach(item=>{
if(item.prefix=='¥'){
item.prefix='$';
}
})
}else{
state.rows.forEach(item=>{
if(item.prefix=='$'){
item.prefix='¥';
}
})
}
});
}
// 刷新图表
function refreshChart() {
var chartdata=state.chartData;
if (chartdata != null) {
var labels = null;
var color = [];
var legends = [];
var series = [];
state.adList.forEach(row=>{
var type = row.field;
if (row.active&&chartdata[type]) {
labels = chartdata[type]["listLabel"];
legends.push(row.name);
color.push(row.color);
var datas = {};
datas.name = row.name;
if (type == "cr" || type == "ctr" || type == "acos") {
datas.type = "line";
datas.yAxisIndex = 1;
datas.symbol = 'emptycircle';
datas.smooth = true;
datas.symbolSize = 3;
datas.itemStyle = {
normal : {
lineStyle : {
width : 2
}
}
}
} else {
datas.type = "bar";
datas.barGap = "0%";
datas.boundaryGap = "0%";
datas.barMaxWidth = 32, datas.itemStyle = {
normal : {
barBorderRadius : [ 4, 4, 0, 0 ]
}
}
}
datas.data = chartdata[type].listData;
series.push(datas);
}
});
if (labels != null) {
lineChart(legends, labels, series, color);
} else {
document.getElementById("mychart").innerHTML="
暂无数据
";
}
} else {
document.getElementById("mychart").innerHTML="暂无数据
";
}
}
2.2.4 漏斗分析
实现原理 :
通过调用相关API获取广告转化漏斗数据
使用ECharts绘制漏斗图,展示从曝光到转化的完整转化路径
分析各阶段的转化率,识别转化瓶颈
2.2.5 ROAS排名
实现原理 :
通过调用相关API获取广告ROAS数据
使用表格或图表展示ROAS排名
识别高效广告和低效广告,为优化决策提供依据
2.3 API调用
API名称
方法
URL
功能描述
参数
返回值
getenablesumtype
GET
/api/v1/advSummary
获取运行中活动数据
无
{ campaigns: 10, adGroups: 20, ads: 30, targets: 40 }
getProductWarningIndicator
GET
/api/v1/advSummary/warning
获取商品广告异常预警数据
ftype: "co"/"sequent"/"yesterday"
{ impco: 5, clickco: 3, crco: 2, acosco: 4 }
getKeywordsWarningIndicator
GET
/api/v1/advSummary/warning
获取关键词异常预警数据
ftype: "co"/"sequent"/"yesterday"
{ impco: 2, clickco: 1, crco: 0, acosco: 3 }
getsumproduct
POST
/api/v1/advReport/getsumproduct
获取广告数据分析数据
begin: "2023-01-01", end: "2023-01-31", groupid: "1", profileid: "2", currency: "USD"
{ summary: {...}, chartdata: {...}, ordersummary: 1000 }
getmonthsum
POST
/api/v1/advReport/getmonthsum
获取月度广告报表数据
begin: "2023-01", end: "2023-03", groupid: "1", profileid: "2", currency: "USD"
{ impressions: {...}, clicks: {...}, ... }
3. 后端实现
3.1 控制器
控制器名称
文件路径
主要功能
核心方法
AdvertReportController
wimoor-amazon-adv/amazon-adv-boot/src/main/java/com/wimoor/amazon/adv/controller/AdvertReportController.java
广告报表控制
getSumProductAction() , getMonthSumAction()
AdvertManagerController
wimoor-amazon-adv/amazon-adv-boot/src/main/java/com/wimoor/amazon/adv/controller/AdvertManagerController.java
广告管理控制
-
3.2 服务层
服务名称
文件路径
主要功能
核心方法
AmzAdvSumServiceImpl
wimoor-amazon-adv/amazon-adv-boot/src/main/java/com/wimoor/amazon/adv/service/impl/AmzAdvSumServiceImpl.java
广告数据汇总服务
-
AmzAdvSumProductAdsService
wimoor-amazon-adv/amazon-adv-boot/src/main/java/com/wimoor/amazon/adv/report/service/IAmzAdvSumProductAdsService.java
商品广告数据汇总服务
getSumProduct() , getMonthSumProduct() , getDaysSumProduct()
AmazonReportAdvSummaryService
wimoor-amazon-adv/amazon-adv-boot/src/main/java/com/wimoor/amazon/adv/common/service/IAmazonReportAdvSummaryService.java
广告报表汇总服务
findAdvert()
3.3 数据模型
模型名称
文件路径
主要功能
核心字段
AmzAdvSumProductAds
数据汇总模型
商品广告数据汇总
campaignId, adGroupId, adId, impressions, clicks, cost, attributedSales, attributedUnitsOrdered
AmzAdvWarning
异常预警模型
广告异常预警数据
type, subtype, indicator, value, threshold, status
AmazonReportAdvSummary
报表汇总模型
广告报表汇总数据
date, profileId, campaignId, adGroupId, adId, impressions, clicks, cost, sales
3.4 数据访问
Mapper名称
文件路径
主要功能
核心方法
AmzAdvSumProductAdsMapper
数据访问映射
商品广告数据汇总CRUD
selectSumProduct() , selectMonthSumProduct() , selectDaysSumProduct()
AmzAdvWarningMapper
数据访问映射
广告异常预警数据CRUD
selectWarningIndicator()
AmazonReportAdvSummaryMapper
数据访问映射
广告报表汇总数据CRUD
selectAdvert()
3.5 核心API实现
3.5.1 获取广告数据分析数据
实现原理 :
接收前端传入的查询参数,包括时间范围、广告组、配置文件ID和币种
构建查询参数,调用 amzAdvSumProductAdsService.getSumProduct() 获取广告数据汇总
调用 amzAdvSumProductAdsService.orderSummaryAll() 获取总销售额
调用 amzAdvSumProductAdsService.getDaysSumProduct() 获取按日汇总的数据(用于图表展示)
将数据封装返回给前端
关键代码 :
@PostMapping("/getsumproduct")
public Result