Handcrafted Personalization

Quick Reference

This page includes code samples and supplemental information for the 5 Quick Tricks for WordPress Personalization session featured on the WP & Online Marketing Summit For Beginners.

Overview

Content personalization can be implemented a variety of ways and while there are a number of great tools out there (we’re a bit partial to Logic Hop ;)) you can definitely handcraft your own with a bit of Javascript and CSS.

CSS & Javascript

To bring out handcrafted personalizations to life we’re going to rely on some simple vanilla Javascript and a few basic CSS classes.

There are a number of ways to add CSS and Javascript to your WordPress site, but one of the easiest to to use the Simple Custom CSS and JS plugin.

Regardless of how you add it, you’ll need to add the following:

CSS

.toggle-content {
    display: none;
}

.toggle-content.is-visible {
    display: block;
}

Javascript

var show = function ( id ) {
    var el = document.querySelector( id );
    el.classList.add('is-visible');
};
var hide = function ( id ) {
    var el = document.querySelector( id );
    el.classList.remove('is-visible');
};
var setText = function ( id, text ) {
    var el = document.querySelector( id );
    el.innerHTML = text;
};
var getQueryString = function ( key ) {
    var reg = new RegExp( '[?&]' + key + '=([^&#]*)', 'i' );
    var value = reg.exec(window.location.href);
    return value ? value[1] : null;
};
var setCookie = function ( key, value, days ) {
    var d = new Date();
        d.setTime(d.getTime() + (days*24*60*60*1000));
        var expires = 'expires='+ d.toUTCString();
        document.cookie = key + '=' + value + ';' + expires + ';path=/';
};
var getCookie = function ( key ) {
    var value = '; ' + document.cookie;
    var parts = value.split('; ' + key + '=');
    if (parts.length == 2) return parts.pop().split(';').shift();
};

First-time & Returning Visitors

One of the easiest ways to start personalizing is by targeting first-time and returning visitors. All we need is two Call-to-Action (CTA) messages – One for first time visitors and one for returning visitors.

Imagine we have a website selling Keto Dog Treats. The first time someone visits our site we don’t know much about them… More important, they may not be familiar with our product!

This is a great opportunity to introduce our product with an informative CTA like:

Keto Dog Treats are the Healthy Way to Reward your Dog

The next time that person visits our site, they already know Keto Dog Treats are healthy, so now we can show them a more sales oriented message:

Your Best Friend Deserves the Best Treats

As simple as it may seem, this a great trick to boost conversions! Why don’t you give this trick a try on your site and see what results you get?

See how to do it with Logic Hop

HTML

<h2 id="personalizedCTA" class="cta">Keto Dog Treats are the Healthy Way to Reward your Dog</h2>

Javascript

<script>
    if ( getCookie( 'visited' ) ) {
        setText( '#personalizedCTA', 'Your Best Friend Deserves the Best Treats' );     
    }
    setCookie( 'visited', 'true', 7 );
</script>

Day & Time

Displaying content based on time of day and day of the week is a powerful tool for offering incentives and promotions with a sense of urgency.

Say we have a new e-book and want to boost our early sales. We can create a coupon code and write a simple CTA like:

Save 20% – Use coupon code EARLYBIRD until 9pm today only!

With personalization our CTA is displayed until 9pm and then automatically disappears.

No one wants to miss out on a special offer and we all want to save money.

What are you waiting for? 😉 Try it yourself and watch the power of time increase your sales.

See how to do it with Logic Hop

HTML

<div id="personalizedBanner" class="toggle-content is-visible">
    <h3 class="cta banner">Save 20% – Use coupon code EARLYBIRD until 9pm today only!</h3>
</div>

Javascript

<script>
    var timeNow = new Date();
    var endTime = new Date( '2019-06-11 21:00:00' );
    if ( timeNow < endTime ) {
        show( '#personalizedBanner' );      
    }
</script>

UTM Codes

UTM Codes are great for tracking campaign performance, but to really supercharge your campaign use those same codes for personalization. How? It’s easy!

Imagine we’re running multiple ad variations for a law firm. Some ads are for Personal Injury Lawsuits while others are for Traffic Violations. Typically you’d create a landing page for each ad, but now we can direct all the links to our homepage.

Start by setting the utm_content code for the respective ads to “personal-injury” and “traffic-violations”. Now when users click the ads our homepage displays the proper CTA and content.

Users coming from the Personal Injury ad will see:

Get back on your feet after an injury or accident. We’re here to help.

Clicking on a Traffic Violation ad will display:

Do you need a driver’s license to do your job? We can help.

And, anyone visiting direct without utm_content sees our generic message:

When good people have a bad day we’re here to help.

And just like that, our personalized landing page automatically displays the right message for each visitor. Not only does this decrease bounce rates, it also increases conversions. Why? It’s simple – Customers intuitively respond better when content is relevant to their needs.

Are you ready to lower bounce rates, save money on ads, and increase conversions?

See how to do it with Logic Hop

HTML

<div id="injury" class="toggle-content">
    <img class="alignleft" src="http://demo.logichop.com/wp-content/uploads/2019/06/law_firm_injury.jpg" alt="Personal Injury" width="480" height="560" />
    <h2 class="cta">Get back on your feet after an injury or accident. We're here to help.</h2>
</div>

<div id="traffic" class="toggle-content">
    <img class="alignleft" src="http://demo.logichop.com/wp-content/uploads/2019/06/law_firm_traffic.jpg" alt="Traffic Violation" width="480" height="560" />
    <h2 class="cta">Do you need a driver's license to do your job? We can help.</h2>
</div>

<div id="default" class="toggle-content">
    <img class="alignleft" src="http://demo.logichop.com/wp-content/uploads/2019/06/law_firm_default.jpg" alt="Law Firm" width="480" height="560" />
    <h2 class="cta">When good people have a bad day we're here to help.</h2>
</div>

Javascript

<script>
    var utm_content = getQueryString( 'utm_content' );
    if ( utm_content == 'traffic' ) {
        show( '#traffic' );
    } else if ( utm_content == 'injury' ) {
        show( '#injury' );
    } else {
        show( '#default' );
    }
</script>

Pages Viewed

Imagine we’re running a membership site and someone has viewed our Member Benefits page, should we show them different messaging when they view our other pages? If we’re looking for more sales (and we are), the answer is yes.

Let’s take our membership site as example and put it to use. Before someone views our Member Benefits page, we might use the following copy for our primary buttons and link them to our Benefits page:

See Our Membership Benefits

After our Benefits page is viewed, our primary buttons automatically link to our Sign-Up page and say:

Get Your Membership Now

The shift may not seem like much, but the results will be huge. Visitors need to be lead through your site – Personalization makes that journey feel natural.

See how to do it with Logic Hop

HTML

<div id="benefitsButton" class="toggle-content">
    <a href="/members/benefits" class="button cta">See Our Membership Benefits</a>
</div>
<div id="signupButton" class="toggle-content">
    <a href="/signup" class="button cta">Sign Up Now</a>
</div>

Javascript

<script>
    if ( getCookie( 'benefits' ) ) {
        show( '#signupButton' );
    } else {
        show( '#benefitsButton' );
    }
</script>

<script>
    setCookie( 'benefits', 'true', 7 );
</script>

Goals Completed

Goals provide measurable actions visitors have taken on our site that can be used to determine which content to display. What type of actions? It’s entirely open, but some simple goals include downloading a PDF, submitting a form, or watching a video.

Let’s say our site offers yoga lessons and we want to give away a sample lesson as a PDF. We might create a simple link with the title:

Download a free introductory yoga lesson.

Now when a visitor clicks the link, we trigger our Yoga Lesson Download goal. The next time they visit the page, instead of the download link we display:

Did you enjoy the yoga lesson? See more lessons from our library.

If it seems obvious, that’s because it is. Who wants to see the same link they already downloaded? Better yet, by acknowledging users’ actions they’re more likely to engage with your site. Engagement leads to conversions, which means more sales and more money!

See how to do it with Logic Hop

HTML

<div id="freeLesson" class="toggle-content">
    <h4 class="cta">Download a free introductory yoga lesson</h4>
    <a onclick="setCookie( 'lesson', 'true', 7 );" class="button cta" href="/wp-content/uploads/2019/06/yoga.pdf" target="_blank" rel="noopener noreferrer">Download Lesson</a>
</div>
<div id="lessonDownloaded" class="toggle-content">
    <h4 class="cta">Did you enjoy the free lesson? Sign up for more lessons</h4>
    <a class="button cta" href="/signup" target="_blank" rel="noopener noreferrer">Sign Up Now</a>
</div>

Javascript

<script>
    if ( getCookie( 'lesson' ) ) {
        show( '#lessonDownloaded' );
    } else {
        show( '#freeLesson' );
    }
</script>