dianshang-qianduan/src/views/portraitModel/components/funnelAnalysis.vue

<template>
  <div class="content">
    <div class="import" @click="knowledgeFlag = !knowledgeFlag">
      <img src="@/assets/images/导入.png" alt="" />
      <span>任务知识导入</span>
    </div>
    <div v-if="knowledgeFlag" v-html="`<p>1、漏斗分析模型——从注册到购买的转化率</p><p> &nbsp; &nbsp; &nbsp; 现代营销观念认为：营销管理重在过程，控制了过程就控制了结果。 用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型，其精细化程度影响着营销管理的成败，以及用户行为分析的精准度。</p><p>粗陋的漏斗分析模型因为过程管理不透明、数据分析不精细、用户行为分析不科学而造成结果失控。</p><p>1.1 什么是漏斗分析？</p><p> &nbsp; &nbsp; &nbsp; 究竟什么是漏斗分析？漏斗分析是一套流程式数据分析，它能够科学反映用户行为状态以及从起点到终点各阶段用户转化率情况的重要分析模型。</p><p> &nbsp; &nbsp; &nbsp; 漏斗分析模型已经广泛应用于流量监控、产品目标转化等日常数据运营与数据分析的工作中。例如在一款产品服务平台中，直播用户从激活 APP 开始到花费，一般的用户购物路径为激活 APP、注册账号、进入直播间、互动行为、礼物花费五大阶段，漏斗能够展现出各个阶段的转化率，通过漏斗各环节相关数据的比较,能够直观地发现和说明问题所在，从而找到优化方向。</p><p>1.2 漏斗分析模型的特点与价值</p><p> &nbsp; &nbsp; &nbsp; 对于业务流程相对规范、周期较长、环节较多的流程分析,能够直观地发现和说明问题所在。科学的漏斗分析模型能够实现以下价值：</p><p> &nbsp; &nbsp; &nbsp; • 企业可以监控用户在各个层级的转化情况，聚焦用户选购全流程中最有效转化路径；</p><p> &nbsp; &nbsp; &nbsp; • 通过不同层级的转化情况，迅速定位流失环节，持续地针对性分析找到可优化点，提升用户体验。</p><p> &nbsp; &nbsp; &nbsp; • 科学的漏斗分析能够展现转化率趋势的曲线，能帮助企业精细地捕捉用户行为变化。</p><p> &nbsp; &nbsp; &nbsp; • 不同属性的用户群体漏斗比较，从差异角度窥视优化思路。漏斗对比分析：通过观察不同属性的用户群体（如新注册用户与老客户、不同渠道来源的客户）各环节转化率，各流程步骤转化率的差异对比，了解转化率最高的用户群体，分析漏斗合理性，并针对转化率异常环节进行调整。</p><p>1.3 在漏斗分析模型中，科学归因、属性关联的重要性</p><p> &nbsp; &nbsp; &nbsp;在科学的漏斗分析中，需要科学归因设置。每一次转化节点应根据事件功劳差异（事件对转化的功劳大小）而科学设置。企业一直致力定义最佳用户购买路径，并将资源高效集中于此。而在企业真实的漏斗分析中，业务流程转化并非理想中那么简单。</p><p> &nbsp; &nbsp; &nbsp;以市场营销为例，市场活动、线上运营、邮件营销都可能触发用户购买。A 欲选购一款化妆品，通过市场活动知道了M 产品，后来在百度贴吧又了解了更多信息，但是始终没有下定决心购买。后来收到 M 公司的营销邮件，A 被打折信息及详实的客户评价所吸引，直接邮件内跳转至网站购买了该商品。</p><p> &nbsp; &nbsp; &nbsp;那么，在漏斗设置时，转化归因应该“归”哪一个渠道呢？在这个案例中，运营人员愿意以实际转化的事件的属性为准。邮件营销的渠道在用户购买决策的全流程中对用户影响的“功劳”最大、权重较大，直接促进用户转化。在科学的漏斗分析模型中，用户群体筛选和分组时，以实际转化事件——邮件营销来源的用户群体的属性为准，则大大增大了漏斗分析的科学性。</p><p>2、漏斗图能得出什么结论</p><p>漏斗图中各层级数据大小的变化可以反映出不同阶段的转化率和数量变化情况，从而揭示出一些现象和趋势。以下是一些常见的现象和解读：</p><p>（1）转化率变化：
     
    </div>
    <div v-if="!knowledgeFlag">
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/caseIcon.png" alt="" />
          <span>案例背景：</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          漏斗分析模型已经广泛应用于流量监控、产品目标转化等日常数据运营与数据分析的工作中。比如一个电商APP，用户登录APP后，会看到广告页。点击广告页后会看到产品详情，如果用户想购买，就点击进去购物车页面，再进入支付页面，完成支付。每一步，用户都有流失的可能，因此两个步骤之间有一定的转化率。<br />
          现有以下某购物APP各个流程节点的用户数据，需要用漏斗模型进行分析：
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="fileTable1"
            style="width: 650px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="" align="center" prop="data1">
            </el-table-column>
            <el-table-column label="浏览" align="center" prop="data2">
            </el-table-column>
            <el-table-column label="购物车" align="center" prop="data3">
            </el-table-column>
            <el-table-column label="订单" align="center" prop="data4">
            </el-table-column>
            <el-table-column label="支付" align="center" prop="data5">
            </el-table-column>
            <el-table-column label="完成交易" align="center" prop="data6">
            </el-table-column>
          </el-table>
          <div class="download">下载数据</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第一步，转化率计算</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          转化率=下一步人数/上一步人数*100% <br />
          流失率=1—转化率 <br />
          总体转化率/最终转化率=该步人数/总访问量（浏览量）*100% <br />
          计算结果保留小数点后一位 <br />
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step1Data"
            style="width: 900px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="" align="center" prop="data1">
            </el-table-column>
            <el-table-column label="浏览" align="center" prop="data2">
              <template #default="scope">
                <el-input
                  v-if="scope.$index != 0"
                  v-model="scope.row.params1"
                  placeholder="请输入"
                  style="width: 100px"
                >
                </el-input
                ><span v-if="scope.$index != 0"> %</span>
              </template>
            </el-table-column>
            <el-table-column label="购物车" align="center" prop="data3">
              <template #default="scope">
                <el-input
                  v-if="scope.$index != 0"
                  v-model="scope.row.params2"
                  placeholder="请输入"
                  style="width: 100px"
                >
                </el-input
                ><span v-if="scope.$index != 0"> %</span>
              </template>
            </el-table-column>
            <el-table-column label="订单" align="center" prop="data4">
              <template #default="scope">
                <el-input
                  v-if="scope.$index != 0"
                  v-model="scope.row.params3"
                  placeholder="请输入"
                  style="width: 100px"
                >
                </el-input
                ><span v-if="scope.$index != 0"> %</span>
              </template>
            </el-table-column>
            <el-table-column label="支付" align="center" prop="data5">
              <template #default="scope">
                <el-input
                  v-if="scope.$index != 0"
                  v-model="scope.row.params4"
                  placeholder="请输入"
                  style="width: 100px"
                >
                </el-input
                ><span v-if="scope.$index != 0"> %</span>
              </template>
            </el-table-column>
            <el-table-column label="完成交易" align="center" prop="data6">
              <template #default="scope">
                <el-input
                  v-if="scope.$index != 0"
                  v-model="scope.row.params5"
                  placeholder="请输入"
                  style="width: 100px"
                >
                </el-input
                ><span v-if="scope.$index != 0"> %</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="submit">提交</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第二步，绘制漏斗图</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          以各个页面节点的人数为统计指标，绘制漏斗图：
        </span>
        <div style="margin-top: 10px; display: flex">
          <div id="funnel" style="width: 600px; height: 400px"></div>
          <div class="submit">提交</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第三步，结果分析</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          基于转化率结果计算和图标分析，得出结论：
        </span>
        <div style="margin-top: 10px; display: flex">
          <div>
            <div>
              <span>流失率排第一位的：</span>
              <el-select
                v-model="asdas"
                placeholder="请选择"
                style="width: 160px"
              >
                <el-option :label="'浏览--购物车'" :value="'浏览--购物车'" />
                <el-option :label="'购物车--订单'" :value="'购物车--订单'" />
                <el-option :label="'订单--支付'" :value="'订单--支付'" />
                <el-option :label="'支付--完成交易'" :value="'付--完成交易'" />
              </el-select>
            </div>
            <br />
            <div>
              <span>流失率排第二位的：</span>
              <el-select
                v-model="asdas2"
                placeholder="请选择"
                style="width: 160px"
              >
                <el-option :label="'浏览--购物车'" :value="'浏览--购物车'" />
                <el-option :label="'购物车--订单'" :value="'购物车--订单'" />
                <el-option :label="'订单--支付'" :value="'订单--支付'" />
                <el-option :label="'支付--完成交易'" :value="'付--完成交易'" />
              </el-select>
            </div>
            <p>
              注：实际运用时
              ，转化率需要与不同时期比较、与竞争对手、行业平均水平比较，分析的结果相对准确些。
            </p>
          </div>

          <div class="submit">提交</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第四步，营销运营改进</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          针对转换率较低的环节步骤，制定改善措施： </span
        ><br />
        <span style="line-height: 25px; font-size: 14px">
          一、简化购物流程<br />
          购物车转化率受到购物流程的影响。如果购物流程复杂或繁琐，消费者可能会因为不方便而放弃购买。因此，简化购物流程是提高购物车转化率的关键。<br />
          1.
          减少步骤：尽量减少购买过程中的步骤和页面数量。消费者希望能够快速完成购买，如果购买过程过于复杂，他们可能会选择放弃。<br />
          2.
          简化表单：简化购买表单，只收集必要的信息。过多的信息收集可能会让消费者感到烦扰，从而影响购买意愿。 </span
        ><br />
        <span style="line-height: 25px; font-size: 14px">
          二、优化产品页面<br />
          产品页面是消费者了解和选择产品的关键环节。优化产品页面可以提高购物车转化率。<br />
          1.
          清晰的产品信息：确保产品页面上提供清晰、详细的产品信息，包括产品描述、规格、图片等。消费者需要充分了解产品才能做出购买决策。<br />
          2.
          强调产品优势和价值：突出产品的独特卖点和优势，让消费者明白购买该产品的价值和好处。<br />
          3.
          用户评价和评级：展示其他消费者的评价和评级可以增加消费者对产品的信任度和购买意愿。<br />
          4.
          清晰的购买按钮：在产品页面上放置清晰、醒目的购买按钮，方便消费者快速添加产品到购物车。<br />
          比如下决心改进广告页，更换了素材，更换了页面布局，最后有了ABC版本，这时候可以观察每个版本效果。如下图，持续改进广告页以后，能看到广告页点击有了提升，最终转化率也提升了。 </span
        ><br />

        <img src="@/assets/images/u3812.png" alt="" />
      </div>
      <div class="line"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
const knowledgeFlag = ref(false);
const step1Data = ref([
  {
    data1: "人数",
    data2: "2071",
    data3: "622",
    data4: "284",
    data5: "235",
    data6: "223",
  },
  {
    data1: "上一步转化率",
    data2: "2071",
    data3: "622",
    data4: "284",
    data5: "235",
    data6: "223",
  },
  {
    data1: "上一步流失率",
    data2: "2071",
    data3: "622",
    data4: "284",
    data5: "235",
    data6: "223",
  },
  {
    data1: "最终转化率",
    data2: "2071",
    data3: "622",
    data4: "284",
    data5: "235",
    data6: "223",
  },
]);
const fileTable1 = ref([
  {
    data1: "人数",
    data2: "2071",
    data3: "622",
    data4: "284",
    data5: "235",
    data6: "223",
  },
]);
const step2Data = ref([
  {
    name: "A",
    amount: "3",
    account: "800",
  },
  { name: "B", amount: "4", account: "1200" },
  { name: "C", amount: "6", account: "600" },
  { name: "D", amount: "7", account: "1400" },
]);
const step3Data = ref([
  {
    data1: "男士配饰",
    data2: "5900",
  },
  {
    data1: "床上用品",
    data2: "2400",
  },
  {
    data1: "婴儿用品",
    data2: "1100",
  },

  {
    data1: "儿童服装",
    data2: "600",
  },
]);
const step4Data = ref([
  {
    data1: "男士配饰",
    data2: "5900",
    data3: "59%",
    data4: "2",
  },
  {
    data1: "床上用品",
    data2: "2400",
    data3: "83%",
    data4: "3",
  },
  {
    data1: "婴儿用品",
    data2: "1100",
    data3: "94%",
    data4: "1",
  },
  {
    data1: "儿童服装",
    data2: "600",
    data3: "100%",
    data4: "1",
  },
]);
const step5Data = ref([
  {
    title: "平均值",
  },
]);
const step6Data = ref([
  {
    data1: "1",
    data2: "小明",
    data3: "4",
    data4: "2",
    data5: "4",
  },
  {
    data1: "2",
    data2: "小红",
    data3: "5",
    data4: "2",
    data5: "2",
  },
  {
    data1: "3",
    data2: "小李",
    data3: "5",
    data4: "1",
    data5: "1",
  },
]);
const rulesTable = ref([
  {
    data1: "1.重要价值用户",
    data2: "高",
    data3: "高",
    data4: "高",
  },
  {
    data1: "2.重要发展用户",
    data2: "高",
    data3: "低",
    data4: "高",
  },
  {
    data1: "3.重要保持用户",
    data2: "低",
    data3: "高",
    data4: "高",
  },
  {
    data1: "4.重要挽留用户",
    data2: "低",
    data3: "低",
    data4: "高",
  },
  {
    data1: "5.一般价值用户",
    data2: "高",
    data3: "高",
    data4: "低",
  },
  {
    data1: "6.一般发展用户",
    data2: "高",
    data3: "低",
    data4: "低",
  },
  {
    data1: "7.一般保持用户",
    data2: "低",
    data3: "高",
    data4: "低",
  },
  {
    data1: "6.一般挽留用户",
    data2: "低",
    data3: "低",
    data4: "低",
  },
]);
const typeData = ref([
  {
    data1: "A类商品",
    data2: "占总销售额的80%，需要重点关注",
  },
  {
    data1: "B类商品",
    data2: "占总销售额的10%，给予次要关注",
  },
  {
    data1: "C类商品",
    data2: "占总销售额的10%，给予一般关注",
  },
]);
const option = {
  title: {
    text: "漏斗图",
    // color:'#fff'
    textStyle: {
      color: "#fff",
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{b} : {c}",
  },
  //   toolbox: {
  //     feature: {
  //       dataView: { readOnly: false },
  //       restore: {},
  //       saveAsImage: {},
  //     },
  //   },
  legend: {
    data: ["浏览", "购物车", "订单", "支付", "完成交易"],

    itemStyle: {},
    textStyle: {
      color: "#fff",
    },
  },
  series: [
    {
      name: "Funnel",
      type: "funnel",
      left: "10%",
      top: 60,
      bottom: 60,
      width: "80%",
      min: 0,
      max: 2071,
      minSize: "0%",
      maxSize: "100%",
      sort: "descending",
      gap: 2,
      label: {
        show: true,
        position: "inside",
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: "solid",
        },
      },
      itemStyle: {
        borderColor: "#fff",
        borderWidth: 1,
      },
      emphasis: {
        label: {
          fontSize: 20,
        },
      },
      data: [
        { value: 2071, name: "浏览" },
        { value: 622, name: "购物车" },
        { value: 284, name: "订单" },
        { value: 235, name: "支付" },
        { value: 223, name: "完成交易" },
      ],
    },
  ],
};
onMounted(() => {
  var chartDom = document.getElementById("funnel");
  var myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
});
const moveUp = (index, row) => {
  console.log("上移", index, row);
  if (index > 0) {
    const upDate = step2Data.value[index - 1];
    step2Data.value.splice(index - 1, 1);
    step2Data.value.splice(index, 0, upDate);
  } else {
    alert("已经是第一条，不可上移");
  }
};
const moveDown = (index, row) => {
  console.log("下移", index, row);
  if (index + 1 === step2Data.value.length) {
    alert("已经是最后一条，不可下移");
  } else {
    const downDate = step2Data.value[index + 1];
    step2Data.value.splice(index + 1, 1);
    step2Data.value.splice(index, 0, downDate);
  }
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  background: rgba(0, 29, 64, 0.5);
  border: 1px solid #0452c6;
  padding: 10px;
  //   opacity: 0.5;

  .import {
    display: flex;
    font-size: 15px;
    font-weight: bold;
    width: 180px;
    height: 56px;
    background-image: url("@/assets/images/01.png");
    background-size: 180px 56px;
    text-align: center;
    align-items: center;
    line-height: 56px;
    cursor: pointer;
    img {
      margin-left: 20px;
      margin-right: 15px;
    }
  }
  .caseBack {
    .title {
      font-weight: bold;
      margin-top: 10px;
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
      }
    }
    .download {
      cursor: pointer;
      margin-left: 20px;
      color: #000;
      padding-left: 10px;
      font-size: 14px;
      text-align: center;
      line-height: 31px;
      width: 89px;
      height: 31px;
      background: url("@/assets/images/downloadIcon.png");
    }
    .submit {
      cursor: pointer;
      margin-left: 20px;
      color: #000;
      padding-left: 10px;
      font-size: 14px;
      text-align: center;
      line-height: 31px;
      width: 99px;
      height: 31px;
      background: url("@/assets/images/提交任务.png");
    }
    .customerType {
      padding-left: 10px;
      display: flex;
      align-items: center;
      width: 945px;
      height: 26px;
      background: #003b75;
      border-radius: 10px;
      border: 1px solid #0052a3;
      font-size: 12px;
      margin-top: 10px;
      img {
        margin-right: 10px;
      }
    }
  }
  .line {
    width: 1400px;
    height: 1px;
    border: 1px solid #0452c6;
    opacity: 0.5;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
::v-deep .el-table tr {
  background-color: #002652 !important;
  color: #fff;
}
</style>