mpvue小程序框架接入指南—媒体主

一、添加request合法域名

微信公众平台|小程序后台 - 设置 - 开发设置：添加 request 合法域名。

https://engine.xmadx.net/
https://log.xmadx.net/

二、创建媒体

登录小盟广告流量变现平台，在媒体管理 - 我的媒体下新建小程序，新建完成之后在小程序列表页获取媒体ID。

三、创建广告位

登录小盟广告流量变现平台，在媒体管理 - 我的媒体 - 管理广告位 下新建广告位。

四、SDK接入小程序

1.在接入之前，请确认您已经完成企业认证，并已经创建了媒体和广告位。

2.下载SDK包

请根据使用的小程序框架选择解压不同压缩包，如果您使用mpvue框架，请选择xmad-mpvue-sdk.zip。

components 文件内 xmAD 为小盟广告组件。

xmadx_sdk.js 小盟SDK主文件

xmadx_conf.js 小盟SDK配置文件

3.引入JS 文件

将解压后的xmadx_sdk.js、xmadx_conf.js放入static文件夹中。

4.引入广告组件

将解压后的xmAD文件夹放入components文件夹中，若没有components请创建。

5.引入后的目录结构：

6.在xmadx_conf.js 文件中配置SDK

填写app_key,app_key是您在小盟流量变现平台 (即媒体主后台)得到的媒体ID，如果没有请创建。

exports.app_key = "媒体ID"; //请在此行填写从广告后台获取的媒体ID。
exports.plugin = false; //是否使用小程序插件
exports.getOpenid = true //是否授权小盟来获取用户的openid

7.在Vue入口文件main.js 中顶部引入SDK

// 引入SDK
import '../static/xmadx_sdk'

import Vue from 'vue'

import App from './App'

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)

app.$mount()

8. 用户openId

基于用户的openId，为用户提供更智能、精准的广告匹配机制，提高广告的转化效率 ,让每一次曝光都能获得最大收益，充分实现广告位的流量价值。

1）授权小盟获取用户openid，此时不需要做任何代码上的处理。强烈推荐!

//xmadx_conf.js
exports.getOpenid = "true"; //是否授权小盟来获取用户的openid；默认为true，开启状态，改为false为手动上报。

2）手动向小盟上报用户openid，调用wx.xmAdSednOpenid(openId)方法向小盟上报用户openId。请务必在和后端置换回openid后进行上报 参考下列代码示例。

//App.vue
export default {
  created () {},
  onShow(){
    wx.login({
      success(res){
        // 需要从服务端获取用户openId
        wx.request({
          url: 'https://blog.superwang.cn/getOpenId', //后端接口地址
          method: "post",
          data: {
            jscode : res.code
          },
          success(res){
            // 上传openId
            wx.xmAdSednOpenid(res.data.data.openid)
          }
        })
      }
    })
  }
}

五、接入广告

1.引入组件

假如您要接入的页面为/pages/index.vue。

import xmAd from '../../components/xmAD/index.vue'

2.在index.vue中配置广告位

在小盟流量主后台对应广告位获取指定广告位代码，粘贴到页面对应位置。

// ...页面其他元素...
<xm-ad :adID="xmdd4212d06d7867e2ad135bfc53a428(您的广告位id)"></xm-ad>
// ...页面其他元素...

六 .广告的跳转方式

1. 识别小程序码跳转

通过长按识别小程序码跳转到广告主小程序，无需配置广告主小程序的AppId

2. 直接跳转

通过点击广告素材直接跳转到广告主小程序，需要配置广告主小程序AppId。

1) 在我的媒体-智投广告找到广告小程序AppId

2) 配置广告小程序AppId

需要在src目录下，app.json中的 navigateToMiniProgramAppIdList 配置广告主AppId。

  "navigateToMiniProgramAppIdList": [
      // 此为广告主的appid
      "广告主的appid1",
      "广告主的appid2"
      //....
  ]

七、接入验证

1.接入验证

媒体可在微信开发者工具，在加入广告位的对应位置拉取到测试广告（带有 “小盟广告” 文字的白底图片） 。测试期间数据不会反映到您的后台，核对数据请联系我方人员。在network中，有imp(曝光日志)上报，点击广告位图片，有clk(点击日志)上报，则为配置成功。如下图所示：

八、返回广告位后的回调

业务场景需要时，请通过一下方法获取广告位请求状态。

1.成功回调

xmadSuccess(xmId, xmInfo){
    console.log(xmId) //成功返回的广告位id
    console.log(xmInfo) //成功返回的广告位详细信息
},

2.失败回调

xmadFail(xmId, code, msg){
    console.log(xmId) //失败的广告位id
    console.log(code) //错误码
    console.log(msg) //错误信息
},