Fields marked with an * are required
I would like to ..
My WordPress ..

Site Personalization in WordPress

In an earlier post, we had introduced the fundamentals of site personalization. In this post, we will take a specific usecase and see how to implement it in WordPress. 
Customize Ideas Identity Individuality Innovation Personalize Concept

In an earlier post, we had introduced the fundamentals of site personalization (Link). In this post, we will take a specific usecase and see how to implement it in WordPress. 

The Usecase

We will build a page that looks like below

Personalization-Usecase

A good way to think of personalization is as follows:

The first personalization will illustrate how to personalize based on the state of the incoming visitor. So, we will show the bar at the top only to returning visitors but not to new visitors. 

The second personalization will also illustrate how to personalize based on the state of the incoming visitor — but for many other conditions. The image on the page will change based on the following conditions:

Default
User comes in from outside the USA
User clicks on a campaign that has utm_campaign=demo-personalization in the URL

Finally, we will illustrate how a visitor’s action on the site will update his “prior state” and impact his experience when he comes to the site again. The user comes to the site, fills out the form and leaves. At this point, we update the “lead status” of the visitor on our side. He then comes to the page again. This time around, he does not see the form.

Page Component Design

In an earlier post, we talked about how websites are comprised of components (Link) that are organized hierarchically. For eg., the most basic elements would be things like colors, typography, links, buttons, lists and such. These elements are then grouped in larger components such as forms, modals, carousels and grids. Personalization essentially means that — based on the context — these components can be turned on/off or certain variants will be shown instead of the regular component. (Eg. Blue button instead of the default red button). 

We will build these components in WordPress using Elementor. You can see the page at https://exemplifai.wpengine.com/demo-personalization/

The image component is built with Elementor as shown below:

The form component is built as shown below:

Personalization First Scenario

To implement personalization, we will use a product called LogicHop. It implements the popup experience as a “logic bar”. You can create a logic bar component and then associate it with a set of conditions. This logic bar will show up only when the conditions are fulfilled.

We create the logic bar and select the condition that it should show up only for returning visitors.

You can see this in action here. When you go to the site for the first time, you don’t see the bar

Exemplifi First Time Visitor

When you go to the site again, you will see the bar

Personalization Second Scenario

The logic table for this scenario would look like below:

 

Image to show → 
User comes in from outside the USA NO YES NO
User clicks on a campaign that has utm_campaign=demo-personalization in the URL NO NO YES

The “Outside the US” condition is implemented as shown below:

And the condition for when a user clicks on a campaign that has utm_campaign=demo-personalization in the URL, is implemented as follows:

We then create three sections with an image in each, as shown below:

For the first image, we attach the “Outside the US” condition

For the second image, we attach the “Demo Campaign URL” condition

The final image has no conditions attached to it and shows up only when none of the conditions above are true.

To see the first condition in action, we use a tool called BrowserStack that lets you mimic requests from different countries:

And as anticipated, when the request comes in from outside the US, the correct image shows up:

And when the incoming URL is /?utm_campaign=demo-personalization, you see the relevant image:

Personalization Final Scenario

As described earlier, we will illustrate how a visitor’s action on the site will update his “prior state” and impact his experience when he comes to the site again. In this scenario, the user comes to the site, fills out the form and leaves. At this point, we update the “lead status” of the visitor on our side. He then comes to the page again. This time around, he does not see the form. 

 

The steps we will follow to accomplish this are the following:

  • Set up a goal that updates the lead score of the user when he submits the form
  • Setup a condition that is connected with this goal.
  • Associate this condition with the form module. When this condition is triggered, the form module is not shown. 

When the form is submitted, it redirects the user to a thank-you page titled /demo-form-submitted/. We create a goal that updates the lead score by 20 when the form is submitted and the user is directed to this page:

We then create a condition that executes when this goal is achieved:

Finally, on the page, we associate the form with this condition:

Essentially we are saying that this form should be shown only when the goal is NOT hit.

To check this in action, when you go to the demo page for the first time, you will see the form.

After you submit the form you get directed to the Thank you page, which triggers the goal to be executed and updates the lead score of the user:

When you go to the main page again, the form does not show:

It was a long article and we hope it was worth the read! If you’d like to see how this is implemented in Adobe Experience Manager, click here.  We also implemented this usecase in Kentico here

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Vinod Pabba

Vinod Pabba

Vinod is the Founder and CEO of Exemplifi. He is a graduate of Stanford University’s Engineering program and a successful entrepreneur having built and exited businesses in the past. He started Exemplifi with a singular focus on building websites that deliver to the complex marketing and technology needs of mid- and large- sized enterprises. He has built a team that understands the latest in web standards, has breadth and depth in several enterprise class CMS products, and can build dynamic websites that respond to user personas and various stages of the customer journeys. Vinod has two decades of digital transformation experience and has led several large site builds for enterprises globally. He is adept at delivering in an agile, multi-disciplinary and globally distributed manner.
You can reach us at nina@exemplifi.io or call us at 617-233-7510