<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1523709774591272&amp;ev=PageView&amp;noscript=1">

[How to] use a coupon discount code to push hesitant visitors into purchase

Posted by giosg.com on 20-Jul-2016 11:45:08

In our previous blog posts (here  and here), we gave you hands-on instructions on how to create rules and how to do A/B testing. This time we are going to show you how to create a pop-up discount code which you can use to gently nudge your online store visitors towards making a purchase.

Like discussed in one of our earlier blogs, hesitant visitors are a common problem for many eCommerce stores. Still, there is no need to despair as there are ways to improve the situation and help the visitors to overcome their hesitance.  

After you have identified the people that are hesitant, you need to decide which incentives you are willing to use to turn them into buyers. Adding coupon discount codes to your website can help you to draw more customers in, give them a great shopping experience and encourage them to come back and buy from you again at a full price.

One example of an situation where you could try using a coupon discount code as an incentive is when a visitors has visited your site several times but hasn't purchased anything. This situation in mind, follow these instructions to create a "get 20% off" pop-up discount coupon code:

Requirements

Degree of Difficulty  Advanced
Time Required  15 min

To do this you need have giosg LIVE with the following features in use:

  • giosg RULES - for building custom rules to match actions with unique situations

Also, to get the most out of these instructions you should also have giosg BASKET (for monitoring shopping baskets in real time) in use.

Now you should see the following pop-up in the middle of the screen when you visit a site you have set the rule to work for. Click the picture to see how it works!

Discount coupon code example

Instructions

To get you started, follow these instructions:

1) First, create a rule 

Sign in to giosg LIVE console and choose Rules from the menu. Click "+ create a new rule" to open a new window, then:

  • Choose the room where you want to display this rule from the ”At these rooms” menu
  • Click + Add new condition button to choose the condition that needs to be met to display the rule. Choose the condition that suits you best from the ”When this condition matches...” menu. In this case, choose  "Visitor has visited the page more than the number" from the menu (and define the number of visits required to set this rule to action).  When this conditions matches...Or if you want to use some other criteria, like what kind of device the customer is using or what is the value of the items he has added to his shopping cart, you can choose those options (and many more) from the menu as well.
  • Click + Add new action button to choose which action to perform. Choose Apply CSS to the web page from the menu. Perform this action - apply CSSCopy the following code to the field:
/* Remove the line below if you do not want to use Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

.coupon-code-popup-modal {
display: block;
background: rgba(0,0,0,0.3);
position: fixed;
z-index: 500;
left: 0;
top: 0;
bottom: 0;
right: 0;
cursor: pointer;
}
.coupon-code-popup {
display: block;
margin: 200px auto 0 auto;
padding: 30px 40px;
width: 400px;
box-shadow: 5px 5px 12px 0px rgba(0,0,0,0.3);
background: #fff;
position: relative;
cursor: initial;
}
.coupon-code-popup .coupon-code-popup-title {
display: block;
font-weight: 600;
font-size: 48px;
margin: 0 0 10px 0;
color: #444;
font-family: 'Open Sans', sans-serif;
}
.coupon-code-popup .coupon-code-popup-text {
display: block;
font-weight: 400;
font-size: 14px;
margin: 20px 0;
color: #555;
font-family: 'Open Sans', sans-serif;
}
.coupon-code-popup .coupon-code-area-container {
display: block;
margin: 30px;
padding: 5px;
background: transparent;
border: 1px dashed #a5a5a5;
border-radius: 7px;
}
.coupon-code-popup .coupon-code-area {
display: block;
text-align: center;
font-weight: 400;
font-size: 30px;
padding: 25px 10px;
background: #c1e5f8;
color: #343438;
font-family: 'Open Sans', sans-serif;
border-radius: 3px;
}
.coupon-code-popup-close {
display: block;
position: absolute;
top: 0;
right: 11px;
color: #dedede;
font-size: 30px;
font-weight: 300;
padding: 4px;
margin: 0;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
}
.coupon-code-popup-close:hover {
color: #666;
}
  • Then click + Add another action and choose Run a custom JavaScript from the menu. Perform this action - Run a custom JavaScriptCopy the following code to the field:
(function($) {
// You can change the title text inside the quotes!
var title = 'GET 20% OFF!';
// You can change the info text inside the quotes!
var text = 'Use this code to get 20% discount on your next purchase!';
// Change the coupon code here by replacing the text inside quotes!
var couponCode = 'COUPONCODE123';

$('<div/>').addClass('coupon-code-popup-modal').click(hidePopup).append(
$('<div/>').addClass('coupon-code-popup').click(function(ev) {
ev.stopPropagation();
}).append(
$('<div/>').addClass('coupon-code-popup-close').text('⨉').click(hidePopup),
$('<div/>').addClass('coupon-code-popup-title').text(title),
$('<div/>').addClass('coupon-code-popup-text').text(text),
$('<div/>').addClass('coupon-code-area-container').append(
$('<div/>').addClass('coupon-code-area').text(couponCode)
)
)
).hide().appendTo('body').fadeIn(300);
function hidePopup() {
$('.coupon-code-popup-modal').fadeOut(300);
}
})(jGiosg);

 

If you want to change the text you can do it by writing over color-coded text parts. But, make sure you only modify the text between ’ and ’ marks. Otherwise the code will break.

  • Add a name for the rule by typing it to the ”Name” field under ”Settings” menu. Also, we recommend that you display this rule only once in a session. To do that click the ”Rule can match only once in session” box under the Name field.Name the rule
  • Before moving on remember to also enable the rule by clicking the ”Enabled” option.
  • Save changes

2) Use Rules Reporting to monitor the performance

When you have created the rule and enabled it, you can monitor the results using Rules Reporting

NB! The data is updated once in every 24 hours so you need to wait until the next day to get the first report.

To do this:

  • Go to Reports -> Rules. 
  • Click the + button to select rules to compare. You can select up to 6 rules to compare. In this case, you should select at least the rule pop-up discount code we just created.
  • Take a look at how different rules affect your goals (=shopping basket) and make changes accordingly

 

Amazing! You are on fire! Now apply the same logic to create a variation of your own coupons to use.

If you have any questions or want to know more about creating and testing rules, come and chat with us!

 

Topics: How to