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.
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’.
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.
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.
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”.
Next, we added some logic to render this field as an attribute on the div.
Now, when we add data to that field, save the block, and inspect it in the editor we see the following:
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.