Practical Tips for Implementing Personalization with Acquia Lift

Practical Tips for Implementing Personalization with Acquia Lift

Jonathan Adams, Software Architect
#Personalization | Posted

As a leading Acquia partner, Phase2 helps many of our clients integrate and operationalize Lift.

Intuitive and powerful, Lift tracks, segments, and automatically serves personalized content to users based on their browsing history, and other relevant information.

Over the course of our work, we’ve devised several novel ways to make using such a great tool even easier. In one recent example, we simplified how site editors tell Lift what to target on a page, eliminating potential errors that, in the most extreme cases, can cause sites to display incorrectly.

Building Blocks

At Phase2, we use component-based design principles to build websites. As such, we construct pages and sites from a library of reusable components (or blocks) that can then be configured and arranged by editors. Once the blocks are assembled into a page, we then personalize the experience by telling Lift’s Experience Builder tool to target individual blocks, creating (in Lift terminology) a ‘slot’.

The Problem

Slots can be defined in one of two ways:

1. Point & Click CSS Picker

This option allows the editor to define a slot by hovering over a specific section of the page.

Point and Clicks CSS Picker

However, while this approach is intuitive for more tech-savvy editors, we’ve noticed that some of our clients have trouble selecting the correct div (or element on the page) for the enclosing block. This is especially dangerous because-- if the right CSS selector isn’t chosen-- the editor could be replacing the wrong portion of the page, and end up with a page that doesn’t display properly.

2. Embedded Divs

This option allows an editor to define a slot by embedding a special div somewhere on the page, creating an empty block, and placing the Lift embed code inside. While there is nothing wrong with this approach, it means that we’re no longer able to have default content in that block, unless a default segment is created within Experience Builder and a default block added there.

Embed Code

A Simple Solution

We created a simple hybrid approach to solve these two potential issues.

First, we added a new field to all of our blocks in Drupal called “Data Lift Slot”.

Data Lift Slot

Next, we added some logic to render this field as an attribute on the div.

Code on black screen

Now, when we add data to that field, save the block, and inspect it in the editor we see the following:

Code on White Screen

While this looks very similar to the embed code mentioned previously, it differs in one crucial way; the default content is rendered in the block as well. 

With this solution all editors have to do is:

  • Define a slot using the embed code method

  • Copy the data-lift-slot attribute

  • Paste it into the Data Lift Slot field of the block in Drupal they would like to replace

You're result: No more broken pages or mistargeted slots!

Have other questions on how to get the most out of Acquia Lift? Reach out to our team and we'll be happy to discuss.

Jonathan Adams

Jonathan Adams

Software Architect