在Landingpage中加入退弹JavaScript代码

在Landingpage中加入退弹JavaScript代码

之前谈过很多关于引起用户注意力的特殊JavaScript代码,包括自动播放声音引起设备震动、以及打开Landingpage时弹出警告框等等。这些特殊JavaScript代码都是在用户刚接触Landingpage的时候发生的,还有一类JavaScript代码是在用户关闭Landingpage或打算关闭Landingpage时发生,比如今天金橙子海外联属营销网将要讲述的退弹JavaScript代码。

关于退弹的JavaScript代码有很多种,我们今天讲述两种,一种是当用户欲关闭Landingpage时发生,另外一种是用户已经点击了浏览器关闭按钮之后发生,到底哪种代码效果好,需要你自己Split测试。

1、用户欲关闭浏览器时弹出对话框

<script src="./files/ouibounce.js" type="text/javascript"></script>
<link rel="stylesheet" href="./files/ouibounce.min.css">
<div id="ouibounce-modal">
	<div id="popup">
		<div id="close">×</div>
		<div id="popup_img" class="hos_modal">
			<a id="bookmarkme" rel="sidebar" title="Bookmark this page or Add to Your Favorites">
				<img src="./files/pop.jpg">
			</a>
		</div>
	</div>
</div>
<script type="text/javascript">
	// if you want to use the 'fire' or 'disable' fn,
	// you need to save OuiBounce to an object
	var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
		aggressive: true,
		callback: function() {
			console.log('ouibounce fired!');
		}
	});
	$('body').on('click', function() {
		$('#ouibounce-modal').hide();
	});
	$('#ouibounce-modal .modal-footer').on('click', function() {
		$('#ouibounce-modal').hide();
	});
	$('#ouibounce-modal .modal').on('click', function(e) {
		e.stopPropagation();
	});
	$("#close").click(function() {
		$("#popup").hide();
	});
</script>

将上面的JS代码复制到你Landingpage中的<body>标签中,文件pop.jpg为当用户试图关闭浏览器时弹出的一个图片,替换成你想要的即可,如果你想用户点击图片之后跳转到相应的Offer,只需要在图片上的<a>标签中加入超链接即可。代码中的2个引用文件点击这里下载,最终效果图如下所示:

在Landingpage中加入退弹JavaScript代码

1、用户点击浏览器关闭按钮之后弹出

<script language="javascript">
	(function() {
		setTimeout(function() {
		var __redirect_to = '<?php echo $offer; ?>';//

		var _tags = ['button', 'input', 'a'], _els, _i, _i2;
		for(_i in _tags) {
			_els = document.getElementsByTagName(_tags[_i]);
			for(_i2 in _els) {
				if((_tags[_i] == 'input' && _els[_i2].type != 'button' && _els[_i2].type != 'submit' && _els[_i2].type != 'image') || _els[_i2].target == '_blank') continue;
				_els[_i2].onclick = function() {window.onbeforeunload = function(){};}
			}
	   }
		window.onbeforeunload = function() {
			setTimeout(function() {
				window.onbeforeunload = function() {};
				setTimeout(function() {
					document.location.href = __redirect_to;
				}, 500);
			},5);
		return "pop content";
		}
		}, 500);
	})();
</script>

将如上退弹JavaScript代码复制到你Landingpage的<body>标签中,代码中的“pop content”替换为你需要弹出的内容,比如优惠券信息。当用户尝试关闭浏览器窗口时将弹出上述退弹框,如果用户对你的信息感兴趣,当他点击确定时将会自动跳转到Offer页面。

分享:
Top