groucho
groucho copied to clipboard
Personalization DOM adjuments
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.