百度智能小程序 oCPC 埋码指南

最后更新时间：2019.11.20

百度智能小程序已经支持 oCPC 转化数据采集，若您还在使用 旧版 SDK 建议您尽快升级， 升级流程参见「小程序 oCPC SDK 升级」

注意： 此文档主要介绍如何在小程序中埋码以支持oCPC投放，更多关于小程序应用开发的支持可以参考小程序开发文档和小程序开发交流社区

注意： 进行百度智能小程序 oCPC 埋码需首先将小程序开发者工具升级至最新版本

引入小程序 oCPC 组件

通过npm引入（小程序编译方式为：依赖分析）

npm install angelia-swan

注意：

1. npm install时应该在小程序的工程的根目录下进行安装

2. 安装时，请注意安装angelia-swan@0.0.10及以上版本

初始化

在app.js中引入，并初始化，注意不要重复初始化（注意下面的话放在app.js的一开始，不要放在onShow里面，可能会被重复初始化）

const angelia = require('angelia-swan');
// 直接初始化，只需要在此初始化一次，请勿对SDK重复初始化
angelia.init();

根据不同场景埋码

小程序 oCPC SDK 的 api 可以让您在不同场景针对不同传化类型来回传转化数据，您可以结合您的业务场景来选择，下面是两个较为经典的埋码场景

事件成功类埋码（包括表单提交成功埋码等）

此方式通过小程序oCPC组件的自定义上报接口来回传转化数据

附：

1. 此方式不仅限于在表单提交成功这类场景中使用，其它情况亦可采用类似的方式回传转化数据

埋码步骤

1. 引入「oCPC 组件」并初始化
2. 在转化事件发生的接口比如表单提交接口的成功回调函数中调用组件接口angelia.log回传转化数据

示例

const angelia = require('angelia-swan');

Page({

    formSubmitHandle(e) {
        swan.request({
            url: 'http://you.service.com/api/order',
            method: 'POST',
            data: '{"actid": "xxx", "item": "candies", "amount": 20}',
            header: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            success: res => {
                // 在请求成功的回调方法里回传转化数据
                angelia.log({
                    // 这里的3代表的是「表单提交成功」这一转化类型
                    // 如果需要回传其它类型的转化数据，这里应换成其它值
                    convertType: 3
                });
                swan.showToast({
                    title: "下单成功"
                })
            },
            fail: err => {
                swan.showToast({
                    title: "服务异常"
                });
            }
        });
    }
});

按钮点击类埋码（自定义属性埋码）

此方式通在组件中添加自定义属性的方式，在组件触发点击时自动回传化数据

埋码步骤

1. 引入「oCPC 组件」并初始化
2. 在 swan 模板文件中找到需要监控的组件
3. 在该组件标签上并添加自定义属性data-agl-cvt并设置其值为所需的转化类型值(可参考「小程序支持的转化类型编码」中的「点击类的转化类型编码」)

注意:

1. data-agl-cvt属性必须添加到绑定了tap事件的组件中才会生效，因为通常情况下，具有明确的执行动作的组件才会具有转化意义

示例

以页面/pages/introduce为例

/pages/introduce/introduce.swan

<view class="container">
    <view class="header">
        <image src="/images/product_logo.png"></image>
    </view>
    <view class="description">
        Bala bala
    </view>
    <view class="contract">
        <!-- 点击时自动回传「电话按钮点击」(对应类型值为2)这种类型的转化数据 -->
        <!-- 点击时触发makeCall方法（对应introduce.js中的makeCall），拨打客服电话 -->
        <button data-agl-cvt="2" bind:tap="makeCall">电话了解详情</button>
    </view>
</view>

pages/introduce/introduce.js

Page({
    onShow(e) {
    },

    /**
     * 拨打客服电话
     */
    makeCall(e) {
        // 具体实现视业务需求而定，以下为demo
        swan.makePhoneCall({
            phoneNumber: '40012345678'
        });
    }
});