积分页,内容页埋点上传

pages/index/index.vue

@@ -2,7 +2,7 @@
   <view class="container">
     <Home ref="homeRef" v-if="globalStore.curTabIndex == 0" :scroll-top="scrollTop" />
     <Brand v-if="globalStore.curTabIndex == 1" :scroll-top="scrollTop" />
-    <Integral v-if="globalStore.curTabIndex == 2" />
+    <Integral v-if="globalStore.curTabIndex == 2" :scrollTop="scrollTop" />
     <My v-if="globalStore.curTabIndex == 3" />
     <TabBar :curTabIndex="globalStore.curTabIndex" @tabClick="handleTabClick" />
   </view>

pages/library/ContentLibrary.vue

@@ -62,7 +62,7 @@
 										height: item.imgHeight + 'rpx'
 									}"
 									mode="aspectFit"
-									@click="zhuanjiaHandler(item.link)"
+									@click="zhuanjiaHandler(item.link, subIndex)"
 								/>
 								<text 
 								class="item-text"
@@ -113,7 +113,7 @@
 									:style="{
 										height: item.imgHeight + 'rpx'
 									}"
-									@click="yingyangHandler(item?.link)"
+									@click="yingyangHandler(item?.link, subIndex)"
 									mode="aspectFit"
 								/>
 								<text 
@@ -247,7 +247,8 @@
 	import TabBarConLibrary from '@/components/TabBarConLibrary.vue';
 	import { jump, JumpType } from '@/utils/index.js';
 	import { fetchContentLibraryJSON } from '../../api/contentlibrary';
-	import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
+	import { onLoad, onShareAppMessage, onShareTimeline, onPageScroll } from "@dcloudio/uni-app";
+import md from '../../md';
 
 	const { proxy } = getCurrentInstance();
 	const $baseUrl = proxy.$baseUrl;
@@ -1343,6 +1344,25 @@
 	const activeTab = ref(0)
 	const handleTabChange = (e) => {
 		activeTab.value = e.index;
+
+		let buttonName = '';
+		switch(e.index){
+			case 0:
+				buttonName = '主内容版块分类1';
+				break;
+			case 1:
+				buttonName = '主内容版块分类2';
+				break;
+			case 2:
+				buttonName = '主内容版块分类3';
+				break;
+		}
+
+		md.sensorLogTake({
+			xcxClick: "内容集合页-二屏页面点击",
+			pageName: "内容集合页-二屏",
+			buttonName: buttonName,
+		});
 	}
 
 	//营养辅食
@@ -1361,6 +1381,25 @@
 	const activeTab2 = ref(0)
 	const handleTabChange2 = (e) => {
 		activeTab2.value = e.index;
+
+		let buttonName = '';
+		switch(e.index){
+			case 0:
+				buttonName = '次内容版块分类1';
+				break;
+			case 1:
+				buttonName = '次内容版块分类2';
+				break;
+			case 2:
+				buttonName = '次内容版块分类3';
+				break;
+		}
+
+		md.sensorLogTake({
+			xcxClick: "内容集合页-三屏页面点击",
+			pageName: "内容集合页-三屏",
+			buttonName: buttonName,
+		});
 	}
 
 	//星妈Talk
@@ -1378,6 +1417,25 @@
 	const activeTab3 = ref(0)
 	const handleTabChange3 = (e) => {
 		activeTab3.value = e.index
+
+		let buttonName = '';
+		switch(e.index){
+			case 0:
+				buttonName = '第三内容版块分类1';
+				break;
+			case 1:
+				buttonName = '第三内容版块分类2';
+				break;
+			case 2:
+				buttonName = '第三内容版块分类3';
+				break;
+		}
+
+		md.sensorLogTake({
+			xcxClick: "内容集合页-四屏页面点击",
+			pageName: "内容集合页-四屏",
+			buttonName: buttonName,
+		});
 	}
 
 	//亲子生活
@@ -1393,10 +1451,72 @@
 
 	const tupianBanben = ref(libraryData?.value?.tupianBanben);
 
+	const mdMap = ref([]);
+
+	onPageScroll((e) => {
+		// console.log('e.scrollTop=',e.scrollTop);
+		const newVal = e.scrollTop;
+
+		if(newVal > 404){
+			if(mdMap.value.indexOf('内容集合页-二屏') == -1){
+
+				md.sensorLogTake({
+					xcxPage: "内容集合页-二屏页面浏览",
+					pageName: "内容集合页-二屏",
+				});
+
+				mdMap.value.push('内容集合页-二屏');
+			}
+		}
+
+		if(newVal > 989){
+			if(mdMap.value.indexOf('内容集合页-三屏') == -1){
+
+				md.sensorLogTake({
+					xcxPage: "内容集合页-三屏页面浏览",
+					pageName: "内容集合页-三屏",
+				});
+
+				mdMap.value.push('内容集合页-三屏');
+			}
+		}
+
+		if(newVal > 1575){
+			if(mdMap.value.indexOf('内容集合页-四屏') == -1){
+
+				md.sensorLogTake({
+					xcxPage: "内容集合页-四屏页面浏览",
+					pageName: "内容集合页-四屏",
+				});
+
+				mdMap.value.push('内容集合页-四屏');
+			}
+		}
+	});
+
 	// Tab状态管理
 	const activeTab4 = ref(0)
 	const handleTabChange4 = (e) => {
 		activeTab4.value = e.index
+
+		let buttonName = '';
+		switch(e.index){
+			case 0:
+				buttonName = '第四内容版块分类1';
+				break;
+			case 1:
+				buttonName = '第四内容版块分类2';
+				break;
+			case 2:
+				buttonName = '第四内容版块分类3';
+				break;
+		}
+
+		md.sensorLogTake({
+			xcxClick: "内容集合页-四屏页面点击",
+			pageName: "内容集合页-四屏",
+			buttonName: buttonName,
+		});
 	}
 
 	onBeforeMount(async() => {
@@ -1417,6 +1537,16 @@
 
 	// 页面加载
 	onMounted(async() => {
+		if(mdMap.value.indexOf('内容集合页-首屏') == -1){
+
+			md.sensorLogTake({
+				xcxPage: "内容集合页-首屏页面浏览",
+				pageName: "内容集合页-首屏",
+			});
+
+			mdMap.value.push('内容集合页-首屏');
+		}
+		
 		const {data} = await fetchContentLibraryJSON();
 		libraryData.value = {...data};
 		tupianBanben.value = libraryData.value.tupianBanben;
@@ -1491,28 +1621,93 @@
 		uni.navigateTo({
 				url: "/pages/search/search"
 			})
+
+		md.sensorLogTake({
+			xcxClick: "内容集合页-首屏页面点击",
+			pageName: "内容集合页-首屏",
+			buttonName: "搜索框",
+		});
+
 	}
 
 	const handleBannerClick = (item, index) => {
+		let buttonName = '';
+		switch(index){
+			case 0:
+				buttonName = '第一张焦点图';
+				break;
+			case 1:
+				buttonName = '第二张焦点图';
+				break;
+			case 2:
+				buttonName = '第三张焦点图';
+				break;
+		}
+
 		jump({
 			type: JumpType.H5,
 			url: item.url
 		})
+
+
+		md.sensorLogTake({
+			xcxClick: "内容集合页-首屏页面点击",
+			pageName: "内容集合页-首屏",
+			buttonName: buttonName,
+		});
 	}
 
-	const zhuanjiaHandler = (link) => {
+	const zhuanjiaHandler = (link, subIndex) => {
 		jump({
 			type: link.type,//JumpType.H5,
 			url: link.url
 		})
+
+		let buttonName = '';
+		switch(subIndex){
+			case 0:
+				buttonName = `主内容版块分类${activeTab.value+1}-内容1`;
+				break;
+			case 1:
+				buttonName = `主内容版块分类${activeTab.value+1}-内容2`;
+				break;
+			case 2:
+				buttonName = `主内容版块分类${activeTab.value+1}-内容3`;
+				break;
+		}
+
+		md.sensorLogTake({
+			xcxClick: "内容集合页-二屏页面点击",
+			pageName: "内容集合页-二屏",
+			buttonName: buttonName,
+		});
 	}
 
 	//第二个三切页列表，营养辅食
-	const yingyangHandler = (link) => {
+	const yingyangHandler = (link, subIndex) => {
 		jump({
 			type: link.type,//JumpType.H5,
 			url: link.url
 		})
+
+		let buttonName = '';
+		switch(subIndex){
+			case 0:
+				buttonName = `次内容版块分类${activeTab.value+1}-内容1`;
+				break;
+			case 1:
+				buttonName = `次内容版块分类${activeTab.value+1}-内容2`;
+				break;
+			case 2:
+				buttonName = `次内容版块分类${activeTab.value+1}-内容3`;
+				break;
+		}
+
+		md.sensorLogTake({
+			xcxClick: "内容集合页-三屏页面点击",
+			pageName: "内容集合页-三屏",
+			buttonName: buttonName,
+		});
 	}
 
 	//第三个三切页列表，星妈Talk
@@ -1521,6 +1716,25 @@
 			type: link.type,//JumpType.H5,
 			url: link.url
 		})
+
+		let buttonName = '';
+		switch(subIndex){
+			case 0:
+				buttonName = `第三内容版块分类${activeTab.value+1}-内容1`;
+				break;
+			case 1:
+				buttonName = `第三内容版块分类${activeTab.value+1}-内容2`;
+				break;
+			case 2:
+				buttonName = `第三内容版块分类${activeTab.value+1}-内容3`;
+				break;
+		}
+
+		md.sensorLogTake({
+			xcxClick: "内容集合页-四屏页面点击",
+			pageName: "内容集合页-四屏",
+			buttonName: buttonName,
+		});
 	}
 
 	//第四个三切页列表，亲子生活
@@ -1533,6 +1747,25 @@
 				url: item?.link?.url
 			})
 		}
+
+		let buttonName = '';
+		switch(subIndex){
+			case 0:
+				buttonName = `第四内容版块分类${activeTab.value+1}-内容1`;
+				break;
+			case 1:
+				buttonName = `第四内容版块分类${activeTab.value+1}-内容2`;
+				break;
+			case 2:
+				buttonName = `第四内容版块分类${activeTab.value+1}-内容3`;
+				break;
+		}
+
+		md.sensorLogTake({
+			xcxClick: "内容集合页-四屏页面点击",
+			pageName: "内容集合页-四屏",
+			buttonName: buttonName,
+		});
 	}
 
 

views/Integral.vue

@@ -189,12 +189,12 @@
 					v-for="(item, index) in vipQuanyiData[Math.abs(itemIndex)].qunyiList" 
 					:key="index"
 					:style="{ width: privilegeSizes[item].width, height: privilegeSizes[item].height }"
-					@click="handlePrivilegeClick"
 				>
 					<image 
 						class="privilege-icon"
 						:src="$baseUrl + `integral/${tupianBanben}/${quanyiListIcon[item]}`"
 						mode="aspectFit"
+						@click="handlePrivilegeClick(privilegeSizes[item])"
 					/>
 					<image 
 						v-if="vipQuanyiData[Math.abs(itemIndex)].isNewArr.includes(item) && itemIndex >= vipLevel"
@@ -400,6 +400,8 @@
 	import { useUserStore } from "@/stores/user";
 	import { fetchIntegralJSON } from '../api/integral';
 	import RegisterLayer from "../components/RegisterLayer.vue";
+	import md from '../md';
+
 
 	const integralData = ref({
 	"tupianBanben": "1007",
@@ -1255,14 +1257,14 @@
 	const privilegeSizes = ref([
 		{ width: '68rpx', height: '87rpx', name: '月月礼' },
 		{ width: '70rpx', height: '91rpx', name: '生日礼' },
-		{ width: '94rpx', height: '87rpx', name: '育儿礼' },
-		{ width: '48rpx', height: '87rpx', name: '贺礼' },
+		{ width: '94rpx', height: '87rpx', name: '育儿课程' },
+		{ width: '48rpx', height: '87rpx', name: '鹤礼' },
 		{ width: '71rpx', height: '88rpx', name: '新人礼' },
-		{ width: '95rpx', height: '87rpx', name: '免费礼' },
-		{ width: '70rpx', height: '86rpx', name: '专端礼' },
-		{ width: '94rpx', height: '87rpx', name: '尝鲜礼' },
-		{ width: '70rpx', height: '89rpx', name: '进阶礼' },
-		{ width: '71rpx', height: '90rpx', name: '溯源礼' }
+		{ width: '95rpx', height: '87rpx', name: '免费问诊' },
+		{ width: '70rpx', height: '86rpx', name: '转段礼' },
+		{ width: '94rpx', height: '87rpx', name: '尝鲜有礼' },
+		{ width: '70rpx', height: '89rpx', name: '晋级礼' },
+		{ width: '71rpx', height: '90rpx', name: '溯源游' }
 	]);
 
 	const userStore = useUserStore();
@@ -1281,6 +1283,60 @@
 	const vipLvDatas = ref([
 	]);
 	const nickName = ref('');
+
+	const mdMap = ref([]);
+	
+
+	// Props 定义
+	const props = defineProps({
+		scrollTop: {
+			type: Number,
+			default:0
+		}
+	})
+
+	// 监听 scrollTop 变化
+	watch(() => props.scrollTop, (newVal) => {
+		// console.log('scrollTop 变化:', newVal)
+		// 执行相关逻辑，如曝光检测
+
+		if(newVal > 650){
+			if(mdMap.value.indexOf('积分服务页-二屏') == -1){
+
+				md.sensorLogTake({
+					xcxPage: "积分服务页-二屏页面浏览",
+					pageName: "积分服务页-二屏",
+				});
+
+				mdMap.value.push('积分服务页-二屏');
+			}
+		}
+
+		if(newVal > 1328){
+			if(mdMap.value.indexOf('积分服务页-三屏') == -1){
+
+				md.sensorLogTake({
+					xcxPage: "积分服务页-三屏页面浏览",
+					pageName: "积分服务页-三屏",
+				});
+
+				mdMap.value.push('积分服务页-三屏');
+			}
+		}
+
+		if(newVal > 2058){
+			if(mdMap.value.indexOf('积分服务页-四屏') == -1){
+
+				md.sensorLogTake({
+					xcxPage: "积分服务页-四屏页面浏览",
+					pageName: "积分服务页-四屏",
+				});
+
+				mdMap.value.push('积分服务页-四屏');
+			}
+		}
+		
+	})
 	
 
 	onBeforeMount(async() => {
@@ -1290,6 +1346,21 @@
 	})
 
 	onMounted(async() => {
+
+		mdMap.value = [];
+
+		if(mdMap.value.indexOf('积分服务页-首屏') == -1){
+
+			md.sensorLogTake({
+				xcxPage: "积分服务页-首屏页面浏览",
+				pageName: "积分服务页-首屏",
+			});
+
+			mdMap.value.push('积分服务页-首屏');
+		}
+		
+
+
 		const {data} = await fetchIntegralJSON();
 		integralData.value = {...data};
 
@@ -1366,6 +1437,12 @@
 
 	//banner点击事件
 	const bannerHandler = (item) => {
+		md.sensorLogTake({
+			xcxClick: "积分服务页-首屏页面点击",
+			pageName: "积分服务页-首屏",
+			buttonName: "第一张焦点图",
+		});
+
 		if(item?.url != ""){
 			jump({
 				type: item.type,
@@ -1379,6 +1456,13 @@
 
 	//攻略点击事件
 	const gonglueHandler = () => {
+
+		md.sensorLogTake({
+			xcxClick: "积分服务页-首屏页面点击",
+			pageName: "积分服务页-首屏",
+			buttonName: "攻略",
+		});
+
 		const url = vipIntegral.value.gonglue.url;
 		const type = vipIntegral.value.gonglue.type;
 		jump({
@@ -1396,6 +1480,12 @@
 
 	//会员规则
 	const vipRuleHandler = () => {
+		md.sensorLogTake({
+			xcxClick: "积分服务页-首屏页面点击",
+			pageName: "积分服务页-首屏",
+			buttonName: "会员规则入口",
+		});
+
 		const url = vipRule.value.url;
 		const type = vipRule.value.type;
 		jump({
@@ -1407,6 +1497,13 @@
 
 	//积分明细点击事件
 	const integralDetailHandler = () => {
+
+		md.sensorLogTake({
+			xcxClick: "积分服务页-首屏页面点击",
+			pageName: "积分服务页-首屏",
+			buttonName: "积分明细",
+		});
+
 		const url = vipIntegral.value.jifenmingxi.url.replace("{crmid}", memberInfo.value.memberId);
 		const type = vipIntegral.value.jifenmingxi.type;
 		console.log('积分明细链接：==',url)
@@ -1419,8 +1516,24 @@
 
 	//会员活动点击事件
 	const handleVipActiveClick = (index, item) => {
-		console.log('handleVipActiveClick：',index);
-		console.log('url',url);
+		let buttonName = '';
+		switch(index){
+			case 0:
+				buttonName = '第一张焦点图';
+				break;
+			case 1:
+				buttonName = '第二张焦点图';
+				break;
+			case 2:
+				buttonName = '第三张焦点图';
+				break;
+		}
+
+		md.sensorLogTake({
+			xcxClick: "积分服务页-二屏页面点击",
+			pageName: "积分服务页-二屏",
+			buttonName: buttonName,
+		});
 
 		const url = item?.url; 
 		const type = item?.type;
@@ -1438,6 +1551,27 @@
 	const handleGoodsItemClick = (arridx,googidx) => {
 		console.log('handleGoodsItemClick：',arridx,googidx);
 
+		let buttonName0 = '';
+		let buttonName1 = '';
+		switch(activeIndex.value){
+			case 0:
+				buttonName0 = '品牌活动版分类1';
+				break;
+			case 1:
+				buttonName0 = '品牌活动版分类2';
+				break;
+			case 2:
+				buttonName0 = '品牌活动版分类3';
+				break;
+		}
+
+		buttonName1 = `-商品${googidx + 1}`;
+		md.sensorLogTake({
+			xcxClick: "积分服务页-二屏页面点击",
+			pageName: "积分服务页-二三四屏",
+			buttonName: buttonName0 + buttonName1,
+		});
+
 		let item = productIdUrl.value[arridx][googidx-1];
 		const url = item.url.replace('{productId}',item.productId).replace('{skuId}',item.skuId);
 		const type = item.type;
@@ -1480,8 +1614,29 @@
 	};
 
 	const tabItemClick = (index) => {
-		// console.log('activeIndex=',index);
+		
 		activeIndex.value = index;
+
+		let buttonName = '';
+		switch(index){
+			case 0:
+				buttonName = '品牌活动版块部分-分类1';
+				break;
+			case 1:
+				buttonName = '品牌活动版块部分-分类2';
+				break;
+			case 2:
+				buttonName = '品牌活动版块部分-分类3';
+				break;
+		}
+
+		console.log('buttonName=',buttonName);
+
+		md.sensorLogTake({
+			xcxClick: "积分服务页-二屏页面点击",
+			pageName: "积分服务页-二屏",
+			buttonName: buttonName,
+		});
 	}
 
 	// 处理查看更多点击
@@ -1500,10 +1655,11 @@
 	//积分兑换按钮点击事件
 	const handleExchargeClick = () => {
 
-	// 	jump({
-	// 	type: 1,
-	// 	url: '/pages/library/ContentLibrary'
-	// });return;
+		md.sensorLogTake({
+			xcxClick: "积分服务页-首屏页面点击",
+			pageName: "积分服务页-首屏",
+			buttonName: "积分兑换",
+		});
 		
 		const url = vipIntegral.value.excharge.url; 
 		const type = vipIntegral.value.excharge.type;
@@ -1517,7 +1673,13 @@
 	}
 
 	//会员权益点击跳转
-	const handlePrivilegeClick = () => {
+	const handlePrivilegeClick = (item) => {
+
+		md.sensorLogTake({
+			xcxClick: "积分服务页-首屏页面点击",
+			pageName: "积分服务页-首屏",
+			buttonName: `${item.name}`,
+		});
 		
 		const url = vipQuanyiUrl.value.url; 
 		const type = vipQuanyiUrl.value.type;
@@ -1967,6 +2129,7 @@
 					right: -5rpx;
 					width: 40rpx;
 					height: 40rpx;
+					pointer-events: none;
 				}