Full Docs

Work In Progress, NOT YET ACCURATE

• Moving markdown file to wiki page(s).
• Adding details for personalization PR.

---

NEW DOCS

Favorites

Managed Favorites

Force some user properties to be dynamically controlled by tag favorites, based on user behavior. You'll need to specifically call out which user properties can be updated this way and from which favorites.

Examples

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

You can easily filter and/or reveal content based on each users' personal preferences. You'll need to create groucho panes and user data attributes to indicate which items correspond to which user values.

Example Adjustments

<section data-groucho-pane="user.genre" class="hidden">
  <span data-groucho-pref="pop">Gaga</span>
  <span data-groucho-pref="rock">Zeppelin</span>
</section>

<div data-groucho-pane="user.leadStatus" class="hidden">
  <a href="/order-history" data-groucho-pref="customer">Past Orders</a>
</div>

Groucho will find panes and process each element with a groucho-pref data attribute. You are essentially referencing localStorage values to choose what's visible.

Note: The markup allows for both initially hidden and initially shown panes and elements.

Param Overrides

Force specific user preference personalization with URL param overrides. This allows ensuring specific page behavior regardless of user values as well as adjusting pages when the user has no preferences yet.

example.com?music=pop&campaign=summer

Example Configuration

groucho.config.overrides = [{
    parameter: 'music',
    userProperty: 'user.genre'
  }, {
    parameter: 'campaign',
    userProperty: 'campaign'
}];