小程序接入广告

1.引入npm包

npm install 4pyun-ad-sdk

2.构建

• uni-app框架：小程序自定义组件支持
• 在根目录新建wxcomponents文件夹
• 打开node_modules/4pyun-ad-sdk文件，copy目录中整个src文件到wxcomponents目录下，按需重命名使用
• 目录结构

┌─wxcomponents              微信小程序自定义组件存放目录
│   └──4pyun-ad-sdk      微信小程序自定义组件
│        ├─index.js
│        ├─index.wxml
│        ├─index.json
│        └─index.wxss
├─pages
├─main.js
├─App.vue
├─manifest.json
└─pages.json

• 小程序原生：小程序npm支持
• 小程序开发者工具 -> 详情(工具右上角) -> 本地设置 -> 使用npm模块
• 小程序开发者工具 -> 工具 -> 构建 npm
• 构建成功后小程序代码包中将产出 "miniprogram_npm" 文件夹

3.使用

• uni-app框架：小程序自定义组件支持
• 找到需要引入广告的页面
• 页面的json文件中做如下配置

// pages.json
{
  "pages": [
    {
      "path": "4pyun-ad-sdk/4pyun-ad-sdk,
      "style": {
          "usingComponents": {
              "4pyun-ad-sdk": "/wxcomponents/4pyun-ad-sdk/index"
          }
      }
    }
  ]
}

1. 在页面中引入该组件

<template>
  <4pyun-ad-sdk
    space_id="{{space_id}}"
    openid="{{openid}}"
    app_id="{{app_id}}"
    provider_code="{{provider_code}}"
    personas="{{personas}}"
  >
  </4pyun-ad-sdk>
</template>

<script>
  export default {
    data() {
        return {
            space_id: '',
            openid: '',
            app_id: '',
            provider_code: '',
            personas: {
                mobile: '131xxxxxxxx',
                plate: '粤BAAAAA',
            }
        }
    }
  }
</script>

• 小程序原生
• 找到需要引入广告的页面
• 页面的json文件中做如下配置

// index.json
{
    "usingComponents": {
        "4pyun-ad-sdk": "4pyun-ad-sdk"
    }
}

1. 在页面中引入该组件

// index.wxml

<4pyun-ad-sdk
  space_id="{{space_id}}"
  openid="{{openid}}"
  app_id="{{app_id}}"
  provider_code="{{provider_code}}"
  personas="{{personas}}"
>
</4pyun-ad-sdk>

// index.js
data: {
  space_id: '',
  openid: '',
  app_id: ''
  provider_code: '',
  personas: {
    mobile: '131xxxxxxxx',
    plate: '粤BAAAAA',
  }
}

4.参数说明

personas参数说明

5.特殊场景说明

• 跳转webview的情况： 当广告点击后跳转的目标是h5链接的情况下，组件内部会返回一个回调事件(render)，返回跳转的链接H5及投放ID（广告曝光时需要传入）

需要准备的工作：

1. 支持H5链接的跳转 webview文档
2. 在webview加载完成后调用我方的曝光接口

// index.wxml
<4pyun-ad-sdk
  // ...
  bindrender="getInfo"
>
</4pyun-ad-sdk>

// index.js
page({
    methods: {
        getInfo(result) {
            // 需业务方支持webview的加载
            wx.navigateTo({
                url: `/pages/web-view/index?src=${result.link}&push_id=${result.push_id}`
            })
        }
    }
})

// pages/web-view/index.wxml

<web-view src="{{src}}" bindload="webload"></web-view>

// pages/web-view/index.js

const adService = require('4pyun-ad-sdk/index.js')

page({
    data: {
        src: "",
        push_id: ""
    },
    onLoad(options) {
        this.setdata({
            src: options.src,
            push_id: options.push_id
        })
    },
    methods: {
        webload(e) {
            if (e.detail.src) {
                // 加载成功，调用曝光
                adService.ack(this.data.push_id, 5);
            }
        }
    }
})