Full Docs

EXISTING FULL DOCS

---

---

Proposed new doc additions below...

Adding details for un-merged personalization PR.

---

Favorites

Managed Favorites

Force some user properties to be dynamically controlled by user behavior tracking of hits to taxonomy tagged pages. You'll need to specifically call out which user properties can be updated this way and by which favorites.

Example Configuration

groucho.config.favorites = [{
    userProperty: 'user.genre',
    favoritesKey: 'music_genre',
    overwrite: true
  }, {
    userProperty: 'user.role',
    favoritesKey: 'audience_type',
    overwrite: false
}];

Details

• userProperty - localStorage value to adjust automatically.
• favoritesKey - Tag vocabulary to discover favorites.
• overwrite - Should favorites overwrite existing values (used if value can be set by user).

Personalization / Adjustment

You can easily filter and/or reveal content based on each users' personal preferences. You are essentially referencing localStorage values to choose what's visible. Use markup to denote Groucho "adjustment panes" and which user properties (or params) to check. Mark variations corresponding user (or param) values.

Groucho will find adjustment panes on the page and process each element with the appropriate groucho data attribute.

Example Configuration

groucho.config.adjust = [{
  dataAttribute: 'groucho-region',
  userProperty: 'user.region',
  paramOverride: 'utm_region',
  helperCallback: myNameSpace.regionCodeToName,
}];

Example Adjustments

<span data-groucho-region="north-america">Self-Important Tag Line</span>
<span data-groucho-region="europe">Multicultural Tag Line</span>
<span data-groucho-region="APAC">Appropriate Tag Line</span>
<span data-groucho-region="default">Standard Tag Line</span>

Selected by both...

/my-page?utm_region=123

...and...

groucho.userSet({region: 123});

You might also choose to avoid revealing one item based on some user status. The config might be...

groucho.config.adjust = [{
  dataAttribute: 'groucho-customer',
  userProperty: 'user.customer'
}];

The markup would look like this...

<a data-groucho-customer="true" href="/order-history">Past Orders</a>

Note: The Groucho library will hide personalization elements on page load, but it's recommended to include a CSS rule because this library is purely JS.

[data-groucho-myattribute], [data-groucho-myotherattribute] {
  visibility:hidden
}

Using visibility vs display is preferred to avoid reflow as data is discovered.

Param Overrides

Force specific user preference personalization with URL param overrides. This allows ensuring specific page element visibility regardless of user values, as well as adjusting pages when the no user preferences exist yet. The main use-case for this is marketing or transactional emails where a preference is known in another system or a segment is being targetted for communcation.

Example URL

http://www.example.com/my-page?music=pop&utm_campaign=summer

Example Configuration

groucho.config.adjust = [{
    dataAttribute: 'groucho-music-genre',
    userProperty: 'user.genre'
    paramOverride: 'music',
  }, {
    dataAttribute: 'groucho-lead-source',
    userProperty: 'user.leadSource'
    paramOverride: 'utm_campaign',
}];

Quick Wins

Discover how many pages a user has visited on your site.

function getPageCount() {
  return groucho.getActivities('browsing').length;
}