By Sarah Yablok on Aug 26, 2015

Developing Basic Content Personalization

Personalizing content by context in real time is something many digital marketers seek. Lytics is making these kinds of tactics more accessible.

Recently our growth team kicked off a campaign promoting our new integration with Google Ads.

As part of this effort, we created an overview detailing some potential use cases of our new integration. In the creation of this asset, we also wanted to run an experiment by adding our own flavor of personalization to our content using Lytics!

The idea for this experiment was simple: we built two blocks of content on the page (an introduction and a call to action) to change based on the viewer’s membership to two predefined segments. For each of the two sections we also had two pieces of text, one which was targeted towards all of our existing users, as well as a default option for viewers who are not currently Lytics users.

We rendered custom content blocks by visiting user type with Lytics.

How Did We Do it?

Personalizing content using Lytics is super easy, and we’re going to use this simple example to show you how its done! Note: This is a basic use case of our Element Toggle Personalization.

If you’re interested in more detailed examples, you can check out our documentation on how to personalize with Lytics and our in-depth demo.

Getting Set Up

Before diving in, you should have the Lytics Javascript Tag installed on your website. Once you’ve set that up, you will want to choose or create segment(s) to trigger the different targeted elements within a content block.

Make sure that the segment you want to use has API Access enabled, you’ll be using the ID of the segment in your HTML. In the case of our overview we used one segment, which includes all of our existing Lytics users, and has the ID users.

The Element Toggle

Now, in the HTML, you’ll create multiple containing elements: one for each segment, and an optional element to default to. Each container will have two attributes.

  • data-liogroup A unique string name for the set of elements.
  • data-liotrigger The ID of the segment or default. (Which will show if no other element in the data-liogroup is selected to show).

It’s that easy! Here’s the code from our overview introduction as an example:

<div data-liogroup="googleadwords-overview-intro" data-liotrigger="users">
  <h1>Add a Predictive Edge to Your Google Ads</h1>
  <p>Now you can add powerful, behavior-based retargeting to your marketing stack...</p>
</div>

<div data-liogroup="googleadwords-overview-intro" data-liotrigger="default">
  <h1>Create Predictive Retargeting Campaigns with Google Ads + Lytics</h1>
  <p>The Lytics customer data platform now integrates natively with Google Ads...</p>
</div>

What’s Next?

We’re planning on including a lot more personalized content on our website in the future, so we’ll be sure to keep you updated on all of our future experiments.

If you haven’t already check out the overview to see this example in action. Or, to hear more about our campaign, check out Andrew’s post on it.

Element toggle personalization has numerous applications. Feel free to try it out on your website and let us know what you think!


By Sarah Yablok Engineer

Sarah is a developer who works with customers to help them achieve their marketing goals and integrate feedback and marketing solutions into Lytics. When she’s not writing code, she enjoys gaming, crafting, and reading graphic novels.