---
title: Context Data
slug: experience/context-data
description: Learn how to enhance your "Purple Experience" by using the $context object in views.json file. Explore the versatile $functions and $global objects and their applications in conditionals. Discover the best practices for variable interpolation in messages.
docTags: 
createdAt: 2023-02-08T13:06:40.000Z
---

The context object `$context` provides information like data results for the views. You can use it to get the content fields of the context object inside the views.json. 

| Example                      | Usage                                                                                                                                                                                                 |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| $context.issue (deprecated)  | accesses a data source of type issue                                                                                                                                                                  |
| $context.platform            | Possible values: web, android, ios                                                                                                                                                                    |
| $context.subscription        | it's filled when subscription data source is used                                                                                                                                                     |
| $context.content             | accesses data for a content                                                                                                                                                                           |
| $context.preview             | the value from the url, e.g. https\://www\.example.com/somearticle.html?preview=true, only available in web                                                                                           |
| $context.preview\_app <br /> |  the [preview\_app metadata key ](https://gitlab.sprylab.com/purple/purple-javascript-api/-/blob/master/purpleInterface.js?ref_type=heads#L3063)states  the same value as context.preview, but in app |
| $context.userAttributes      | You may set and access data related to the user here. It's persisted in local storage.                                                                                                                |

# Intro $global

Global application data (e.g., menus, configs, and taxonomies) have a separate scope for being accessed. The "global" scope is implemented as an object on the window level, so it will get reloaded when reloading the page. Configure "Global" for your application within the `views.json`.&#x20;

Within Global, you may specify data sources that store their data under the "contextKey" in a global scope object. Additionally, a StoreData object containing key-value pairs may be given, which stores the evaluated values (replaceString) under the key in the global scope object.

The global section is executed only once at "app start" within SSR if the global scope does not exist yet. We do not perform any change detection.&#x20;

In all evaluations besides $context and $functions, there is also $global available to access that global store.

**Note: When evaluating any value in a field (whether static or dynamic), all falsy values—such as undefined, null, false, 'undefined', 'null', and 'false'—will be returned as null.**

## Body Tag Attributes

Body tag attributes are pieces of information that are added to your website's main HTML\<body> element. These attributes represent the experience **view** **context.**

Body attributes appear in your website's HTML like this:

```javascript
<body data-storefront-platform="web" data-pxp-device_os="web" data-pxp-preview_app="false">
  <!-- Experience website content -->
</body>
```

This attributes:&#x20;

- Start with a prefix (like `data-storefront-` or `data-pxp-`)
- Contain key-value pairs of information
- Are visible in the browser's developer tools
- Can be accessed by scripts and styling

**What Changed in Experience 5.0.0**

Now, only specific, essential information appears on your website's HTML body tag:

1. **&#x20;Platform Information (Always Visible):&#x20;**`data-pxp-platform` Identifies what type of platform your website is running on (web, mobile, etc.)
2. **App ID (Development/Testing Only):&#x20;**`data-pxp-app_id`is visible when preview=true
3. **Custom Attributes:&#x20;**&#x41;dditional information you specifically choose to display, configured in the experience-config.json. **Example:**&#x20;

```html
`<body data-storefront-device_type="desktop" data-storefront-locale="de_DE">`
```

**How to Configure Custom Attributes**

**1: Access Experience Configuration File**

![](https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/0gTE8ajNZLV0pb9s9LKCx-20251215-132841.png)

**2: Add the Attributes**

Add a `bodyAttributes section` in `purple`&#x20;

![](https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/1fsfK67rHl-V4L_kCjozf-20251215-133539.png)

# Context Updates

### What Triggers a Context Update



| Trigger                        | Changed key(s)                                                                       | When it happens                                            |
| ------------------------------ | ------------------------------------------------------------------------------------ | ---------------------------------------------------------- |
| URL query param changes        | Query param keys + resolved objects (publication, issue, category, search-result, …) | On every navigation or manual URL change                   |
| Data source finishes loading   | The data source’s contextKey                                                         | After each API response                                    |
| Entitlement / metadata refresh | All metadata keys (entitlement\_token, today, connection\_state, …)                  | After login/logout or explicit updateMetadata()            |
| Entitlement state change       | *(all components)*                                                                   | Broadcasts an empty \{} change — forces full re-evaluation |
| User attributes change         | userAttributes                                                                       | When setUserAttribute() is called                          |
| Account data update            | accountData                                                                          | After login or updateAccountData()                         |
| Network status change          | connection\_state                                                                    | When device goes online/offline                            |



### What the Context Object Contains

The $context object is built by merging several layers.
&#x20;**Later layers override earlier ones when keys overlap.**

### Layer Order

1. **Fixed Fields**&#x20;
   - initialUrl&#x20;
   - pathUrl&#x20;
   - userAttributes&#x20;
   - accountData&#x20;
   - outlet&#x20;
2. **Metadata**&#x20;
   - entitlement\_token&#x20;
   - today&#x20;
   - connection\_state&#x20;
   - Other platform metadata&#x20;
3. **URL Query Params**&#x20;
   - All parameters from the current URL&#x20;
4. **View Context**&#x20;
   - Resolved objects such as:&#x20;
     - publication&#x20;
     - issue&#x20;
     - category&#x20;
     - search-result&#x20;
5. **Parent List / Swiper Item**&#x20;
   - Injected when a component is a direct child of a list or swiper&#x20;

## Parent List Injection (Layer 5 Explained)

Each list item injects its data into the child component’s context.

### Key behavior

- Default key = data source type&#x20;
  - Example: content → $context.content&#x20;
- Can be overridden with:&#x20;

:::BlockQuote
\{  "entryId": "customKey"}
:::

- Additional fields:&#x20;
  - $context.entryIndex → item position&#x20;
  - $context.groupIndex → group position (if grouped lists)