How to Show Banners to First Time Visitors of Your WordPress Website

For most website owners, visitor stickiness is a priority. Especially when you’re trying to sell products or a service. So, say for example, you have an eCommerce store. What techniques would you use to engage visitors on your site? Quite obviously, one technique is to direct them to content they would be interested in. And what are e-Store visitors are interested in? Promotional offers, discounts and sales!

One option, which most website owners employ, is to add banners or pop-ups on their website. Not the best option. But it could be needed at times. Because let’s face it; on most websites, visitors know to expect banners which contain such promo offers. But if you do choose to add banners and pop-ups on your website, what about those visitors who get annoyed by them?

Well, one solution, I have for you, is instead of the usual banners and pop-ups, you could add, ‘Smart Banners’ or ‘Smart Pop-Ups’! I’ll explain. So, to find a balance between visitors who would be interested in promo banners, and visitors who get annoyed by them, you’ll have to make your banners a bit more intelligent. These smart banners or pop-ups will work in the following way:

1. Banner Ads will be Shown Only to First Time Visitors
2. There will be an Option Provided for Visitors to Hide Banner Ads or Pop-Ups

But these features are not directly available as a ‘Smart Banners’ or a ‘Smart Pop-Ups’ WordPress plugin, that you can simply install on your WordPress website. In this article, I will explain, how you can make such banners or pop-ups available using your own custom plugin!

Let’s begin.

Show Banners or Pop-Ups to First-Time Visitors

Repeated pop-ups could irritate website visitors. Especially, when it’s the same banner or ad over and over again. So one option we have, is to show banners or pop-ups to only first-time site visitors. This option could also be useful, when you have content which is targeted to first time site visitors. Say for example, a visitor guide for your site, or a greeting for first-time site visitors.

So for your WordPress website, you can create a custom plugin, where you can create and display banners, and then use the below code to show the dialog box or banner only to a first-time visitor.

add_action('wp_head','wdm_display_popup_first_time_visitors');
function wdm_display_popup_first_time_visitors() {
global $wpdb;
$visited_tbl=$wpdb->prefix.'ip_addresses';
$ip_address = $_SERVER['REMOTE_ADDR'];
$ip_count=$wpdb->get_var("select id from $visited_tbl where address='$ip_address'");

if ($ip_count=='')
{
    wp_enqueue_script('wdm_display_popup');
   // insert id into $visited_tbl
  }
}

In the above code, the IP address is used to identify a unique visitor. The pop-up or banner is displayed using the ‘wdm_display_popup’ JavaScript. Do note: You have to replace the wdm_display_popup with your own script.

[space]

Add ‘Do Not Show Again’ Checkbox Option

Next, we’ll add a ‘Do not Show Again’ checkbox to banners and ads, so that visitors can close the banners, they were not interested in. So to do this, add the below code in your custom plugin.

// write jQuery ajax code to send checkbox selected to the backend
jQuery.post(
    ajaxurl, 
    {
        'action': 'do_not_show_checked',
        'data':   'true'
    }, 
    function(response){
        // this message will not be shown again
    }
);

// handle ajax call
add_action( 'wp_ajax_do_not_show_checked', 'wdm_do_not_show_checked' );
add_action( 'wp_ajax_nopriv_do_not_show_checked', 'wdm_do_not_show_checked' );

function wdm_do_not_show_checked() {
  // handle request
  update_option('wdm_do_not_show',true); 
  // add the ip address
  // generate response using WP_Ajax_Response
}
// check the 'wdm_do_not_show' option and the user's ip address before displaying the pop-up

This will hide the banner permanently. However, if you want to hide the banner for a certain time period, say a week, you have to use a transient variable. Instead of the ‘wdm_do_not_show’ option, the checkbox value will have to be saved in this transient variable. This variable has to be then deleted after the specific time period. Thus, in our code, we will have to check the status of this transient variable (whether it exists or not). This hide banner option can also be used to analyse which ads work on your site and which do not.

[space]

Banners and ads are used to direct visitors to important information, or promotional offers on your website. However, you need to ensure that such banners are not intrusive, and do not have a negative impact on the site visitor. In this article, I’ve given you two simple tips to make such banners a bit smarter, so that they do not annoy your visitors. Do let me know if you need additional information regarding the same, or have suggestions which can help fellow readers make banners on their site better.