前端视角解读新媒体投放

转转技术团队2024-03-12 10:48

前言

身为前端，虽然我们是技术岗位，但我们存在的意义本质还是"用技术能力去服务业务，帮助业务成功"。身在业务线，与其说我们是开发者，不如说我们其实是"技术服务提供者"。为了更好的服务，需要主动关注业务：理解业务目标和需求，学习业务知识，参与业务规划和决策，掌握用户需求，进而持续学习和提升。

这篇文章则是从前端视角解读新媒体投放，为实现业务增长目标，主动了解新媒体投放，通过技术手段，为产品提供决策，发挥前端优势。

首先，先来了解下新媒体：

一、新媒体定义

广义而言 ，新媒体是指以网络数字技术及移动通信技术为基础，利用无线通信网、宽带局域网、卫星及互联网等传播渠道，结合手机、PC、电视等设备作为输出终端，向用户提供文字图片、语音数据、音频、视频动画等合成信息及服务的新型传播形式与手段的总称。
狭义上讲，"新媒体"可以理解为"新兴媒体"，即通过技术手段改变了信息传送的通道，只是一种信息载体的变化。

二、新媒体平台

三、新媒体运营手段

新媒体运营主要利用抖音、微信、微博等新兴媒体平台策划品牌相关的优质高传播性内容或活动，进行产品宣传、推广、营销，通过向用户推送消息，吸引用户，达到相应的营销目的，新媒体需要掌握的技能主要有: 内容撰写技能、数据分析能力、用户分析能力 等。

❝

新媒体运营技能：内容撰写技能、数据分析能力、用户分析能力

  • 1、内容撰写技能（基础技能） 这是新媒体运营最基本的技能要求，新媒体运营的文案带有明确的目的性，因此，不需要有华丽的辞藻，而是要将信息通过文案清楚明白地表达给用户，做到让用户欣赏的同时，产生相应的行为，达到想要的目的。（找准定位、确定选题、内容撰写、编辑排版、发布渠道）
  • 2、数据分析能力（必备技能） 这是新媒体运营必备技能，新媒体运营人员需要拥有数据思维，能够通过数据分析表明问题：通过拆解过程数据，明确与核心指标的逻辑关系，收集数据，对数据进行建模，并对问题的结果进行分析。接下来就是分析数据、使用数据、形成报告、下一步动作。
  • 3、用户分析能力（升级技能） 撰写文案、选择发布渠道、策划活动等工作，都需要从用户角度考虑问题，因此，新媒体运营需要拥有一定的用户分析研究能力，了解用户的需求和痛点，了解用户的消费心理等。
    ● 用户运营 ：最根本的是树立用户思维，提高用户体验度。（拉新、促活、留存、转化、收益、推荐）
    ● 社群运营 ：通过增加与用户的沟通交流，完成整个销售漏斗，最后达成更多的转化。（邀请有礼、社群积分、签到）
    ● 活动运营：要思考用什么激励的手段来刺激用户参与活动。（满减、发券、拉新）此外，新媒体运营还需要有一定的排版技能、图片处理技能、沟通能力以及学习能力等。

以上，简单了解过后，我们来分析下针对新媒体投放，技术如何服务业务？

四、新媒体投放功能及技术手段

业务扩展，寻求增长进行端外投放，最大化ROI，提升转化，并对端外流量进行精细化运营，这个就需要掌握新媒体投放的技巧，以下介绍三个新媒体投放功能及技术手段。

  • ○ （一）新媒体投放 - 广告回传
  • ○ （二）新媒体投放 - 场景还原
  • ○ （三）新媒体投放 - 撞库逻辑

（一）新媒体投放 - 广告回传

定义：

从用户点击广告到下载、注册、登录、付费等一系列关键行为转化的数据统计，一方面关系到广告结费，另一方面也可以分析广告投放效果、及时调整策略缩减成本提升转化率。（需要借助小程序媒介）

技术方案：

❝

当产生广告点击跳转小程序 时，在小程序链接上加上广告ID参数信息；

广告主（开发者）通过小程序链接读取商业化callback广告信息；

同时广告主可以从第三方监测链接获取更多用户相关的信息，用于匹配转化；

发生付费等其他转化事件后，广告主匹配并填写转化信息并调用商业化API进行参数回传。

抖音

字节小程序开发者广告变现，需接入头条广告联盟的广告（目前类型有信息流广告、banenr 普通广告），产生的广告收入对开发者进行分成。

1、信息流广告
  • 步骤3： 平台会自动为小程序拼接一些参数如下：
ini 复制代码 
ad_params={"cid":1650693294639131,"log_extra":{"convert_component_suspend":0,"convert_id":1650693283285000,"external_action":19,"is_from_history":false,"is_pack_v2":true,"orit":1,"placement":"unknown","req_id":"201911201708240100260770680A01D17F","rit":1,"style_id":2310,"style_ids":[2310],"van_package":130000005},"web_url":"https://www.toutiao.com/?adid=1650693294639115\u0026creativeid=1650693294639131\u0026creativetype=4\u0026clickid=EJuQ19u_qfcCGKf2g74ZIPD89-vIATAMOAFCIjIwMTkxMTIwMTcwODI0MDEwMDI2MDc3MDY4MEEwMUQxN0ZIAQ","intercept_flag":2}&adid=1650693294639115&age=18&clickid=EJuQ19u_qfcCGKf2g74ZIPD89-vIATAMOAFCIjIwMTkxMTIwMTcwODI0MDEwMDI2MDc3MDY4MEEwMUQxN0ZIAQ&creativeid=1650693294639131&creativetype=4&name=lilei
javascript 复制代码 
//  小程序API回传 uniapp_bm/src/lib/adTTLog.js
const adTTLog = ({clickId, eventType}) => {
  if (!clickId) return
  uni.request({
    url: 'https://analytics.oceanengine.com/api/v2/conversion',
    data: JSON.stringify({
      event_type: eventType || 'page_view',
      context: {
        ad: {
          //callback 这里需要填写的就是从启动参数里获取的 clickid
          callback: clickId,
        },
        timestamp: new Date().getTime()
      }
    }),
    method: "POST",
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    success: (res) => {console.log('广告投放埋点回传成功 res: ', res)}),
    fail: (err) => {console.log('广告投放埋点回传异常：', e)})
  })
})


// index.vue 中调用 ----------------
// 信息流广告 广告id，value值需要获取 onlunch中: options.query.clickid
const clickId = 'EJuQ19u_qfcCGKf2g74ZIPD89-vIATAMOAFCIjIwMTkxMTIwMTcwODI0MDEwMDI2MDc3MDY4MEEwMUQxN0ZIAQ'
//需要回传的事件属性，更多枚举可参看：https://event-manager.oceanengine.com/docs/8650/all_events/
const eventType = 'form'
adTTLog({clickId, eventType})
arduino 复制代码 
//  小程序埋码tt.sendtoTAQ({
    event_type: 'shopping', //event_type 需替换为真实投放的事件英文名称，完成内容见附录
    extra: {
      //extra 中的属性需替换为当前事件真实可回传的附加属性字段
      product_name: '鞋子',
      product_price: 12,
    },
  });
2、普通广告

投放平台及部分截图如下：（需要提供小程序appId，启动页面，启动参数）

无法通过联调平台进行测试，只能线上测试

微信朋友圈

（微信朋友圈广告 同抖音类似 ad.weixin.qq.com/docs/232?br...

微信朋友圈数据回传分为：（接口由大数据封装统一封装处理） ● 下单回传 - [下单页下单成功行为] - ad.zhuanzhuan.com/zz/ad/apple... ● 关键页面（目标页）回传 - [投放页展现行为] - ad.zhuanzhuan.com/zz/applets/... ● 新用户注册成功回传 - [主程序内统一处理] - ad.zhuanzhuan.com/zz/ad/apple...

方案设计图：

朋友圈广告进入小程序会拼接参数 gdt_vid，并将该参数作为开启webview中h5页面的clickid的参数值，这里分为两种情况：

登录前置，是从小程序options中携带的gdt_vid || clickid ， 判定是否是朋友圈广告进入的，若有值则调用接口，进行数据回传。

登录后置，是在webview链接中的clickid ， 判定是否是朋友圈广告进入的，若有值则调用接口，进行数据回传。

源码实现（新用户注册回传）：

投放H5链接demo：m.zhuanzhuan.com/u/node_ssr_...

typescript 复制代码 
onUserAuthSucceeded(){
  let page = this instanceof Vue ? this.$root : getCurUniPage(); //获取当前页面实例
  page.$log('AUTH-SUCCESS', 'ZZWAMAIN', { page: page.$root.$mp.page.route || page.$root.$mp.page.__route__ });
  setTimeout(() => {
    adRequestAuthSucCB(page)
  }, 600) // 延时为了能拿到uid
},
...

/** 登录成功回调**进行广告回传，用于新用户注册计费 👇 adRequestAuthSucCB()
   *  - 仅朋友圈广告进入，执行登录成功回调
   *  - 广告进入小程序会携带 gdt_vid（广告id）
   *  - 投放的链接会携带 bizType 用于区分业务线：c2b/b2c/c2c 等
   *  - 乾数据对接人：***** ：https://ad.zhuanzhuan.com/zz/ad/applets/appletsNewUser
  */
 const adRequestAuthSucCB = (page) => {
    try {
      const { options } = page.$mp && page.$mp.page ? page.$mp.page : {}
      let { url, gdt_vid = '', clickid = '', bizType = '' } = options || {}
      const pageUrl = url ? decodeURIComponent(url) : ''
      clickid = gdt_vid || clickid || URL.getQueryParam(pageUrl, 'clickid')
      bizType = bizType ? bizType : URL.getQueryParam(pageUrl, 'bizType')
      if (!clickid) return // 不是从广告进入的不进行回调
      const uid = Cookie.get('uid')
      const requestParams = {uid, gdtVid: clickid, bussinessType: bizType}
      appletsNewUserReq(requestParams)
    } catch (error) {
      console.log('广告回传异常', error)
    }
  }


// appletsNewUserReq() ------ 🔽
import ZZLogin from '@zz-vc/fancy-mini-zz/lib/ZZLogin'
const API = {
  // 朋友圈广告进入，新用户注册数据回传
  appletsNewUser: 'https://ad.zhuanzhuan.com/zz/ad/applets/appletsNewUser',
}
export const appletsNewUserReq = ( params: any ) => {
  return ZZLogin.request({
    url: API.appletsNewUser,
    data: params,
    method: 'GET',
    dataType: 'json'
  })
}
//  ----- 🔼

（二）新媒体投放 - 场景还原

定义：

新媒体投放H5页面，并执行吊起逻辑（若安装转转app执行打开指定页面，若未安装则执行下载，下载后默认打开指定页面），从而进行场景还原，达到业务投放目的。

技术方案：

源码实现：

1、获取统跳连接（我司可借助tools 平台自动生成链接）

2、项目中调用：

javascript 复制代码 
isCallApp(skipUrl) {    let url = skipUrl || location.href    url = `https://m.zhuanzhuan.com/platform/zzapppages/zzdownload/index.html?isOpen=1&url=${encodeURIComponent(      url    )}`    this.$native.skipToUrl({      targetUrl: url    })}

（三）新媒体投放 - 撞库策略（端内承接）

定义：

用户通过新媒体浏览视频且有点击行为，则判定该用户是有购买意愿（强意愿&弱意愿），则需要对用户打标并进行端内承接（业务归因），如何对用户进行个性化承接的这个行为则需要执行大数据的撞库策略。撞库逻辑 + 强弱意图判定 + 业务归因

技术方案：

1、撞库逻辑（ip + ua）

● 1.每日，首次启动，平台请求大数据服务进行撞库；● 2.与大数据存储的24小时内每个业务的最近一条记录进行用户信息撞库匹配；● 3.撞库失败，且是当日新启动用户，则走通用新人承接策略进行触达；● 4.撞库成功，则根据【业务归因】及【强弱意图】进行策略触达；

2、意图判定逻辑

意图强弱判断逻辑（满足以下任意条件则定义为强意图，除此之外均为弱意图）● 1、24h内有点击行为● 2、末次行为后30min内启动 ● 3、24h内浏览频次大于1次

3、业务归因（只有单一业务无需做业务归属判断）

● （1）24h内有点击行为：取24小时内有点击行为的业务作为业务归因，如果存在多个业务均有点击行为，则该条件无法进行业务归因，使用下一级条件判断；

● （2）末次行为后30min内启动：判断用户启动时间距离最后一次行为（点击或曝光行为）时间小于等于30min，取该行为对应的业务作为归因业务；如果30min内无任何行为，则该条件无法进行业务归因，使用下一级条件判断；

● （3）24h内浏览频次大于1次：取24小时内浏览频次大于1次的业务作为业务归因，如果存在多个业务均浏览大于1次，则该条件无法进行业务归因，使用下一级条件判断；

● （4）不满足以上条件，则按24h内末次行为所属业务进行归因。

  • 源码实现（业务）：
csharp 复制代码 
// 撞库逻辑 返回结果 ========   
const hitResult = {
  hitData: 1, //是否命中撞库 0-未命中、1-命中
  newToken: 1, //是否新启动用户 0-非新启动用户、1-新启动用户
  newTokenIn7Days: 0, //是否7日新Token 0-不是 1-是
  hasActiveBehavior: 0, //前7日内是否有活跃 0-无活跃、1-有活跃
  reductionStrength: 0, //还原强度 0-弱还原、1-强还原
  intentionStrength: 1, //意图强弱程度 0-弱意图、1强意图
  businessLine: 'x'x'x', //业务线
  oriHitDataMap: { // 此处可透传一些原始数据， 如：终端、经纬度之类 }
}
javascript 复制代码 
// 转转内走新媒体撞库逻辑
fetchOperationInfo() {
  if (this.$inZZ) {
    // 整合撞库逻辑 在客户端10.3.5 版本及以上中支持，这里要判断下版本
    if (compareVs('', ' 10.3.5') > -1) return this.fetchOrerationInfoHightV()
  }
},
// 高版本这里直接处理撞库逻辑
async fetchOrerationInfoHightV() {
  const info = await this.$bmStorage.get('user_device_Info')
  if (!info) {
    this.getNewMediaDataHittingInfo()
      .then((res) => {
        this.setOriHitDataMap(res.oriHitDataMap || {})
        delete res.oriHitDataMap
        const params = res
        if (res) this.$bmStorage.set('user_device_Info', params, 1)
        this.callBack(params)
      })
      .catch((e) => {
        this.callBack()
      })
  } else {
    this.callBack(info)
  }
},
// 整合撞库逻辑,直接调用客户端sdk：【getNewMediaDataHittingInfo】
getNewMediaDataHittingInfo(needParams) {
  return new Promise((resolve, reject) => {
    try {
      this.$native.wrap('getNewMediaDataHittingInfo')({ businessLine: 'C2B' }, (res) => {
        const { hitParams, hitResult } = res || {}
        const { businessLine } = hitResult || {}
        if (businessLine == 'C2B') {
          resolve(needParams ? hitParams : hitResult)
        } else {
          reject(res)
        }
      })
    } catch (error) {
      reject(error)
    }
  })
}
callBack() {
  
}

扩展

  • 撞库策略命中误差，与撞库入参有关

    scss 复制代码 
     1、token：当前用户token，必传
 2、ipv4
 3、ipv6
 4、oaid：Android设备标识，原值
 5、idfa：iOS的设备标识，原值
 6、ua：用户代理(User Agent)

  • IPv4 和 IPv6 区别，优先使用IPv6

    IPv4是较旧的版本，没有IP地址可以分配，而IPv6是新版本，可以满足不断增长的IP地址需求。IPv4的IP地址是用十进制表示的32位数值，而IPv6的IP地址是用十六进制表示的128位数值。

  • 设备唯一标识 oaid & idfa 关闭，造成撞库策略缺陷

    同一公司：同一外网 IP 一致，同型号UA一致，容易误命中

    位置偏移：同一设备，不同IP，命中率降低

    oaid：（安卓）

idfa 关闭 （ios）

总结

以上，从前端视角解读了一下新媒体投放，从新媒体定义，到新媒体平台，到新媒体运营手段，最后是投放的技术手段。希望读了全文的你，不仅仅对新媒体有了一定的了解，也能给身为技术的你如何服务业务有一些启迪。

​

相关推荐
请叫我欧皇i几秒前
html本地离线引入vant和vue2（详细步骤）
开发语言·前端·javascript
533_3 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun9 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan40 分钟前
nodejs操作selenium-webdriver
前端·javascript·selenium
猫爪笔记1 小时前
前端：HTML （学习笔记）【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
Json_181790144802 小时前
电商拍立淘按图搜索API接口系列，文档说明参考
前端·数据库
HerayChen2 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
风尚云网2 小时前
风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02042 小时前
前端VUE项目启动方式
前端·javascript·vue.js
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作