Page context is information you pass to Dynamic Yield about a page being viewed by a visitor to your site. The page context includes details about the page type (homepage, product page, and so on) as well as attributes (for example, if it's a product page – for which product). Note that implementing page context requires technical skills.
Important: You must ensure that page context is determined on every page, based on one or both of the methods described in this article. If the page context is missing, many capabilities do not work as expected. For example, page-type targeting fails, affinity profiles do not update, and recommendations are not served.
Setting page context
Choose your method
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 script.
-
Auto-detect rules: Set rules to detect the page type and fetch its attributes. Recommended for SPAs. This is supported only for e-commerce sites using the Dynamic Yield SPA flow.
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. In this case, the context is first determined by the auto-detect rules, and the code is the fallback if the rules fail for any reason.
Set the context
Both options start with going to Settings > General Settings in the navigation.
Option 1: Implement context using code
Grab the code from the General Settings screen and paste the relevant code on each page.
Homepage example:
/**
* @param {string} type
* @param {string[]} data
*/
export function setDYContext(type, data) {
window.DY = window.DY || {};
DY.recommendationContext = { type: type, data: data };
}
export default function HomePage() {
// ...
useEffect(() => setDYContext('HOMEPAGE'));
return (
// ...
)
}
Product page example:
/**
* @param {string} type
* @param {string[]} data
*/
export function setDYContext(type, data) {
window.DY = window.DY || {};
DY.recommendationContext = { type: type, data: data };
}
export default function ProductPage(props) {
// ...
useEffect(() => setDYContext('PRODUCT', [ props.sku ]), [ props.sku ]);
return (
// ...
)
}
Homepage example:
/**
* @param {string} type
* @param {string[]} data
*/
export function setDYContext(type, data) {
window.DY = window.DY || {};
DY.recommendationContext = { type: type, data: data };
}
export default class HomePage extends React.Component{
// ...
componentDidMount() {
setDYContext('HOMEPAGE');
}
render() {
return(
// ...
)
}
}
Product page example:
/**
* @param {string} type
* @param {string[]} data
*/
export function setDYContext(type, data) {
window.DY = window.DY || {};
DY.recommendationContext = { type: type, data: data };
}
export default class ProductPage extends React.Component{
constructor(props) {
super(props);
this.state = { sku: props.sku }
}
// ...
componentDidMount() {
setDYContext('PRODUCT', [ this.props.sku ]);
}
componentDidUpdate(prevProps) {
if (prevProps.sku !== this.props.sku) {
setDYContext('PRODUCT', [ this.props.sku ]);
}
}
render() {
return(
// ...
)
}
}
<script type="text/javascript">
window.DY = window.DY || {};
DY.recommendationContext = { type: "PRODUCT", data: ['SKU123'] }; // in this example - a product page
</script>
<script type="text/javascript">
window.DY = window.DY || {};
DY.recommendationContext = { type: "POST", data: ['POST_ID123'] }; // in this example - a post page
</script>
Option 2: Auto-detect page context
This method enables you to be flexible and make changes without altering your site's code. Note, however, that the auto-detection might cause a very small delay in serving campaigns (also known as "flicker"). Note also that this out-of-the-box feature might still require some code adjustment.
- Determine how you want to define each page type. Currently, this is done using a pattern in the page URL ('contains' or 'regex'), or using the page <title> tag.
Note: In the URL option, parameters are ignored for evaluation purposes. - For all page types except Homepage and Other, you also need to define the page's attributes to complete the context data. This can be done in the page URL, or by inputting the relevant data attribute.
- To check that the rules are defined properly:
- Click Verify, and then select the page selecting the page
- Review how Dynamic Yield identifies this page using our Implementation Helper.
- If your site is multi-language, add a slimmer version of the context to your site code, with the "lng" attribute only. For example:
DY.recommendationContext = {lng: 'en_GB'};
If you make any changes to the site in the future, make sure you update the relevant context settings as well.
The following are examples of regular expressions for context on each of these page types:
Homepage
The regular expression (regex) added in this context rule is a string added to the end of the homepage URL: www.mysite.com/[REGEX], where the tag [REGEX] is replaced with whatever expression you want to use. Note that there can be no additional text after the expression.
Example:
Expression: /\w{2}\/\w{2}\/$ (URL is www.mysite.pl/\w{2}\/\w{2}\/$)
This rule finds this URL: www.mysite.com/pl/pl/
This rule does not find this URL: www.mysite.com/pl/pl/new-in/men
Product page
To set a regex for context on a product page, there are two parts: Define the page type (set product targeting) and define the SKU location (set the context rule):
In the Define Page Type area, select the regex context, and then add the expression (where the example displays [my regex].
Example:
Expression: *[a-zA-Z0-9_]{5}-[a-zA-Z0-9_]{3}.*
This rule finds all pages with an SKU structure that meets the included conditions, such as this URL:
www.mysite.com/pl/pl/4270h-00x/opaska-na-wl-re
Next, set where the SKU is located on your product page. In this example, the SKU value is taken from the dataLayer[0].sku (on the page). Objects can be used in regex rules if they are available from the global window.
Cart page
The cart URL is unique. For example, this URL: https://www.mysite.com/pl/pl/checkout/cart/ is the only URL on the site with the string /checkout/cart. Therefore, no regex rule is needed. The page type can be detected using the URL parameter.
Notes:
- Context rules have a 50 ms timeout, so make sure the element you are querying is available in this time frame.
- The dynamic attribute can be a word (string, char, and so on), or it can be code that is available in the global window, for example: dataLayer[0].sku.
- Make sure to set data parameters for product page types that require them. For example, PRODUCT or CATEGORY. If you use the Data Attribute option, you must ensure that this parameter is defined either manually or automatically within the context rule, otherwise, Page context will not be created and Dynamic Yield scripts will not work fully (say, campaigns might not be served).
Context data
Context data differs based on your website industry:
Page Type | Attributes | Code Example (Non-SPA) |
---|---|---|
Homepage | -- | DY.recommendationContext = {type: 'HOMEPAGE'}; |
Category | Full hierarchy of category names, from top-level downwards. Category names should be identical to the categories that appear in the product feed (including capitalization). | DY.recommendationContext = {type:'CATEGORY', data: ['Women', 'Accessories','Hats']}; |
Product Page | 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 |
Up to 20 SKUs (strings). Must match SKUs in the product feed.
|
If there are items in the cart: DY.recommendationContext = {type:'CART', data: ['SKU123','SKU234']}; If cart is empty: DY.recommendationContext = {type:'CART', data: ['']}; |
Other (if page matches none of the above page types) |
-- | DY.recommendationContext = {type: 'OTHER'}; |
Page Type | Attributes | Example (Non-SPA) |
---|---|---|
Homepage | -- | DY.recommendationContext = {type: 'HOMEPAGE'}; |
Category | Full hierarchy of category names, from top-level downwards. Category names should 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 above page types) |
-- | DY.recommendationContext = {type: 'OTHER'}; |
Page Type | Attributes | Example (Non-SPA) |
---|---|---|
Homepage | -- | DY.recommendationContext = {type: 'HOMEPAGE'}; |
Other (if page is not homepage) |
-- | DY.recommendationContext = {type: 'OTHER'}; |
Note: All page context values must be in capital letters.
Multi-language support
Dynamic Yield supports multilingual 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 to the page locale, add the “lng” attribute to the page context, with the page locale as value:
DY.recommendationContext = {type: 'HOMEPAGE', lng: 'en_GB'};
The locale can be determined freely, but it must match the locale you use in your product/content feed. You can also target campaigns based on user locale (using the "lng" attribute). To learn more, see the Multilingual Support article.
Validating page context configuration
- Log in to Dynamic Yield and open your website.
- Hover over the Dynamic Yield icon
on the bottom right corner and click the Implementation Helper icon
. If you do not see the Dynamic Yield icon, either you are not logged in or your script is not implemented.
- Begin with your homepage. Verify that the page type is “Homepage” and that the Context Implementation is ‘Before script’. Continue to different page types (category, product or item page) to verify the Page Context has been correctly implemented.
- Go to an empty cart page. You should see a warning that there are no SKUs in the cart.
- For product pages, verify your SKUs are listed correctly. When your feed is not synced, you will receive a validation error. This error occurs when the SKU of the current product is missing from the feed.
- When validating an eCommerce site, you can also leverage the implementation dashboard under Settings › General Settings. Page context information is updated in the implementation dashboard every ten minutes, so very recent changes may not be reflected.
If your page context is not validated, click Download Log to further investigate any issues. This log aggregates all known issues of the past 12 hours. Learn more about the Implementation Status dashboard and logs.