弹窗广告可以让网站运营者在用户访问时很好的吸引他们的注意并促进营销活动。为了实现这一目的,右下角弹窗已成为越来越多的人的首选。 但是,如何快速添加右下角弹窗代码呢?
简单,我们现在就来谈一下这个问题,并向您展示添加右下角弹窗代码的简单方法。
第一步:选择您的弹窗样式!
在使用弹窗时,首先要做的是选择合适的弹窗样式。右下角弹窗的样式看起来比较简单,通常选择简约、不张扬、一目了然的样式,利于页面不臃肿,能够有效地吸引用户的注意力!
第二步:找到合适的代码!
在寻找右下角弹窗代码之前,必须了解您的网站选用的系统类型是 HTML、PHP、ASP、JSP、ASP .NET 还是其他的内容管理系统。因为不同的系统,代码的引用方式也不同。
在网上,有很多免费和收费的右下角弹窗代码,这些代码可以帮助网站管理员快速添加弹窗效果。如果您确实需要自行编写代码的话,推荐使用一个基本的JavaScript / jQuery库!
第三步:简单的代码应用!
如果您开放的是WordPress网站,建议使用Wordpress插件添加全站弹窗扩展,此插件无需了解代码即可实现简单的设置!
但如果您通过编辑网站模板添加二次代码,建议在模板中添加通用代码,避免后期修改的烦恼,以下为示例代码。
jQuery( document ).ready(function( $ ) {
// Enable Custom Scrollbar on modal windows
function customScrollBars( $modal ){
if( $( $modal ).hasClass( 'has-custom-scrollbar' ) ){
return false;
}
if( $( $modal ).is( ':visible' ) ){
$( $modal ).find( '.modal-body' ).scrollbar({
"onDestroy":function(){
$( $modal ).removeClass( 'has-custom-scrollbar' );
}
});
$( $modal ).addClass( 'has-custom-scrollbar' );
}
}
$(document).on('shown.bs.modal', '.modal[data-scrollbar]', function () {
var $modal = $(this);
customScrollBars( $modal );
});
$(window).resize(function(){
$( '.modal[data-scrollbar].show' ).each(function(){
customScrollBars( $(this) );
});
});
});
第四步:选择页面!
添加完右下角弹窗代码之后,需要选择弹窗将出现的页面!根据网站的情况,弹窗打开的页面可有多种选择,例如:主页、博客页、联系页、注册页、购物车页等等。不过根据数据显示,主页的弹窗展示率最高,相应的点击率也在所有页面中最高。
第五步:调整坐标和布局!
在页面上添加弹窗脚本之后,大多数弹窗设置会提供一些简单的布局和动画选项。有些选项可以允许您更改位置、背景颜色、内容和页面元素之间的间距。你甚至可以在左上角甚至右下角添加允许客户联系您的热线电话号码,并通过在配置文件中设置漂亮的背景颜色来吸引关注。而这些一般都不会影响用户体验过程。
第六步:实现 A/B 测试!
最后,我们建议每个网民都执行 A / B测试。这个过程简单,只需为网站创建两个罢工版本,每个版本都带有不同的弹窗设计。通过这种方式来比较看谁做的更好,然后根据数据中的统计,优化调整未来的活动弹窗。
在执行 A / B测试之前,请确保在弹窗的试用过程中预先设定好目标和测量标准,同时注意各种因素的影响,所以如果广告太过频繁或让用户产生反感态度,那么得到的数据结果就会被严重扭曲。
最后,这样的右下角弹窗虽然很小,却可以提高营销成效,提高产品销售。虽不是百分百的成功,我们大可以通过该文章中的六个简单步骤来优化并增加弹窗的效果。