杭州品诺科技

主题

使用方法 ​

1.引入sdk ​

js
<script src="https://cdn.zzspider.com/js/zzad.bundle.min.js"></script>

2.设置广告节点 ​

html
<div id="html-space"></div>

3.加载广告组件 ​

js
const adElement = document.getElementById("html-space");
const ad = new ZZADComponent({
  target: adElement,
  props: {
    appid:"sp0o2884wwh1athxcd", // 应用编号，平台分配
    provider:"123456", // 车场编号
    space_code:"ad_banner_a001", // 广告位
    user_id:"123", // 用户id
    development: true, // 是否测试环境，上线前请去除该行代码
    onSuccess: (res) => {
      // 对应广告拉取成功，可在此执行拉取成功上报逻辑
      console.log("广告拉取成功");
    },
    onLoad: (res) => {
      // 对应广告曝光（图片加载展示）成功， 可在此执行曝光成功上报逻辑
      console.log("广告曝光成功");
    },
    onClick: (res) => {
      // 对应广告点击成功，可在此执行点击上报逻辑
      console.log("广告点击成功");
    },
    onFail: (res) => {
      // 对应广告拉取失败，可在此执行拉取失败逻辑
      console.log("广告拉取失败");
    }
  }
})

参数介绍 ​

参数类型默认值描述是否必填
targetHTMLELEMENTnone指定HTMLELEMENT(HTML标签)来渲染是
propsobject{}提供给component的属性对象是

props 说明

参数类型默认值描述是否必填
appidstring-对接时配的应用ID是
space_codestring-广告位编码,编码对应关系是
providerstring-停车场的唯一编号（不涉及隐私，平台后续可以根据此编号关闭车场广告等）是
user_idstring-用户唯一编码（微信公众号下的openid或内部定义用户唯一编码，不涉及隐私，后续可针对用户投诉屏蔽广告）是
developmentbooleanfalse是否测试环境，生产环境请去掉该字段-
onSuccessfunction-广告拉取成功回调函数-
onLoadfunction-广告渲染成功（图片资源加载成功）回调函数-
onClickfunction-广告点击回调函数-
onFailfunction-广告加载失败回调函数-

广告样式 ​

SDK会根据后台配置，根据对应广告位生成标准样式, 无需进行其他配置。详见广告示例

在线demo ​

在线demo

完整代码示例 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.zzspider.com/js/zzad.bundle.min.js""></script>
</head>
<body>
  <div id="ad-space"></div>
</body>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const adElement = document.getElementById("ad-space");
    const ad = new ZZADComponent({
      target: adElement,
      props: {
        appid:"sp0o2884wwh1athxcd", // 应用编号，平台分配
        provider:"123456", // 车场编号
        space_code:"ad_banner_a001", // 广告位
        user_id:"123", // 用户虚拟id
        development: true, // 是否测试环境，上线前请去除该行代码!!!
        onSuccess: (res) => {
          // 对应广告拉取成功，可在此执行拉取成功上报逻辑
          console.log("广告拉取成功");
        },
        onLoad: (res) => {
          // 对应广告曝光（图片加载展示）成功， 可在此执行曝光成功上报逻辑
          console.log("广告曝光成功");
        },
        onClick: (res) => {
          // 对应广告点击成功，可在此执行点击上报逻辑
          console.log("广告点击成功");
        },
        onFail: (res) => {
          // 对应广告拉取失败，可在此执行拉取失败逻辑
          console.log("广告拉取失败");
        }
      }
    })
  });
</script>
</html>

npm ​

1.安装npm包 ​

bash
npm i zzad-component

2.vue代码示例 ​

vue
<template>
	<view class="content">
		<view id="html-space"></view>
	</view>
</template>

<script>
	import ZZADComponent from 'zzad-component';
	export default {
		data() {
			return {
			}
		},
		mounted() {
			this.$nextTick(() => {
                // 确保能获取dom进行挂载广告
				const adElement = document.getElementById("html-space");
				const ad = new ZZADComponent(adElement, {
				    appid:"sp0o2884wwh1athxcd", // 应用编号，平台分配
				    provider:"123456", // 车场编号
				    space_code:"ad_banner_a001", // 广告位
				    user_id:"123", // 用户虚拟id 请尽可能使用微信或支付宝openid
				    development: true, // 是否测试环境，上线前请去除该行代码
				    onSuccess: (res) => {
				      // 对应广告拉取成功，可在此执行拉取成功上报逻辑
				      console.log("广告拉取成功");
				    },
				    onLoad: (res) => {
				      // 对应广告曝光（图片加载展示）成功， 可在此执行曝光成功上报逻辑
				      console.log("广告曝光成功");
				    },
				    onClick: (res) => {
				      // 对应广告点击成功，可在此执行点击上报逻辑
				      console.log("广告点击成功");
				    },
				    onFail: (res) => {
				      // 对应广告拉取失败，可在此执行拉取失败逻辑
				      console.log("广告拉取失败");
				    }
				})
			})
			
		},
		methods: {

		}
	}
</script>