微信小游戏接入小盟广告开发文档—媒体主

一、添加request合法域名

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

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

mini-01

⼆、创建媒体ID和⼴告位ID

  1. 登录小盟广告流量变现平台,在媒体管理 - 我的媒体下新建小程序,新建完成之后再小程序列表页获取媒体ID。 注: AppID (小程序 ID)、 AppSecret (小程序密钥 设置 - 开发者 ID 中。

  2. 媒体新建完成之后,继续新建对应广告位,扔在媒体管理 - 我的媒体页面中点击管理广告位之后进入广告位页面,新建完成之后,在页面中广告位表格中获取可广告位ID。

    注:注意区分banner、插屏、悬浮等是在页面上的不同位置;插屏是中间的方形图(背景暗掉),悬浮是位于右下角的小图片。

三、小游戏内开发

3.1 准备工作

  1. 在接⼊之前,请确认您已经完成企业认证,并已经创建了媒体和广告位。
  2. 下载API包。
  3. 以下开发过程是小盟广告接入的常规方案,目录结构和文件代码为开发案例,客户可根据自己的小游戏进行实际开发。
  4. 开发实例以首页接入小盟广告为例,其他页面参考首页开发步骤即可。
  5. 部分开发代码较多,可查看对应的文件。

3.2 目录结构

该目录仅为涉及到的开发和修改的文件

--xmad_game//小游戏文件
----js//js文件
------main.js 
------xmad_game.js  
----game.js

开发目录结构截图

3.3 game.js

在 game.js 中引⼊main.js:

import Main from './js/main'
new Main()

3.4 js

js文件中涉及到接入小盟广告的有两个文件main.js 和xmad_game.js

3.4.1 xmad_game.js

xmad_game.js 文件具体代码见文件xmad_game/xmad_game.js 中的对应文件

注:xmad_game.js可设置appkey、广告位id、开发环境env

// 配置app_key
const app_key = '请填入您在小盟媒体主后台SSP新建的小游戏的appkey'
// 配置广告位id
const adId = '请填入您在小盟媒体主后台SSP中建好的广告为id'
// 1为测试环境,0为线上环境,请使用线上环境
const env = 0

注:广告位ID是指:小盟流量变现平台 - 媒体管理 - 我的媒体页面中点击管理广告位之后进入广告位页面,在页面中广告位表格中的广告 ID,如果没有请创建。

3.4.2 main.js

在main.js中引入xmad_game.js

import XmAd from 'xmad_game'

其中 XmAd 是供开发者调用的方法,入参主要由ctx、绘制信息、回调函数。

调用方式分两种

//第一种:在已知图片上绘制
const img = wx.createImage()
img.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545484294846&di=6cd11cbc10dc080e63edd4912fa19f61&imgtype=0&src=http%3A%2F%2Fpic.downcc.com%2Fupload%2F2017-9%2F2017927103410552640.png'
img.onload = function () {
  ctx.drawImage(img, 0, 0, 300, 600)
  // 在img上绘制广告
  XmAd(
    ctx,  // 此为 canvas.getContext('2d')
    {  // 此为广告的绘制信息
     x: 10,       // 位置x轴
     y: 10,       // 位置y轴
     width: 100,  // 绘制宽度
     height: 100  // 绘制高度
    },
    function (res) { // res为true,说明有广告,并已绘制完毕
      console.log('res', res)
    }
  )
}
//第二种:所有图片都交给XmAd绘制
XmAd(
  ctx,  //此为 canvas.getContext('2d')
  [  // 数组第一项到倒数第二项都是已知的图片,url是必备属性
     // 数组最后一项是广告图片,不能有url属性
   {
    url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545484294846&di=6cd11cbc10dc080e63edd4912fa19f61&imgtype=0&src=http%3A%2F%2Fpic.downcc.com%2Fupload%2F2017-9%2F2017927103410552640.png',
    x: 0,
    y: 0,
    width: 350,
    height: 600
   },
   {
    x: 10,
    y: 10,
    width: 100,
    height: 100
   }
  ],function (res) {  // res为true,则有广告并已绘制完成
    console.log(res)
  }
)

3.5 API接入文档

API接入文档可以参看文件xmad_mini下的文档《小盟广告平台 API 接入文档V1.0》

四、广告展示和操作

4.1 广告展示

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

4.2 广告操作

1)智投广告:通过长按识别小程序码跳转到广告主小程序。(跳转小程序)

2)直投广告:通过在app.json配置广告主小程序appid后,点击广告后跳转。(跳转小程序)

直投广告需要配置广告主appid:在 app.json 的 config 中配置广告主的appid,方可成功配置跳转小程序 。

//app.json文件
"navigateToMiniProgramAppIdList": [
    // 此为广告主的appid
    "广告主的appid"
]

results matching ""

    No results matching ""