移动网页广告引入mraid.js使用指南

在网上找mraid相关资料,相对比较少,大多都是API介绍,概念介绍等,没有一份详细的移动端网页广告使用教程,经过自己两天的摸索,完成了开发的移动端网页版的广告加入mraid功能。

背景:

我开发了移动端网页展示的广告,由于产品的要求,要实现广告中的视频在用户看到的时候才会继续播放,不看的时候不会播放,而默认设置的video 的autoplay自动播放会在用户打开的情况下,即使看不到也是种播着,影响了用户看到的广告效果,即可能会降低点击率和转化率。

而mraid具有天然的优势,mraid可以识别用户是否在看着广告,可以识别用户的点击跳转,可以出现关闭按钮点击关闭,可以缩放广告等,推荐mriad中文版教程:

https://github.com/graypants/mraid_cn/blob/master/mraid_cn.md

开始

1、在网页中首先引入mraid.js【直接引入即可,不需要在本地放mraid.js,页面在支持mraid的app中会自动注入】

<script src="mraid.js"></script>

2、在PC端开发完成之后,不方便测试mraid效果,推荐这个网站:http://webtester.mraid.org/

可以在线设置广告位的宽高,粘贴代码,render之后查看效果。

3、mraid实现视频用户浏览时播放,并且点击下载mraid跳转完整代码:

let v = document.getElementsByTagName("video")[0];//获取video元素
let ad_pic = document.getElementsByClassName("ad_pic")[0];//视频暂停时的图片
// 视频播放
function videoPlay() {
    let videoIsPlay = v.play();
    if (videoIsPlay !== undefined) {
        videoIsPlay.then(() => {//通过异步的方式避免报错
            ad_pic.style.display = "none";
        }).catch((err) => {
            console.log(err);
            ad_pic.style.display = "none";//默认暂停时的图片隐藏
            //视频元素可以选择静音后再播放,提示用户打开声音
            v.muted = true;
            v.play();
        });
    }
}
//图片点击播放
function cardClick(event) {
    "use strict";
    ad_pic.addEventListener(event, function () {
        videoPlay();
        v.className = '';
    }, true);
}
function adPic() {
    cardClick('tap');
    cardClick('click');
}
// mraid判断
function mraidPlay() {
    "use strict";
    if (mraid.getState() === 'loading') {
        mraid.addEventListener('ready', onSdkReady);
    } else {
        onSdkReady();
    }
    function onSdkReady() {
        if (mraid.isViewable()) {
            videoPlay();
        } else {
            mraid.addEventListener('viewableChange', function (viewable) {
                if (viewable) {
                    mraid.removeEventListener('viewableChange');
                    videoPlay();
                }
            });
        }
    }
}

在使用video.play()方法的时候,有时候会出现报错:

Uncaught (in promise) DOMException

有一篇文章写的比较好:推荐一下

4、mraid代码实现的流程:

先判断mraid状态是否为loading,如果为loading要给mraid注册ready事件,在ready事件中进行相应mraid代码执行,比如判断用户是否在浏览广告,如果不是loading状态,则说明是ready状态,直接执行mraid操作的代码。

mraid.js,所有事件发生都要在ready之后,mraid.open也需要ready之后,只要引入了mraid.js,就可以识别mraid对应的方法存在,但是事件的执行要在ready事件之后。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开心的学习之路

JavaScript概览

近日的项目需要用JavaScript完成,于是决定通读《JavaScript高级程序设计第三版》,书是2012年的,比较老了,但是可以用来快速了解JavaScr...

11030
来自专栏深度学习之tensorflow实战篇

JavaScript 学习一

在html中调用js代码的方法主要有两种(一般js代码放在body的最下面,将其他解释完在加载js,): 一、将javascript直接写在html文件中,...

11130
来自专栏JAVA技术zhai

半路出家程序员的痛旁人不会懂

非科班出身的程序员,不仅要面对科班出身者的技术优势,还要面临职场偏见,尽管压力重重,但只要够努力,这一切都不是问题。

20130
来自专栏JAVA技术zhai

大厂面试官:Java工程师的“十项全能”

13850
来自专栏深度学习之tensorflow实战篇

mongodb11天之屠龙宝刀(九)js函数入门:MongoDB基于js的数据类型修改

mongodb11天之屠龙宝刀(九)js函数入门:MongoDB基于js的数据类型修改 原文连接:直通车 Mongodb并不提供Alter table这...

7330
来自专栏信数据得永生

Hexo 入门指南(二) - 安装、初始化和配置

站点的配置文件是_config.yml,如果你不小心改花了,这里提供了一份默认的:

20470
来自专栏专注 Java 基础分享

并发编程之显式条件

我们之前介绍 synchronized 关键字语义的时候说过,synchronized 虽然不需要我们手动的加锁和释放锁了,但不代表他没有用到锁。同时,我们说每...

9850
来自专栏信数据得永生

Javascript中四种函数调用方式

function showmsg(){ console.log(this);}

8320
来自专栏五毛程序员

解决easyui combobox赋值boolean类型的值时,经常出现的内容显示的value而不是text的bug

本来这是一个很简单的combobox赋值,但是当我真正赋值时却出现了问题,经常出现一个bug,就是赋值完,combobox显示的内容是true或者false,而...

13130
来自专栏深度学习之tensorflow实战篇

HTML5与HTML4的区别,新增的元素有哪些?

注:部分格式编写存在<>封闭错误,只为在博客中显示,并非正确写法。 1. HTML5推出的理由

28830

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励