groucho icon indicating copy to clipboard operation
groucho copied to clipboard

Personalization DOM adjuments

Open doublejosh opened this issue 7 years ago • 3 comments

This change allows easily personalized pages via simple HTML attributes based on a user's preferences (or overridden via URL params for transactional/marketing links and debugging).

The DOM choices were discussed here: #32

Docs updates are staged here: Full-Docs, they will no longer be included in README files within the codebase.

Here's the crux...

groucho.config.adjust = [{
  dataAttribute: 'groucho-region',
  userProperty: 'user.region',
  paramOverride: 'utm_region',
  helperCallback: myNameSpace.regionCodeToName,
}];
<div class="groucho-personal">
  <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>
</div>

OR

<span class="groucho-personal" data-groucho-region="north-america">Self-Important Tag Line</span>

...the class ensure explicit intent to hide content and allows marking topical content for recording interest but NOT adjusting visually.

doublejosh avatar May 08 '17 20:05 doublejosh