Page Context for Web
Page context is the information you pass to Experience OS about every page of your site. This information is used for targeting (for example, using an overlay on the cart page), segmenting users into audiences (for example, users who viewed a specific category), and other essential functionalities of Experience OS. You can manually implement page context in your site's <head> tag, or automatically implement context based on rules defined in the Experience OS console.
Page context includes:
- Page type and attributes: For example, determine that the page is the site homepage or a category page (say, shoes or a premium card). Page attributes differ based on your industry. Page type must be in all-caps.
- Localization: The language or locale the user is currently viewing this page. This is optional and required only if your website is multi-language.
Page context for e-commerce
| Page Type | Attributes | Example (non-SPA) |
|---|---|---|
| HOMEPAGE | \-- | DY.recommendationContext = {type: 'HOMEPAGE'}; |
| CATEGORY | Full hierarchy of category names, from top-level downwards. Category names must be identical to the categories that appear in the product feed (including capitalization). | DY.recommendationContext = {type:'CATEGORY', data: ['Women', 'Accessories','Hats']}; |
| PRODUCT | SKU (string). Must match a SKU in the product feed. | DY.recommendationContext = {type:'PRODUCT', data: ['SKU123']}; |
| CART | Must match SKUs in the product feed. | If there are items in the cart: DY.recommendationContext = {type:'CART', data: ['SKU123','SKU234']}; If the cart is empty: DY.recommendationContext = {type:'CART', data: ['']}; |
| OTHER (if page matches none of the previously listed page types) | Any text that provides an indication of what the page includes (string). Note that OTHER is the default/fallback type assigned if no other page context is detected. | DY.recommendationContext = {type: 'OTHER', data: ['profile']}; |
Page context for financial institutions
| Page Type | Attributes | Example (non-SPA) |
|---|---|---|
| HOMEPAGE | \-- | DY.recommendationContext = {type: 'HOMEPAGE'}; |
| CATEGORY | Full hierarchy of category names, from top-level downwards. Category names must be identical to the categories that appear in the product feed (including capitalization). | DY.recommendationContext = {type:'CATEGORY', data: ['Cards', 'Premium','Travel']}; |
| PRODUCT | SKU (string). Must match a SKU in the product feed. | DY.recommendationContext = {type:'PRODUCT', data: ['SKU123']}; |
| CART Financial institutions use Cart context for Application pages | Must match SKUs in the product feed. | If there are items in the cart: DY.recommendationContext = {type:'CART', data: ['SKU123','SKU234']}; If the cart is empty: DY.recommendationContext = {type:'CART', data: ['']}; |
| OTHER (if page matches none of the previously listed page types) | Any text that provides an indication of what the page includes (string). Note that OTHER is the default/fallback type assigned if no other page context is detected. | DY.recommendationContext = {type: 'OTHER', data: ['contact_us']}; |
Page context for media
| Page Type | Attributes | Example (non-SPA) |
|---|---|---|
| HOMEPAGE | -- | DY.recommendationContext = {type: 'HOMEPAGE'}; |
| CATEGORY | Full hierarchy of category names, from top-level downwards. Category names must be identical to the categories that appear in the content feed (including capitalization). | DY.recommendationContext = {type:'CATEGORY', data: ['TOP_LEVEL_CAT', 'CHILD_CAT','GRANDCHILD_CAT']}; |
| POST (The content page) | Article ID (string). Must match a Post ID in the content feed. | DY.recommendationContext = {type: 'POST', data: ['1234']}; |
| OTHER (if page matches none of the previously listed page types) | Any text that provides an indication of what the page includes (string). Note that OTHER is the default/fallback type assigned if no other page context is detected. | DY.recommendationContext = {type: 'OTHER', data: ['profile']}; |
Localization in page context
Dynamic Yield supports multi-language and multi-locale websites by automatically displaying the correct data on product recommendations (such as the product name in the language currently served on the page) and variations. To adapt Dynamic Yield campaigns this way, add the lng attribute to the page context on every page:
DY.recommendationContext = {type: 'HOMEPAGE', lng: 'en_GB'};
We recommended that you use standard language codes (ISO 639-1) and country codes (ISO 3166-1 alpha-2). For example, en_US, en_GB, fr_DE.
Implementing context
There are 2 ways to determine the page context on your site:
- Using code: Put a short code snippet in the
<head>tag of every page, before the Dynamic Yield scripts, and for SPAs, with every new page context change, using hooks or lifecycle methods. - Auto-detect rules: Set auto-detect rules to detect the page type and fetch its attributes. Recommended for SPAs. This is supported only for sections from the e-commerce vertical. Note: Contact your technical account manager to enable auto-detect.
No need to choose only one option
You can implement different page types in different ways. For example, you can use code on your homepage and use auto-detect rules for product pages.
You can even use both methods for the same page types. Note that the embedded code is evaluated only if there is no valid context rule, and if both are set for the same page, the rule's context is applied.
To validate your context implementation, see Validating Your Script Implementation.
Updated about 2 months ago