Ouibounce 在用户离开你网站时显示模态弹窗 - 文章教程

Ouibounce 在用户离开你网站时显示模态弹窗

发布于 2020-08-26 字数 2050 浏览 1182 评论 0

Ouibounce 是一个微小的库,用于实现在用户离开你的网站的时候显示一个模式窗口。这个库可以帮助你增加着陆页的转换率。 Ouibounce 会在当鼠标光标移动到接近(或通过)视口(viewport)的顶部的时候触发,提高你的目标网页转换速率。

Ouibounce 在用户离开你网站时显示模态弹窗

默认情况下, Ouibounce 只会为每个访问者触发一次。当 Ouibounce 触发后,将会创建一个 Cookie,以确保非侵扰性的使用体验。这个库可以帮助你实现在访客离开你网站的时候提供一些有价值的内容。

安装

你可以通过下面的几种方式安装 Ouibounce :

  • Download the minified or unminified script and include it on your page
  • Get Ouibounce from cdnjs.com
  • Use Bower: curl http://bower.herokuapp.com/packages/ouibounce
  • Use NPM: npm install ouibounce

注意:Ouibounce 是由一个 umd包装,所以如果你使用/amd 或者/browserify,它仍能正常工作。

使用方法

  • 创建一个隐藏的模态窗口
  • 选择带有 vanilla ( 或者 jQuery )的模式并调用 ouibounce
  • 可选:保存函数值返回使用 public API,允许你按需使用 fire 或者 disable Ouibounce
ouibounce(document.getElementById('ouibounce-modal'));
ouibounce($('#ouibounce-modal')[0]);
//使用 public api:
var modal =ouibounce(document.getElementById('ouibounce-modal'));
modal.fire()

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0