Coupon (or Other Goodie) on Demand

Gratuitous ads and messages can be easily overlooked by your site visitors (like the book ad on this page).

Even messages that jump up and down and flash things at you tend to be ignored. If they cover the page, what people look for and notice is how to get rid of the thing.

On the other hand, when people do something to get something, they're likely to pay attention to what they get. Even if only a click or tap is required, they pay attention.

A "Tap here for ..." message is unlikely to be considered a gratuitous ad. Rather, an option that translates into a gesture of respect for the visitor's time and eyes.

When clicked or tapped, the content is revealed for the site visitor.

Here are examples of the type of content that might be revealed.

An epigram, or inspirational verse.
A coupon code for a product.
A gift.
A discount on merchandise the site user was buying anyway.
A random link to a related website.
An anecdote, perhaps humorous.

The techniques mentioned at Powerhouse JavaScript Function for Show/Hide might be used to implement the idea.

But that won't work if the on-demand content:

Is custom generated with variable information.
Is to be random.
Must be absent from the web page source code before the click or tap.

It is for those types of implementations that Goodie on Demand was built.

Goodie on Demand delivers content via Ajax. The Ajax code publishes the content within the appropriate div.

Implementation Overview

Your server needs one or more files containing content to be delivered on demand.

Your web page needs 3 things:

A link to publish the on-demand content.
A JavaScript Ajax engine to process the click or tap.
An empty div within which to publish the on-demand content.

How Goodie on Demand Works

When a link is clicked, the JavaScript Ajax engine on your web page retrieves on-demand content you previously uploaded to your server. It then inserts the content into the empty div. (If the div already contains content, the content is replaced.)

Examples

Click here for the first example, a Longfellow quote.

Click here for the second example, random-selected content. There is one Curie quote and two different versions of date and time dynamic PHP-generated content. Every click selects one of the three to publish.

Implementation

Implementation requires several steps. One step applies to the server and three to the web page.

The Server

This is the one step to do at the server.

On-Demand Content

Create a file for the on-demand content. Give the content whatever HTML markup it needs for proper rendering.

The file name needs to have a .htm or .html extension for static content or .php extension for dynamic PHP-generated content.

Upload the on-demand content file to your server.

Here's an example static content file.

<h1 style="color:blue;">
Hello World!
</h1>

And here's an example dynamic PHP-generated content file.

<p style="background-color:#fefefe; padding:1em; text-align:center;">
<?php echo( date('l, F j, Y') ) ?>
</p>

The above generates the current date in "Weekday, MonthName Day, Year" format.

If you'll be utilizing the Goodie-on-Demand random feature (see The On-Demand Link in the next step), create a separate file for each on-demand content the randomizer will select from.

Make a note of the location of each on-demand content file.

The location of an on-demand content file is the file's location on the server. Not it's URL, just it's server location (sometimes referred to as its URI). As an example, a file at URL http://example.com/items/book.php would have /items/book.php specified as its location.

The Web Page

There are three steps for the web page.

The Empty Div

Create a div with an id value. Make a note of the id value.

Example:
```
<div id="for-on-demand-content"></div>
```
Publish the empty div wherever you want the on-demand content to appear when the on-demand link is clicked or tapped.

The div doesn't actually need to be empty. But whatever it contains will be replaced with the on-demand content.
The On-Demand Link

The on-demand link can be placed anywhere on the web page where it can be clicked or tapped.

Customization notes follow.
```
<a href="javascript:GoodieOnDemand('[ID]','[LOCATION]')">Tap here for goodie</a>
```
Customization notes:
1. Replace [ID] with the id value of the empty div created in the previous step.
2. Replace [LOCATION] with the location of the on-demand content page or, for a random selection, a comma-separated list of the page locations.
3. Replace Tap here for goodie with your custom text or image.
Here is an example customized link.
```
<a href="javascript:GoodieOnDemand('for-on-demand-content','/items/coupon.html')">Tap here for goodie</a>
```
Here is an example customized link for random selection.
```
<a href="javascript:GoodieOnDemand('for-on-demand-content','/items/fun1.php,/items/fun2.php,/items/fun3.php')">Tap here for goodie</a>
```

The JavaScript Ajax Engine

No customization is required for the JavaScript. Paste it anywhere in the web page source code where JavaScript can run and you're good to go.

<script type="text/javascript">
// Goodie-on-Demand, 2017-05-29
// Will Bontrager Software, LLC
function GoodieOnDemand(div,item)
{
   var http = new XMLHttpRequest();
   if(! http) { alert("No server connection."); return; }
   var urls = item.split(/,/);
   var url = urls[0];
   if( urls.length>1 ) { url = urls[Math.floor(Math.random()*urls.length)]; }
   url = url.replace(/^\s*/,"");
   url = url.replace(/\s*$/,"");
   http.onreadystatechange = function() { GoodieOnDemandResponse(document.getElementById(div),http); }
   http.open("GET",url,true);
   http.send();
}

function GoodieOnDemandResponse(d,http)
{
   if(http.readyState == 4)
   {
      if(http.status == 200) { d.innerHTML = http.responseText; }
      else { d.innerHTML = "Content request error, status code: "+http.status+" "+http.statusText; }
   }
}
</script>

Using It

Use it yourself before making it available to the public. Ensure that when you click on the link, the on-demand content is published.

It can be a friendly gesture to your site visitors, and return dividends, to provide marketing information on-demand instead of gratuitously.

(This article first appeared in Possibilities newsletter.)

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.