Jitter Bug

Simulated page traffic and product sales

Jitter Bug

Default Implementation

Let's say that this section represents a typical product landing page in an advertising campaign...

And you had 3 products that a customer could choose from:

Product 1

customers have bought this today!

people are looking at this right now

Product 2

customers have bought this today!

people are looking at this right now

Product 3

customers have bought this today!

people are looking at this right now

Every so often the number of "people who are looking at this right now" will change. All of the instances where this metric is being displayed will change at the same time.

If you wait and pay attention, slowly the number of "customers who have bought this today" will increase. Each instance of these numbers increases at a different time.

Jitter Bug

The starting values and time inbetween updates changes every time the page loads. Refresh this page to see what I am talking about.

In fact, the time between updates changes every time an update is made. That's done on purpose to make the "site traffic" appear organic. The amount of change for each metric is different on every change as well.

When I originally wrote this script, there was a method to my madness for what all these "default values" and "time intervals" are. Life has moved on and now they are just arbitrary values. If you were to get a copy of this script for yourself, you could make them whatever you want them to be. It's available in vanilla JS and jQuery.

Let's take a look at an exaggerated customized implementation of the Jitter Bug so you can see what I am talking about:

Jitter Bug

Customized Implementation with exaggerated timers

Product 1

customers have bought this today!

people are looking at this right now

Product 2

customers have bought this today!

people are looking at this right now

Product 3

customers have bought this today!

people are looking at this right now

These products are flying off the shelves!

Let's take a closer look

How does Jitter Bug work?

View on Github

Somewhere there is a web page with elements like this:

HTML

<!-- product 1 -->
<p>Product 1</p>
<p><span class="jitter-buy-count"></span> customers have bought this today!</p>
<p><span class="jitter-page-view"></span> people are looking at this right now</p>

<!-- product 2 -->
<p>Product 2</p>
<p><span class="jitter-buy-count"></span> customers have bought this today!</p>
<p><span class="jitter-page-view"></span> people are looking at this right now</p>

<!-- product 3 -->
<p>Product 3</p>
<p><span class="jitter-buy-count"></span> customers have bought this today!</p>
<p><span class="jitter-page-view"></span> people are looking at this right now</p>
<!-- product 1 -->
<p>Product 1</p>
<p><span class="jitter-buy-count"></span> customers have bought this today!</p>
<p><span class="jitter-page-view"></span> people are looking at this right now</p>

<!-- product 2 -->
<p>Product 2</p>
<p><span class="jitter-buy-count"></span> customers have bought this today!</p>
<p><span class="jitter-page-view"></span> people are looking at this right now</p>

<!-- product 3 -->
<p>Product 3</p>
<p><span class="jitter-buy-count"></span> customers have bought this today!</p>
<p><span class="jitter-page-view"></span> people are looking at this right now</p>

In that page's javascript we will take a collection of those elements:

Javascript

let jitterElements =
{
    "buys": document.getElementsByClassName('jitter-buy-count'),
    "views": document.getElementsByClassName('jitter-page-view')
};
let jitterElements =
{
    "buys": document.getElementsByClassName('jitter-buy-count'),
    "views": document.getElementsByClassName('jitter-page-view')
};

And then use them to initialize a default instance of Jitter Bug:

Javascript

let JB = new JitterBug(jitterElements.buys, jitterElements.views, false, false);

document.addEventListener("DOMContentLoaded", () => { JB.dance(); });
let JB = new JitterBug(jitterElements.buys, jitterElements.views, false, false);

document.addEventListener("DOMContentLoaded", () => { JB.dance(); });

At the time of page load, by default:

The "buy" elements will start at a random number between 60 and 100. A distinct timer will be assigned to each "buy" element. Every interval of each timer will be a random number of seconds between 58 and 61. Upon each interval the "buys" will randomly increase by 0, 1, or 2. Then each timer's interval will be reset to a new random number of seconds between 58 and 61.

The "view" elements will start at a random number between 45 and 55. They will all be assigned to a different timer whose interval is a random number of seconds between 5 and 8. Upon each interval of the "views" timer, Jitter Bug will choose a random number between 0 and 5 to fluctuate. The "views" count has a random 50-50 chance of going up or down. Upon each interval the "views" timer is reset to a new random interval between 5 and 8 seconds.

Customizing Jitter Bug

How to control the amount of jitter

View on Github

Let's look at the options we can pass into Jitter Bug. The following configuration is what is being used in the exaggerated example.

The "buys" will start at a number between 150 and 200. Each "buy" has an interval between 1 and 3 seconds. Upon each interval the "buy" count will increase between 4 and 16.

The "views" will start at a number between 100 and 150. All "views" have an interval between 1 and 3 seconds. Upon each interval the "view" count will change by an amount between 0 and 10.

Javascript

/*
* OPTIONAL
*
* Custom jitter boundaries.
* - All values are integers.
* - All values represent a range.
* - All ranges are bound to a minimum value.
* - All ranges are bound to an additional value more than the minimum.
* - All additional values are dynamically random integers between min and (min + max)
*
* - "start" and "range" values represent a count
* - "interval" values represent milliseconds
*
* */
let bounds =
{
    "buys":
    {
        "start":
        {
            "min": 150, // minimum starting amount of products sold
            "max": 50, // maximum additional starting amount of products sold
        },
        "range":
        {
            "min": 4, // minimum amount of change in products sold
            "max": 12, // maximum amount of additional change in  products sold
        },
        "interval":
        {
            "min": 1000, // minimum amount of milliseconds between jitter intervals
            "max": 2000, // maximum amount of additional milliseconds between jitter intervals
        },
    },

    "views":
    {
        "start":
        {
            "min": 100, // minimum starting amount of viewers
            "max": 50, // maximum additional starting amount of viewers
        },
        "range":
        {
            "min": 0, // minimum amount of + or - change in viewers
            "max": 10, // maximum amount of additional + or - change in  viewers
        },
        "interval":
        {
            "min": 1000, // minimum amount of milliseconds between jitter intervals
            "max": 2000, // maximum amount of additional milliseconds between jitter intervals
        },
    }
}
// end optional jitter values
// **************************
/*
* OPTIONAL
*
* Custom jitter boundaries.
* - All values are integers.
* - All values represent a range.
* - All ranges are bound to a minimum value.
* - All ranges are bound to an additional value more than the minimum.
* - All additional values are dynamically random integers between min and (min + max)
*
* - "start" and "range" values represent a count
* - "interval" values represent milliseconds
*
* */
let bounds =
{
    "buys":
    {
        "start":
        {
            "min": 150, // minimum starting amount of products sold
            "max": 50, // maximum additional starting amount of products sold
        },
        "range":
        {
            "min": 4, // minimum amount of change in products sold
            "max": 12, // maximum amount of additional change in  products sold
        },
        "interval":
        {
            "min": 1000, // minimum amount of milliseconds between jitter intervals
            "max": 2000, // maximum amount of additional milliseconds between jitter intervals
        },
    },

    "views":
    {
        "start":
        {
            "min": 100, // minimum starting amount of viewers
            "max": 50, // maximum additional starting amount of viewers
        },
        "range":
        {
            "min": 0, // minimum amount of + or - change in viewers
            "max": 10, // maximum amount of additional + or - change in  viewers
        },
        "interval":
        {
            "min": 1000, // minimum amount of milliseconds between jitter intervals
            "max": 2000, // maximum amount of additional milliseconds between jitter intervals
        },
    }
}
// end optional jitter values
// **************************

We can pass in these options to a unique instance of Jitter Bug and run it like so:

Javascript

let jitterElementsCustomized =
{
    "buys": document.getElementsByClassName('jitter-buy-count-customized'),
    "views": document.getElementsByClassName('jitter-page-view-customized')
};

let JBCustom = new JitterBug(jitterElementsCustomized.buys, jitterElementsCustomized.views, bounds.buys, bounds.views);

document.addEventListener("DOMContentLoaded", () => { JBCustom.dance(); });
let jitterElementsCustomized =
{
    "buys": document.getElementsByClassName('jitter-buy-count-customized'),
    "views": document.getElementsByClassName('jitter-page-view-customized')
};

let JBCustom = new JitterBug(jitterElementsCustomized.buys, jitterElementsCustomized.views, bounds.buys, bounds.views);

document.addEventListener("DOMContentLoaded", () => { JBCustom.dance(); });

If you have questions about how to use JitterBug.js to implement simulated page traffic and product sales on your website, hit me up on LinkedIn or Github.

Project Galleries

Tool

Color Average

Blend two colors to get their linear and logarithmic mid-point.

Tool

Multi Tab Opener

Like bookmarks on steroids: time released links with options and storage.

App

Jitter Bug

Simulated page traffic and product sales for marketing.

App

Shopping Cart

Originally made for use on Unbounce with Checkout Champ.

Tool

Public Library

A nifty little reading lens for classic novels using the Spritz SDK.

Color Average

Tool

Blend two colors to get their linear and logarithmic mid-point.

Sometimes working with graphics and photos you find yourself wondering:

  • "What would I get if I mix these two colors?"
  • "What color is in the middle of my gradient?"
  • "What would a half-steps color palette look like?"

I found myself wondering those questions so often that I made a nice little color calculator. Just use the two color pickers, and it will automatically blend those two colors for you.

It will tell you both the linear and the logarithmic midpoint of your chosen colors. The linear value is the average of the RGB channels. Because color gamuts are not linear, a simple average is not the best representation of a color blend. The logarithmic midpoint is calculated using Euclidean average, giving you the "correct" color blend.

Open

Multi Tab Opener

Tool

Like bookmarks on steroids: time released links with options and storage

Do you sit in an office opening links all day? Do you find yourself opening the same handful of links over and over? Then you probably just need a browser bookmarks folder.

But, do you find yourself:

  • interacting with people and then having to open a long list of links, one by one?
  • having to open up the same long list of links every so often?
  • wanting to check if a group of web pages are reachable?
  • and you want to do that without throttling your browser?

Well then, I have got something for you. Think of it like time released links with options and storage. Unlike bookmarks, you can control how fast your list of links will open. Instead of shocking your bandwidth with opening 10, 20, 30, or more URLS all at once- the Multi Tab Opener will slowly open each link one at a time. You can control how fast or slow each link will be opened in a new tab. You can also save and edit lists of links to your browser's local storage.

Open Clone

Jitter Bug

App

Simulated page traffic and product sales for marketing

#marketing #javascript

Do you want to:

  • create a sense of urgency on your landing pages?
  • make it look like people are actively interested in your products?
  • and have customized control over it
  • without spending time and money building a real data stream?

Then you should add some dynamic jitter to your web pages. You can decide how much and how often:

  • your "products sold" will rise
  • and your "page views" will fluctuate

The best part about Jitter Bug is that these updates look and feel organic. Its timers trigger these changes at different intervals. Jitter Bug can be configured with default or custom settings for one or more products on a page. Your "page views" will bounce between a high and low value while your "products sold" will gradually increase. The numbers displayed for "page views" will be updated in unison for all instances, while the numbers for "products sold" will be updated individually and at different times. Jitter Bug's settings allow you to decide where those numbers start, how much, and how often those values will be updated.

View Clone

Shopping Cart

App

Originally made for use on Unbounce with Checkout Champ

#ecommerce #bootstrap #jQuery

It's an easy-to-use shopping cart UI that can send your customers to a checkout page.

  • Handles one or more products and product variations
  • Cart UI is unobtrusive and easily accessible
  • Pleasantly animated additions and product removals
  • Supports coupon codes
  • Supports URL parameter retention
  • Handles currency formatting in USD by default
  • Has a built-in debug mode

I built this shopping cart when I was working for a publishing company. It needed to run on landing pages built with Unbounce's WYSIWYG, so we could integrate them into a checkout flow using Checkout Champ as the payment processor. Unbounce and Checkout Champ are popular service providers in the marketing world. If that's you then there's a good chance this shopping cart should work for you with very little configuration. You'll need to replace the example content with your own product IDs, names, descriptions, and prices. The cart can be very easily adapted to work for a different payment processor.

View Clone

Public Library

Tool

A nifty little reading lens for classic novels using the Spritz SDK

A collection of books, sourced from Project Gutenberg, presented through a speed reader.

When you're reading, it takes time to move your eyes across the page. You can read much faster if you move the words instead

I came across an SDK called Spritz toward the end of my college days. It allows you to scan a body of text and then flash each word on the screen. You can control how long words stay on the screen. It takes just a little bit of practice, but you could find yourself easily going from reading 200 words per minute to 400 or more.

See it for your self!

Open