Beyond it's modules, the Pathfora library can also show or hide inline content based on audience membership. With a little bit of HTML and some specially named attributes you can begin seemlessly personalizing the content of your website to fit targetted audiences.

<!-- This content will show to first-time visitors -->
<div data-pfgroup="my-personalized-group" data-pftrigger="new_user">
  You must be new here! Please take a look at our guide for new users.

<!-- This content will show to returning visitors -->
<div data-pfgroup="my-personalized-group" data-pftrigger="returning">
  Thanks for coming back, why not check out our blog for the newest updates?

You must load the Lytics Javascript Tag to toggle elements based on audience membership. Pathfora interacts with this tag to retrieve the a list of Lytics audiences that the user is a member of and will select which elements to show/hide based on this list.

Setup Your Audiences

You will need to have at least one audience built in Lytics that you want to target with a module. Make sure that you have API access enabled for the audience, and have entered an ID. You will use this id as the value of the data-pftrigger attribute.

Lytics Audience API Acess


Each toggleable piece of content should have a surrounding container HTML element. This element can be of any type and must have the following two attributes.

HTML data attribute
Attribute Value Type Value
data-pfgroup string a unique string name for the set of elements to group together
data-pftrigger string id or slug of the audience in Lytics or default

If you have multiple elements with the same pfgroup name, only the first element with a matching pftrigger value will show. This means at most only one piece of content in a group will show.

Additionally, if the user is not a member of one of these audiences you can create a default piece of content and set the pftrigger value to be default. This default element will only show if the user is not a member of any other pftrigger audience in a group.

Note: Pathfora loads some CSS to hide the toggle elements before selecting which element to show. Because the js library will load after the body of the page, you may see a flicker of html elements when the page is first loaded. To prevent this, you can add the following line of CSS to the stylesheet of your website:

[data-pftrigger], [data-pfrecommend]{ display: none; }

Content Element Toggle - Live Preview

You can check which audiences you are a member of by typing into a console log. If you are in the high_value or registered_users audience you should see the appropriate content, otherwise you will see the default options.

Element Toggle