Support Center

Personalizing in your pages (integration basics)

Last Updated: Dec 17, 2012 06:13PM MST

Setting up purlHub's drop-in personalization on a Landing Page or Micro-Site requires accessing variable data and customizing the page to speak directly to the visitor.  In a typical scenario, the page addresses the visitor by first name.  In a minimalist scenario, the page simply pre-populates a form for submission elsewhere.  And with some advanced integrations, the page changes images and links based on personalization data.  Supporting all of these situations is as simple as leveraging purlHub's JSAPI integration with purlHub Class Flags.  

purlHub Class Flags:

The core of purlHub's technology involves a highly flexible and agile system of embedding a page's DOM (Document Object Model) with personalization data.  This system allows developers to connect HTML Elements in the DOM with Campaign List data points in a way that supports maximum flexibility and creativity while simplifying the dynamic injection of variable data.  This is achieved via flagging select HTML Elements within the pages HTML structure, and mapping them to list data object properties.  Using purlHub's JSAPI (our middle-ware), a proprietary naming convention (syntax) is used to construct special text strings that are included an Element's ID or CLASS attribute.  We call these purlHub Class Flags, and its the primary method of setting up purlHub integration and drop-in personalization.

HTML Info:  HTML Class Attribute

A purlHub Class Flag is simply a special class-name, which may optionally have a style definition, that maps to a purlHub campaign data point (profile properties, record properties, or attribute properties).  The purlHub JSAPI intelligently handles rendering the element(s) where the a purlHub class-name is found.  Flags are constructed by including prefixes and labels, separated by hyphens or underscores.   This prefix identifies a class-name as a purlHub special name, determines the primary or secondary object type, and the following labels identify the property (variable data) within the object.  As purlHub supports an arbitrary number of named records associated with a profile, in the case of "Record" data, the Record Name must be included in the Class Flag.

<span class="phProfileData-firstName">Guest</span>

<span class="phRecordData-promoRegistration-firstName"></span>

<span class="phAttributeData-returnVisitor"><span>

A purlHub campaign list, supports documents (textual data collections) classified by 3 object types (profile, record, and attribute).  A "profile" is a primary object, while "records" and "attributes" are secondary (children of a profile) object types.  The "profile", being a primary object, is the root of an individuals personalization document.  In the first example above, we've flagged the SPAN element with a purlHub Class Flag mapping it to the Profile object's "firstName" property.  This span element's text node will be replaced with the string value of the "firstName" property of the Profile object.  In the second example, the prefix is "phRecordData-promoRegistration",  which selects the "firstName" property of Profile's Record object named "promoRegistration".  Records are generally created when visitors submit a FORM from a personalized page (PURL).  In the second example, the prefix is followed by the Record Name and then its internal property name.  In the third example, we're accessing user defined attributes of the personalized visit session.

Common purlHub Class Flag format: (syntax)

 Profiles: {profilePrefix}-{propertyName}
Records: {recordPrefix}-{recordName}-{propertyName}
Attributes: {attributePrefix}-{attributeName}

Prefixes can be user defined, in case you prefer shorter labels.  The purlhub JSAPI configuration supports setting your own prefixes to use for profile, record, and attribute identifiers.

Mixing and Stacking Flags:

So what happens if you accidentally or intentionally combine multiple valid purlHub Class Flags on a single element?  The JSAPI renders data in logical sequence.  Primary object data first, then secondary data.      

 <span class="phProfileData-firstName phRecordData-promoRegistration-firstName">

In the above example, the Profile's "firstName" value is applied in the initial render sweep and a few milliseconds later, the record named "promoRegistration"'s "firstName" value is rendered.   This is a useful tactic that can be leveraged to present user submitted data over top of campaign pre-loaded data.

Binding data points to Form Elements:

The same Class Flag semantics are used to map FORM fields to Campaign Data points, for both pre-populate and data capture.


<input type="text" class="phProfileData-firstName" name="firstName" />

In this example, the INPUT Element will be pre-populated with the "firstName" from the profile.  And if the FORM element is marked for data capture, the INPUT's value will be captured as the profile objects "firstnName" property upon submit.  

Contact Us

  • Post a Public Question
  • Ask the Community
  • Email Us

Recent Discussions