# Welcome to Crobox Start your journey with Crobox. Learn how to integrate, use, and optimize the platform with guides, tutorials, and technical documentation. ### Documentation & Resources
Getting StartedThe essential guide to integrate Crobox API. Prepare with the base technical implementations to start utilizing Crobox on your site./pages/j38lBQCWMororgh0wHTv
Using CroboxFind our collection of how-to-guides, featuring tutorials, advanced details and best practices to make the most out of your Crobox experiences.https://github.com/crobox/docs/blob/main/docs/broken-reference/README.md
Technical DocumentationImplement advanced technical customizations to elevate Crobox’s performance on your platform./pages/tmkJPm51WPg6ZPz0DOVz
Security & ComplianceAccess comprehensive security and compliance documentation, covering security management, data security and legal policies./pages/nrL0JGYKBByvRQPXRxZu
AdministrationDiscover how to manage user access, configure security settings, handle billing, and contact Crobox support./pages/kqBp4AmaF9avUIPH9Qek
# What's New Learn about the latest Crobox features and improvements. NEW FEATURE - AUGUST 21 2026 ### 🔗 Klaviyo CRM Integration Klaviyo is now available for Crobox CRM webhook integrations. Send Product Finder email captures and preference data to Klaviyo in real time. **Why You'll Love It** * Build targeted follow-up flows from Product Finder responses. * Enrich Klaviyo profiles with zero-party preference data. * Personalize communications using shoppers’ stated needs. Contact your Account Manager to discuss setup and availability. Learn more *** NEW FEATURE - AUGUST 7 2026 ### ✨ Bazaarvoice Data Integration Bazaarvoice data can now be imported into Crobox as product properties. Use review data and other defined attributes across Crobox experiences. **Why You'll Love It** * Enrich product data with Bazaarvoice review data and defined attributes. * Use imported properties in Product Finders and Campaigns, or other Crobox experiences. * Configure the connection with Crobox as a managed integration. Contact your Account Manager to discuss availability and setup. Learn more *** NEW FEATURE - JULY 31 2026 ### 🗂️ Category Results for Product Finders Category Results groups Finder recommendations into category slots, rather than one ranked list. Build complete routines, bundles, or outfits from a single Finder for your visitors. **Why You'll Love It** * Group products by a feed property, such as Product Type or Category. * Control category order with your existing Product Ranking rules. * Suggest alternatives per category to give visitors their next best options. * Choose a vertical or responsive grid layout for complete design control. Learn more *** NEW FEATURE - MAY 21 2026 ### 🤖 Generate Insights with AI in Analytics You can now build and refine Analytics widgets with a plain-language prompt. Describe the question you want answered, and Crobox generates the widget setup for you — including the title, widget type, metrics, dimensions, filters, grouping, and sorting. **Why You'll Love It** * Build widgets faster without manual setup. * Turn business questions into charts and tables in a few prompts. * Refine a generated widget with follow-up prompts instead of starting over. {% hint style="warning" %} AI can make mistakes. Review the generated widget before saving. {% endhint %} Learn more *** NEW FEATURE - APRIL 7 2026 ### 🎯 New Behavior Filters for Advanced Targeting Four new client behavioral targeting filters are now available: **Client Element Exists**, **Client Idle Time**, **Client Time on Page**, and **Client Viewport**. You can use these filters in your campaigns to target visitors based on real-time behavioral signals, giving you precise control over when and where your messaging appears. **Why You'll Love It** * Target visitors who have been idle for a set amount of time, perfect for re-engagement nudges or triggering a Finder at exactly the right friction point. * Reach visitors who've spent significant time on a page without converting, and guide them forward with a well-timed prompt. * Tailor campaigns to specific viewport sizes for a better experience across devices. Learn more *** NEW FEATURE **-** JANUARY 5 2026 ### 🖥 Wide Screen Mode for Product Finders Your Finder can now stretch to fit the stage. Enable Wide Screen Mode to optimize layouts for landing pages and inline activations, displaying product information alongside images rather than stacked below them over your specified breakpoint. Once enabled, you'll unlock granular control over how your Finder appears on larger screens.
Cover image
Landing page, wide screen example./files/UKG1NBu0oJcsm3rMYsXe
Results page, wide screen example./files/j43XsnhWxcQ0xa7BUvdy
***Note:** Update to the latest Crobox dependencies to access this feature.* Learn more *** NEW FEATURE **-** DECEMBER 9 2025 ### 🔗 CRM Webhook Integrations Now Available Product Finder responses can now flow directly to your CRM in real time—giving you the data you need to follow up with personalized recommendations, enrich profiles, and build smarter customer journeys. **Why You'll Love It** * **Turn discovery into conversation**: Follow up on Product Finder interactions with targeted emails based on your customers preferences. * **Enrich customer profiles**: Add preference data to existing (or new) profiles for smarter segmentation. * **Design intentional workflows:** Trigger automated sequences for abandoned sessions, differentiate flows for new versus returning customers, or connect preference data to loyalty programs. ***Voyado integration is available now. Contact your Account Manager to get started or discuss other CRM platforms.*** Learn more *** NEW FEATURE **-** OCTOBER 30 2025 ### ✨ AI Image Analysis Enrichment ***Your product images just became your secret weapon.*** AI-powered image enrichment now automatically analyzes your products and extracts rich visual attributes—colors, patterns, styles, materials—turning static images into actionable, structured data that powers smarter experiences. Automatically enrich your catalog with visual intelligence that helps users find exactly what they're looking for—and helps you deliver more relevant recommendations users actually relate to. Learn more *** IMPROVEMENT **-** OCTOBER 16 2025 ### 📊 Extended Recommender-Specific Metrics Dive deeper into how your Product Recommender experiences are performing with two new metrics: **Recommenders Shown** (impressions) and **Recommenders Clicked** (engagement). *Group by Action Recommender ID or Action Product ID to spot your top-performing Recommender campaigns and Recommended Products at a glance.* Learn more *** IMPROVEMENT **-** OCTOBER 6 2025 ### ♿ Enhanced Accessibility for Product Finders We've improved the Product Finder to meet latest WCAG and ADA standards, so every visitor—regardless of how they navigate—gets the same smooth experience. Keyboard users will find clear focus indicators as they tab through. Screen reader users will hear helpful announcements about their progress and selections. **Why You'll Love It** * **No barriers**: Visitors using keyboards, screen readers, or other assistive tools can complete your Finder without friction. * **Confidence built-in**: You're meeting accessibility standards that matter, so you can serve your entire audience. Learn more *** NEW FEATURE **-** SEPTEMBER 23 2025 ### ✨ AI-Powered Product Enrichment Is Here Your product catalog can now enrich itself (with some help of course 😉). **AI Enricher Properties** generate new product attributes by analyzing existing data like titles and descriptions—turning unstructured text into structured, actionable information. **Why You'll Love It** * **Extract hidden attributes:** Pull categories, styles, features, and other details from product titles or descriptions (or other properties) without manual tagging. * **Generate fresh content:** Create optimized or enhanced attributes that emphasize key benefits or uncovered data. * **Test before you commit:** Preview AI outputs on up to 20 sample products and refine your prompts before enabling full catalog enrichment. * **Monitor quality effortlessly:** Track enrichment coverage, value distribution, and validation errors through built-in insights. Learn more *** NEW FEATURE **-** SEPTEMBER 17 2025 ### 🔍 "Show More" Button on Results Page When your Product Finder matches more products than you want to show at once, visitors can now see a customizable **"Show More"** button at the bottom of the Results Page. They can load additional recommendations whenever they're ready—no endless scrolling, no information overload, just a clean experience that keeps every relevant product within reach. Enable this via the toggle in your Finder results page settings. Learn more *** NEW FEATURE **-** SEPTEMBER 10 2025 ### ✨ AI-Powered Content Generation for Campaigns You can now generate campaign content directly within the Crobox app using AI. Describe your campaign goal, select which content elements you need, and let AI craft compelling messaging in seconds—perfect for flash sales, product highlights, or urgency-driven notifications. **Why You'll Love It** * **Speed up campaign creation**: Generate headlines, body copy, and CTAs instantly instead of starting from scratch. * **Test smarter**: Quickly create multiple content variations to A/B test different messaging approaches. * **Stay flexible**: Toggle which elements to generate and edit AI suggestions as needed. {% hint style="info" %} The more specific your campaign description (like "20% off black sneakers, limited stock, 48-hour flash sale"), the more targeted your generated content will be. {% endhint %} Start generating within **Campaigns > Content Tab**! Learn more *** IMPROVEMENT **-** JULY 10 2025 ### 🔄 Automated Campaign Lifecycle Management Completed campaigns now automatically move to unpublished after 5 days, then to archived after 30 days. This keeps your campaign overview clean while preserving all historical data and performance metrics. Learn more *** NEW FEATURE **-** JUNE 16 2025 ### 📊 Introducing Cross-Session Metrics You'll now find three powerful new metrics in your analytics dashboard: * **Revenue (cross-session)** * **Transactions (cross-session)** * **Conversion Rate (cross-session)** Previously, your metrics only tracked activity within a single session. These new additions provide a much more complete and accurate picture of the customer journey, linking sales back to the initial Crobox Finder interaction even if the purchase happens up to 30 days later. This means you'll gain a more precise understanding of the long-term impact of customer engagement and how your Crobox experience is driving real results for your revenue and sales efforts! Learn more *** NEW FEATURE **-** JUNE 2 2025 ### 🧩 Product Benefits Now Open by Default You can now choose to display product benefits in an expanded state by default, highlighting key perks without requiring shoppers to click.\ \ Enable this via the toggle in your Finder results page settings. Learn more *** IMPROVEMENT **-** MAY 28 2025 ### 🌎 Improved Locale Visibility in Finder Translations Inactive or unsupported locales are now displayed in the Finder translations dropdown. This gives you better control over which languages are active and lets you easily clean up unused ones, helping you keep your container region settings aligned with your actual delivery needs. *** IMPROVEMENT **-** MAY 16 2025 ### 🛠️ **Finder Health Check Stability** Improved the logic to suppress warning banners for offline finders, preventing false alerts and reducing user distraction during troubleshooting. *** IMPROVEMENT **-** MAY 15 2025 ### 🚀 Smoother Setup, Sharper Insights Enjoy a faster, cleaner Crobox experience! We've added icons for Transformation Rules, and squashed encoding bugs—so your data and dashboards just work. Why You’ll Love It * **Magic, now visible**: You’ll now see icons for Transformation Rules, so you know when your product data is getting Crobox-special treatment. * **Encoding bugs—handled**: Special characters in product IDs won’t derail your insights anymore. Everything works as it should. *** NEW FEATURE **-** APRIL 16 2025 ### ✨ Campaign Creation Just Got Smarter (and Faster) We’ve given Campaigns a major glow-up — so you can create, test, and scale with less guesswork and more power. Whether you’re launching a new promotion or fine-tuning product messaging, here’s what’s fresh in your Campaign dashboard: * **Easier Campaign Targeting** * **Smarter Content Management** * **Design with Confidence** These updates lay the foundation for a more scalable, user-friendly Campaign experience — and prepare you for richer personalization across Crobox Experiences. Learn more *** # First Steps Everything you need to know about integrating Crobox on your website. Get Crobox live in four steps. Start with the snippet. Then send your tracking events. After that, handle consent and security settings if they apply to your setup. {% stepper %} {% step %} #### [**Add the Crobox snippet**](/getting-started/first-steps/get-started-with-crobox) Add the Crobox snippet to every page of your website. You can install it manually or through your tag manager. {% endstep %} {% step %} #### [**Set up event tracking**](/getting-started/first-steps/event-tracking-implementation) Send pageviews and key actions to Crobox. This gives you analytics, product insights, and the data needed for Crobox features to work properly. {% endstep %} {% step %} #### [**Configure cookie wall settings**](/getting-started/first-steps/cookie-wall-settings) If your site requires consent before storing analytics data, update your settings and trigger consent events correctly. {% endstep %} {% step %} #### [**Update your Content Security Policy header**](/getting-started/first-steps/content-security-policy-header) If your site uses a Content Security Policy, allow the Crobox domains and required resource types. {% endstep %} {% endstepper %} Once these steps are in place, your technical setup is ready. # Crobox Snippet Implementation Integrating Crobox on your website is lightweight and fast. All you need to get started is to implement the Javascript Snippet (i.e., tag) manually or in your tag manager. Integrating the Crobox snippet is the first step in your setup. Add the snippet to every page of your website. You can do this manually or through Google Tag Manager. ### Choose your setup method * [**Manual Snippet Implementation**](broken://spaces/-M6BXLJuZMkdXQg6osAC/pages/-M6FUW6WSbCe2A-VNFxm)\ Add the snippet directly to your website code. * [**Google Tag Manager Snippet Implementation**](broken://spaces/-M6BXLJuZMkdXQg6osAC/pages/-M77oM8Uy0c03IxmANSV)\ Add the snippet through a GTM tag that fires on all pages. {% hint style="info" %} Use the snippet that belongs to your Crobox environment. You can find it in **Settings → Website Integration → HTML** or **Javascript (alternative)**. {% endhint %} ### What matters most * Add the snippet to **every page** * Load it from your own Crobox environment * In GTM, fire the tag on **All Pages** * Do not copy the example values below into production {% hint style="warning" %} The examples below show the structure only. They are not valid for your environment. {% endhint %} ### Manual implementation If you manage your website code directly, place the Crobox snippet in the `` of every page. This is usually the simplest setup when you control the template or frontend directly. ```markup ``` {% hint style="warning" %} It is important to load the snippet on every page, since Crobox collects data across the full funnel. {% endhint %} ### Google Tag Manager implementation If you use Google Tag Manager, create a **Custom HTML** tag and paste in your Crobox snippet. Then set the trigger to **All Pages**. That ensures Crobox loads across the full funnel. #### Step 1: Create a new tag Open Google Tag Manager in the workspace for your website and create a new tag. ![](/files/-M6FUZqY3vY3UYFgnrYy) #### Step 2: Rename the tag Rename the tag to something clear, such as **Crobox Javascript Tag**. ![](/files/-M6FUZqZp1GasW7mPyll) #### Step 3: Choose the tag type Select **Custom HTML** as the tag type. ![](/files/-M6FUZq_tYMYexqyRf6J) #### Step 4: Paste your Crobox snippet Paste the snippet from your Crobox environment into the tag. ![](/files/-M6FUZqalfVQnjH7y_Gr) {% hint style="warning" %} Each Crobox snippet is unique. Use the snippet from your own environment or the one shared by your Crobox contact. {% endhint %} ![](/files/-M6FUZqbf0r2NoLPQ2fO) #### Step 5: Set the trigger Open **Triggering** and set the tag to fire on **All Pages**. {% hint style="warning" %} If the tag only fires on part of the site, tracking and experiences will be incomplete. {% endhint %} ![](/files/-M6FUZqcUS9a0HvyXWK3) #### Step 6: Publish your changes Once the tag is ready, publish the container. ### Next step Once the snippet is live, set up [**event tracking**](/getting-started/first-steps/event-tracking-implementation). Event tracking sends pageviews and key actions to Crobox. ### FAQ
Does the snippet affect page performance? The Crobox snippet is served from a CDN with global coverage for fast delivery. It is typically smaller than 50 KB before compression, and loads asynchronously with `async` and `defer`. That means it does not block page parsing or delay rendering.
# Event Tracking Implementation After adding the Crobox snippet to your website, the next step is to implement event tracking by implementing the Javascript API snippets listed in this document. ## Introduction By pushing events to Crobox using custom code snippets per page you can easily integrate the various event tracking needed for Crobox to be able to provide rich Product insights. By connecting those events the various metrics and real-time product information will be available. ## Pageviews On each pageview an event should be sent to Crobox using the `crobox.pageview(data: object, force?: boolean)` API. The first argument is an object with properties that are different per **pagetype**. The second argument is a boolean which only should be set to `true` when you are using an SPI interface and you want to force a new pageview. Normally multiple pageview calls without refreshing the browser will augment each other, by using `force: true` it will register a new pageview instead. ### Page types Crobox uses page types to categorize types of pages together, built-in system ones are: * **index** (Home Page) * **overview** (Product Lister Page) * **detail** (Product Detail Page) * **cart** (Cart Page) * **checkout** (Checkout Page) * **complete** (Complete / Confirmation page) * **search** (Search Result page) * **other** (Fallback) ## Properties available per page type Different properties can be sent per page type in the pageview event. For example the checkout pages can have a `step` property where the overview pages can have a list of all product-ids currently available on that lister page. The various properties are specified for each individual page-type below. ### All pages These properties are **required** on all pageview events.
PropertyTypeDescription
ptnumber

Indicates what pagetype is currently being viewed. Should be one of the built-in system pagetypes available on the crobox object:

  • crobox.PAGE_INDEX
  • crobox.PAGE_OVERVIEW
  • crobox.PAGE_DETAIL
  • crobox.PAGE_CART
  • crobox.PAGE_CHECKOUT
  • crobox.PAGE_COMPLETE
  • crobox.PAGE_SEARCH
  • crobox.PAGE_OTHER
lcstringUsed to correctly identifying which country / language the pageview is for. Must be formatted with
valid language and country ISO codes combined with a dash or underscore (language first).
f.e. nl-NL or en-GB
**Code example** {% code lineNumbers="true" %} ```javascript window.crobox = window.crobox || []; crobox.push(function(crobox) { // Crobox API is now ready to used and methods are available crobox.pageview({ pt: crobox.PAGE_INDEX, lc: "en-GB" }); }); ``` {% endcode %} ### Overview pages Product Lister pages normally contain a list of products. By specifying the ordered list products-ids that are shown Crobox can track which products have been viewed. | Property | Type | Description | | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | `imp` | `string[]` | Array of strings that contains the product-ids of the impressions that are shown on the overview page in the same order, f.e. `["1","2","3"]` | **Code example** 
window.crobox = window.crobox || [];
crobox.push(function(crobox) {
    // Crobox API is now ready to used and methods are available
    crobox.pageview({
    pt: crobox.PAGE_OVERVIEW,
    lc: "en-GB",
    imp: [
    "123", // First product id
    "345", // Second product id
    "567", // Third product id
    .... // etc..
    ]
});
});
### Detail pages Product Detail Pages are centered around a single product. By sending that product-id to Crobox it can be used for example to give detailed insights about metrics like Look-to-Book ratio or Add-to-Cart rate. | Property | Type | Description | | -------- | -------- | --------------------------------------------------------------------- | | `pi` | `string` | The product-id of the product that is currently being viewed. `"123"` | **Code example** {% code lineNumbers="true" %} ```javascript window.crobox = window.crobox || []; crobox.push(function(crobox) { // Crobox API is now ready to used and methods are available crobox.pageview({ pt: crobox.PAGE_DETAIL, lc: "en-GB", pi: "123" }); }); ``` {% endcode %} ### Cart pages It is important to register the product-id and quantity of the shopping-cart on cart pages. This helps Crobox to properly identify which products are added, or removed from cart. | Property | Type | Description | | -------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | | `imp` | `{id: string, qty: number }[]` | Array of objects containing the product-id and quantity of the products currently in the cart f.e. `[{id: "1", qty: 2}, {id: "2", qty: 1}]` | **Code example** {% code lineNumbers="true" %} ```javascript window.crobox = window.crobox || []; crobox.push(function(crobox) { // Crobox API is now ready to used and methods are available crobox.pageview({ pt: crobox.PAGE_CART, lc: "en-GB", imp: [ { id: "123", qty: 1}, { id: "345", qty: 3}, .... // etc.. ] }); }); ``` {% endcode %} ### Checkout pages Checkout pages can have multiple steps. By optionally identifying each step you can get deeper insights of checkout behavior. | Property | Type | Description | | -------- | --------- | ---------------------------------------------------------------------------------------- | | `stp` | `number?` | Optional number that can be used to track at which step the visitor is into the checkout | **Code example** {% code lineNumbers="true" %} ```javascript window.crobox = window.crobox || []; crobox.push(function(crobox) { // Crobox API is now ready to used and methods are available crobox.pageview({ pt: crobox.PAGE_CHECKOUT, lc: "en-GB", stp: 2 }); }); ``` {% endcode %} ### Complete pages Complete pages are the most important event to push to Crobox correctly, since they are used to register which products have been bought and if the visitor has converted. | Property | Type | Description | | -------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | `tid` | `string` | The order-id. This is used to uniquely identify and deduplicate a transaction / order. | | `rev` | `number` | Number containing total revenue for this order | | `imp` | `{ id:string, qty: number}\[\]` | Array of objects containing the `id` and quantity of the products being sold f.e. `\[{id: "1", qty: 2}, {id: "2", qty: 1}\]` | **Code example** {% code lineNumbers="true" %} ```javascript window.crobox = window.crobox || []; crobox.push(function(crobox) { // Crobox API is now ready to used and methods are available crobox.pageview({ pt: crobox.PAGE_COMPLETE, lc: "en-GB", tid: "27493", // Order id rev: 162.23, // Order revenue imp: [ { id: "123", qty: 1}, { id: "345", qty: 3}, .... // etc.. ] }); }); ``` {% endcode %} {% hint style="warning" %} If product impressions (imp) are not included on the complete page event, Crobox will fallback to using product data from the last recorded cart page impression. If the order ID (tid) is not included on the complete page event, Crobox will not track the transaction. This may affect the accuracy of conversion and product performance tracking. {% endhint %} ### Search pages Search pages can have an optional search term that was used to get to the search-results. | Property | Type | Description | | -------- | --------- | ---------------------------------------- | | `st` | `string?` | Search term that was used for the search | **Code example** {% code lineNumbers="true" %} ```javascript window.crobox = window.crobox || []; crobox.push(function(crobox) { // Crobox API is now ready to used and methods are available crobox.pageview({ pt: crobox.PAGE_SEARCH, lc: "en-GB", st: "Orange running shoes" }); }); ``` {% endcode %} ### Other pages This is the fallback page type. It is useful for custom client-side pages or routed views that do not map to a standard commerce page. No extra properties are required for `other` pages beyond the shared `pt` and `lc` fields. **Code example** {% code lineNumbers="true" %} ```javascript window.crobox = window.crobox || []; crobox.push(function(crobox) { // Crobox API is now ready to used and methods are available crobox.pageview({ pt: crobox.PAGE_OTHER, lc: "en-GB" }); }); ``` {% endcode %} ## Actions Numerous actions are happening on pages at the same time. In order for Crobox to be able to provide more advanced analytics about products it is possible to set up tracking for other actions, as well. Two such actions are built-in, namely: ### Impression click action Execute this code when on a product lister page a specific product is clicked. This is so Crobox can register which products are most commonly clicked. {% code lineNumbers="true" %} ```javascript window.crobox = window.crobox || []; crobox.push(function(crobox) { // Crobox API is now ready to used and methods are available crobox.click({ productId: "123" }); }); ``` {% endcode %} ### Add-to-cart action Execute this code when a product is added to the cart. 
window.crobox = window.crobox || [];
crobox.push(function(crobox) {
    // Crobox API is now ready to used and methods are available
    crobox.addToCart({
    productId: "123",
    quantity: 2
});
});
### Custom actions, for example add-to-favorites It is also possible to set up tracking for custom actions, for example when you want to track the number of times users have added a specific product to their favorites. The following logic can be used for such cases: ```javascript window.crobox = window.crobox || []; crobox.push(function(crobox) { // Crobox API is now ready to used and methods are available crobox.track('addToFavorites', { productId: "123" // Optional }); }); ``` ## Event system There is an Events API available that can be used to communicate with the third-parties to have a stable connection between the Crobox Platform and the integrating party. This could be used to integrate with third-party analytics or: **Register a new event-listener on the event system** ### `crobox.on(event, callback)` Use this method to register a new event-listener on the event system. | Argument | Type | Description | | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | event | `string` | Name of the event that needs to be listened to. | | callback | `function` | Functionality that needs to be executed when the event fires, as arguments it received the extra arguments that are added when an event is fired | **De-register an existing event-listener on the event system** ### `crobox.off(event, callback)` Use this method to de-register an existing event-listener on the event system. *Note: for this, you do need to have a reference to the existing callback.* | Argument | Type | Description | | -------- | ---------- | ------------------------------------------------------- | | event | `string` | Name of the event that needs to be stopped listening to | | callback | `function` | Functionality that was previously registered | **Fire a new event in the event system** ### `crobox.emit(event, args...)` Use this method to fire a new event in the event system. | Argument | Type | Description | | -------- | -------- | ------------------------------------------------------------------------------------------------------------------ | | event | `string` | Name of the event that you want to emit a new event for | | args... | `vararg` | Extra argument that are passed will be add as arguments to the callback function that are registered on the event. | ## FAQ
Do I need to send a pageview on every page? Yes. Send a pageview on every tracked page or routed view. Always include the correct `pt` value and the `lc` field as essential fields.
Which event is most important for conversion tracking? The complete page event is the most important for accurate revenue attribution to your Crobox experiences. Include both `tid` and `imp` so orders can be deduplicated and sold products can be attributed correctly.
## Next step If your website uses consent-based loading, continue with [Cookie Wall Settings](/getting-started/first-steps/cookie-wall-settings). That ensures Crobox loads in line with your cookie policy. # Cookie Wall Settings This document explains how to implement Crobox according to your cookie policy. ## Storage Types & Purpose #### First Party Cookie The cookie \_crbx is a **first party cookie**, and will not be used outside of our client’s domain. As a default the \_crbx cookie is set as a temporary “*session*” cookie, meaning that it is automatically removed after the browser is closed. It is necessary in order to keep a consistent experience for the visitor, also in case our client uses subdomains. Visitors will be able to see and use the Crobox functionality, but will not be included in analytics data, will not see any AB test variants, and no data will be persisted in connection to that session. If consent is given by the visitor, or not needed according to our client's cookie policy, the cookie will be set as a “*persistent*” cookie, which will expire after the set time by our client (default 180 days). It is then used for *aggregated* analytics & AB testing and to remember a given consent. It is in no way used for tracking or marketing purposes. A returning visitor will not see any pre-filled information or content based on information given in a previous session. #### Temporary Local & Session Storage Crobox makes use of *necessary*, non-persistent local and session storage. Local storage is needed for when the visitor uses multiple browser tabs, but is treated as *temporary*. Once the visitor closes their browser, both storage types will expire, and no data connected to the session, excluding explicit opt-out information, is persisted without proper consent. ## Visitor’s Consent - Website Integration Instructions If your cookie policy requires an explicit consent to store data for analytics (and AB testing), turn on the setting “Opt-in needed to persist visitor data” in your website integration general settings, and make sure that in any case the [Crobox snippet](/getting-started/first-steps/get-started-with-crobox) is loaded and [events like pageview](/getting-started/first-steps/event-tracking-implementation) are sent on page load or visitor action. No data will yet be persisted beyond the session. Only after the consent has been given, the events that were sent to Crobox will be persisted (anonymously) for analytics purposes. Call the Opt-in Javascript event, described below, for visitors that have given the consent. #### Opt-in: set \_crbx Cookie on Explicit Consent Needed if according to your cookie policy you require explicit consent for analytics or AB testing. When the user gives the consent on your platform, call the Opt-in Javascript event as followed: ``` const crobox = window.crobox || []; crobox.push(crobox => crobox.optIn()); ``` {% hint style="info" %} Ideally this Opt-in event is called in a routine that looks at the consent state of your visitor, and not directly on a button click event in your cookie banner. This is because your cookie banner might not be shown anymore to returning visitors for a longer period than the Crobox persistence time, for example because of stricter expiration rules that are enforced by browsers like Safari. {% endhint %} {% hint style="info" %} It is only needed to call this method once (for example when visitors are accepting cookies, or denying them), so there is no need to call them every time the page loads. {% endhint %} #### Opt-out: Revoke Explicit Consent To opt-out for a previously given consent, call the Opt-out Javascript event as followed: ``` const crobox = window.crobox || []; crobox.push(crobox => crobox.optOut()); ``` #### Loading the Crobox snippet after consent in the cookie banner It is advised to load the [Crobox snippet](/getting-started/first-steps/get-started-with-crobox) and send [events like pageview](/getting-started/first-steps/event-tracking-implementation) in any case (see above). Otherwise, functionally for which no consent is needed cannot be shown to the visitor’s first, and most important, the landing page. In case the Crobox snippet can only be loaded after a consent in the cookie banner, be sure that the snippet is loaded and the [pageview event](/getting-started/first-steps/event-tracking-implementation) for that page is called on consent action (f.e. In the cookie banner), and not on the next page load. Otherwise the visitor that gave the consent will be missed out on these important landing pages, both functionally and in analytics data. ## No Explicit Consent Needed for Analytics Cookies If you do not require an explicit consent for analytics cookies, turn off “Opt-in needed to persist visitor data” in your website integration general settings, and make sure the [Crobox snippet](broken://pages/-M6FUW6WSbCe2A-VNFxm) is loaded in any case. The cookie will now be default set without further implementation requirements. ## FAQs
Why don't my experiences show up right after users accept cookies? When you load the Crobox snippet after consent, experiences won't appear until the next page load—unless you manually trigger a pageview event. After loading the snippet, call `crobox.push(crobox => crobox.pageView());` to ensure your experiences appear immediately. This tells Crobox about the current page so it can show relevant content right away.
How can I verify my cookie consent setup is working properly? Open your browser's developer tools and check the Network tab for "crobox" requests. After users accept cookies, you should see Crobox network activity immediately—no page refresh needed. If requests only appear after refreshing, the pageview event isn't firing correctly when the snippet loads.
## Next step If your website enforces a Content Security Policy, continue with [Content Security Policy Header](/getting-started/first-steps/content-security-policy-header). That shows which Crobox domains and directives to allow. # Content Security Policy Header In this article we will describe the necessary steps your team will need to take in order to whitelist Crobox in your Content Security Policy header. ### What to do if your website enforces a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) header: Crobox loads scripts, fonts, images and fetches data from 2 domains, so you need to add both of the following to your CSP: * **`cdn.crobox.io`** * **`api.crobox.com`** to the `script-src`, `font-src` , `img-src` , `connect-src` sections (or `default-src` if not using those specifics) sections of the CSP header.\ \ Crobox creates the stylesheets dynamically so you will need to add **`'unsafe-inline'`** the `style-src` section. Other third-parties that might be used are Google Fonts and Unsplash, so their resources also need to be whitelisted, if not already included in your CSP. Depending on how strict the policy is applied you might also have to add **`'unsafe-eval'`** to `script-src` since this is used for the Crobox preview mode. # Sagent Find everything you need to set up, customize, and optimize your Sagent. This section guides you through creating an effective and working guided selling Sagent.
TitleDescriptionTarget
Getting startedGet your Sagent live with these essential steps./spaces/-M6BXLJuZMkdXQg6osAC/pages/o4qx6Q8aKq8mqE2iP2vF
MonitoringTrack your Sagent's health with built-in monitoring widgets, filters, and conversation-level signals./spaces/-M6BXLJuZMkdXQg6osAC/pages/08oGHtTKJkE4C26aXIaM
Legal & ComplianceUnderstand the legal scope, responsibility, and disclosure requirements for Sagent conversations./spaces/-M6BXLJuZMkdXQg6osAC/pages/xiaBbHXFmQ4W9rYFqZBg
AnalyticsTrack Sagent performance in the Dashboard tab and explore conversation data in Ask Analytics./spaces/-M6BXLJuZMkdXQg6osAC/pages/TTwx1a0oywndRM0OzZ4f
# Setup your Sagent Get your Sagent live with these essential steps. ## Set up and launch Sagent Sagent is an AI-powered guided selling chatbot that uses your product catalog to help shoppers find the right product through natural conversation. It draws on your product data and category knowledge to ask the right questions, understand what a shopper is looking for, and surface the most relevant recommendations. This guide walks you through everything you need to get Sagent live — from creating the experience and connecting your product data, to configuring how it behaves, what it says, and how your customers will access it. ### Before you begin Make sure the following are in place before you start: * Your product data is available in Crobox. If it isn't yet, set this up first: * [Setting up a Product Feed](/how-to-guides/product-data/setting-up-a-product-feed) * [Manage and Transform Product Properties](/how-to-guides/product-data/manage-and-transform-product-properties) * [AI Enricher Properties (text-based)](/how-to-guides/product-data/ai-enricher-properties-text-based) * You have access to **Experiences** in the Crobox platform * You know which export feed contains the product data Sagent should use *** ### Set up Create the Sagent and connect it to your product catalog. {% stepper %} {% step %} #### Open the creation flow Go to **Experiences → Sagent → New Sagent**. {% endstep %} {% step %} #### Set the basic details Set the **Chatbot Name**, **Product Categories**, if relevant, and the **Chat Language**. {% endstep %} {% step %} #### Save the Sagent Click **Save**. {% endstep %} {% step %} #### Connect the data source Open the **Products** tab, select the export feed Sagent should use, and click **Sync**. {% hint style="info" %} Use **Product Categories** if your catalog contains distinct product groups — this helps Sagent stay focused on the right assortment rather than searching across unrelated products. {% endhint %} {% endstep %} {% step %} #### Test the data connection Go to **Setup → General**, start a conversation in the preview panel, and confirm Sagent can access your product data before moving on. {% endstep %} {% endstepper %} *** ### Knowledge Sagent's knowledge comes from the product data in your connected feed. The products that remain after your feed is synced are what Sagent draws on to answer questions and make recommendations. {% stepper %} {% step %} #### Open the product catalog Open the **Products** tab. {% endstep %} {% step %} #### Review what Sagent can access Use the search and filters to browse the catalog and confirm the right products are available to Sagent. {% hint style="info" %} The quality of Sagent's recommendations depends directly on the quality of your product data. Well-structured properties and complete descriptions give Sagent more to work with. {% endhint %} {% endstep %} {% step %} #### Fix data issues at the source Check for missing products, incorrect values, or incomplete descriptions. Review your feed setup if something looks off, then update the source data and sync again if needed. {% endstep %} {% endstepper %} If something looks off, the issue is likely in your feed setup. Use the links in [Before you begin](#before-you-begin) to review your product data configuration. *** ### Behaviour Control how Sagent conducts the conversation and when it shows recommendations. {% stepper %} {% step %} #### Open the behavior settings Go to **Setup → Behavior**. {% endstep %} {% step %} #### Set recommendation thresholds Set the **Recommendation Thresholds** to control when Sagent asks more questions versus showing results: * **Maximum Matches** — ask again if too many products still match * **Maximum Questions** — stop after a set number of questions * **Minimum Details** — require enough user input before recommending {% endstep %} {% step %} #### Adjust tone and answer length Adjust **Tone of voice** and answer length to match your brand. {% endstep %} {% step %} #### Add guidance prompts Add **Guidance Prompts** for any conversational behavior that standard settings don't cover. {% endstep %} {% step %} #### Open the question flow Open the **Guidance** tab. {% endstep %} {% step %} #### Review suggested questions Review the questions Sagent's algorithm has suggested, shown in priority order. {% endstep %} {% step %} #### Reorder the questions Drag and drop questions into the order you want Sagent to ask them. {% endstep %} {% step %} #### Hide questions you don't want to ask Use the **eye icon** to hide any questions Sagent shouldn't ask. Hidden questions can be restored at any time from the **Questions hidden by you** section at the bottom of the page. {% endstep %} {% step %} #### Enable multi-select where needed Enable **Multi Select** on any question where users should be able to choose more than one answer. {% hint style="info" %} Use the answer chips to simulate user selections and preview how Sagent responds. This is for testing only — it doesn't affect your configuration. {% endhint %} {% endstep %} {% endstepper %} *** ### Content Update the copy and visual design so Sagent feels like a natural part of your experience. {% stepper %} {% step %} #### Open the content settings Go to **Setup → Content**. {% endstep %} {% step %} #### Review the prefilled copy Review the prefilled copy across the experience. {% endstep %} {% step %} #### Update the copy Update any text to match your brand. {% endstep %} {% step %} #### Complete the privacy policy content Complete the **Privacy Policy Content** field before launch. {% hint style="warning" %} You must complete the **Privacy Policy Content** field before Sagent can go live. Don't leave this until launch day. {% endhint %} {% endstep %} {% step %} #### Save your content changes Click **Save**. {% endstep %} {% step %} #### Open the design settings Go to **Setup → Design**. {% endstep %} {% step %} #### Set theme colors Under **Theme & Colors**, set your **Primary Color**, **Primary Text Color**, **Surface Color**, and **Secondary Text Color**. {% endstep %} {% step %} #### Set the gradients Set the **Aurora** and **Animation Shine** gradients — these control the animated gradient on the loading screen and the shimmer effect that plays as each question appears. {% endstep %} {% step %} #### Update the appearance Under **Appearance**, upload your **Top Bar Icon** and set a **Chat Background** image or color. {% endstep %} {% step %} #### Adjust the roundness Adjust **Button and Sagent Roundness** to match your brand's style. The default is 6px across all elements. {% endstep %} {% step %} #### Apply advanced styling if needed Under **Advanced**, use the pre-filled CSS selectors to apply any further custom styling. {% hint style="warning" %} Without brand colors and an icon, Sagent will launch with Crobox's default styling. It's strongly recommended to update the Design tab before any demo or client-facing launch. {% endhint %} {% endstep %} {% endstepper %} For a deeper look at every design option, see Configuring the Design tab. *** ### Translations If your Sagent needs to support multiple languages, set up your translations before launch — this covers the static copy users see throughout the experience. {% stepper %} {% step %} #### Open the translations tab Go to the **Translations** tab. {% endstep %} {% step %} #### Select a language Select a language from the dropdown. The languages available reflect what's set up in your Crobox account. {% endstep %} {% step %} #### Review the fields Review each field — the original English copy is shown alongside for reference. {% endstep %} {% step %} #### Add or generate translations Update the translations as needed, or click **Generate Translations** to auto-fill using AI. {% endstep %} {% step %} #### Save the translations Click **Save**. {% hint style="info" %} Translations cover static interface copy such as the chat title, loading messages, and privacy policy text. Product content is drawn directly from your product feed and handled separately. {% endhint %} {% endstep %} {% endstepper %} *** ### Deploy A deploy is the entry point through which users open Sagent — whether that's a floating chat button on your website or a QR code in a physical store. Sagent comes with a default chat widget deploy already in place, so you're not starting from scratch. {% stepper %} {% step %} #### Review the default deploy Go to the **Deploy** tab. You'll see a **Default website entry** card already created — a floating chat button that appears bottom-right on the page. Click the card to review its settings and adjust if needed. {% hint style="info" %} You need at least one enabled deploy before Sagent can be published. {% endhint %} {% endstep %} {% step %} #### Create a new deploy Click **+ New Deploy**. {% endstep %} {% step %} #### Choose the deploy type Set the **Deploy Type** — for example, a chat widget or a QR code. {% endstep %} {% step %} #### Choose the Sagent flow Set the **Sagent Flow** to control how the conversation starts: * **Product discovery** — starts the Guided Flow, with the full catalog in scope * **Ask about a product** — starts the Product Flow, with a specific product already in context {% endstep %} {% step %} #### Name and configure the deploy Give the deploy a name and description so it's easy to identify later. Configure any type-specific settings, such as page position for a chat widget or generating and downloading the QR code image. {% endstep %} {% step %} #### Save the deploy Click **Save**. {% endstep %} {% step %} #### Manage existing deploys * **Enable or disable** a deploy using the toggle on its card. Disabling takes it offline immediately — useful if you need to pull it down temporarily without removing it entirely. * **Duplicate** a deploy as a starting point for a similar one — for example, a second QR code for a different product or location. * **Remove** a deploy to delete it permanently. {% endstep %} {% endstepper %} For a full overview of deploy types and configuration options, see Configuring deploys. *** ### Validate before launch Before going live, confirm that Sagent works correctly across the scenarios your users are likely to encounter. {% stepper %} {% step %} #### Check catalog coverage In the **Products** tab, use the search and filters to verify the right products appear for different property combinations. {% endstep %} {% step %} #### Test Sagent in preview In the **Setup** tab, chat in preview mode to test how Sagent responds to real queries. {% endstep %} {% step %} #### Test the Product Flow Open the chat with a specific product in context, as a user would from a product detail page or QR code. {% endstep %} {% step %} #### Test the Guided Flow Start from scratch with the full catalog in scope. {% endstep %} {% step %} #### Test simple and complex queries Test straightforward queries as well as ambiguous or complex ones. {% endstep %} {% step %} #### Test additional capabilities If you've configured additional capabilities such as the **Comparison** tool or **Review summarizer**, confirm these work as expected. {% endstep %} {% endstepper %} **Why this matters:** Even a well-configured Sagent can misinterpret answers or surface the wrong products if the data or question logic has gaps. Testing both simple and complex scenarios is the best way to catch those issues before your users do. *** ### What's next Once Sagent is live, you'll want to keep an eye on how it's performing: * [Monitor Sagent conversations](/how-to-guides/sagent/how-to-use-the-monitoring-tab) * [Understand Sagent analytics](/how-to-guides/sagent/how-to-use-analytics) * [Update your product feed](/how-to-guides/product-data/setting-up-a-product-feed) *** ### Frequently asked questions
What makes Sagent's recommendations accurate? Sagent draws on the product data in your connected feed and its built-in knowledge of your product category. The more complete and well-structured your product properties are, the better Sagent can match shoppers to the right products.
How do I know which export feed to use? Use the feed that contains the product assortment you want Sagent to recommend from. If you're unsure which feed is correct, check with the person who manages your product data in Crobox.
What happens if I skip the Privacy Policy Content field? You won't be able to take Sagent live. This field is required before launch, so it's worth filling it in during the Content step rather than at the last minute.
Can I change the data source after Sagent is live? Yes. Go to the **Products** tab, select a different export feed, and click **Sync**. Be aware that switching feeds may affect the products Sagent recommends, so test after making the change.
What's the difference between the Product Flow and Guided Flow? The Product Flow starts with a specific product already in context — for example, when a user opens Sagent from a product detail page or a QR code. The Guided Flow starts fresh, with the full catalog in scope. Both should be tested before launch to make sure Sagent handles each entry point correctly.
How many questions should Sagent ask before recommending products? This depends on your catalog and your users. Use the **Maximum Questions** threshold in the **Behavior** settings to set a ceiling, and the **Minimum Details** threshold to ensure Sagent collects enough input first. A good starting point is to test with three to five questions and adjust based on how well the recommendations match what users are looking for.
# How to Use the Monitoring Tab Track your Sagent's health with built-in monitoring widgets, filters, and conversation-level signals. ### Overview Use **Monitoring** to check your Sagent's health over time. This view helps you spot quality drops, tool issues, and unusual conversation patterns. Monitoring lives inside each Sagent. It includes two subtabs: **Overview** and **Conversations**. Use **Overview** to monitor trends. Use **Conversations** to inspect individual sessions in detail. ### What you can do in Monitoring Use Monitoring to: * Track conversation quality over time * Check tool response speed and usage trends * Review flagged conversation patterns * Browse individual conversations and metadata * Open a read-only view of a full conversation thread Monitoring includes four default widgets. These widgets are always on. ### Overview tab #### How to use the overview tab {% stepper %} {% step %} #### Open Monitoring for a single Sagent Open your Sagent and click **Monitoring** in the top navigation. {% endstep %} {% step %} #### Choose your locale and time range Use the **Locale** filter to focus on one market or language. The default value is **Global - All**. Use the date picker to define the period you want to review. Start broad when you want trends. Use shorter ranges when you want to inspect recent changes. {% endstep %} {% step %} #### Review the four monitoring widgets Scan all four cards together. They are designed to explain different parts of Sagent health. Use them as a connected view, not as isolated charts. {% endstep %} {% step %} #### Use changes as context Look for drops after recent updates. The trend matters more than a single point. {% endstep %} {% step %} #### Move from overview to conversation review Use **Overview** to spot patterns first. Then use **Conversations** to move closer to the underlying conversations behind the trend. {% endstep %} {% endstepper %} #### Conversation Health This widget shows week-over-week score changes by quality dimension. It uses a line chart over time. Use it to spot whether quality is stable, improving, or dropping. Dips often follow prompt or catalogue changes. That context is important when you interpret the trend. This score helps you understand whether conversations stay useful and on track. #### Average Tool Response Time This widget shows response time trends for each tool. It uses a line chart over time per tool. Use it as a health check for latency issues. Watch for sudden dips or spikes after deployments or infrastructure changes. #### Flagged Conversations This widget shows how many conversations were flagged over time. It uses a stacked bar chart by flag type. Use it to understand whether risk or off-path behavior is increasing. Current flag categories are: * Guardrail trigger * Customer support * Small talk #### Average Tool Usage This widget shows how often each tool is used successfully in conversations. It uses a line chart per tool. Use it to catch unexpected drops in tool usage. That can show when part of the experience is used less than expected. #### How to read the overview tab Start with these checks: 1. Compare the current period with the previous one. 2. Look for changes across more than one widget. 3. Match the shift to a likely product or configuration change. Some examples: * **Conversation Health drops** and **Flagged Conversations rise** — review recent updates and conversation patterns. * **Tool Response Time worsens** and **Tool Usage drops** — check whether response speed is affecting the experience. * **Tool Usage drops** with stable response time — review whether the conversation flow changed. #### Filters and defaults The Monitoring page includes two primary filters: * **Locale** * **Time range** The default locale is **Global - All**. Use the same date range and locale when comparing patterns across widgets. ### Conversations tab #### How to use the conversations tab Use the **Conversations** subtab to review individual sessions behind the trends you see in the overview tab. Start with the conversation list. Then open a session to inspect the full thread. Use this tab when you want to validate what caused a drop, spike, or flag pattern. #### Conversation list The conversation list is a browsable view of recent sessions. Each row includes session metadata to help you scan quickly, including: * timestamp or session date * session length * number of products shown * CTA clicked, if any The list can also show flags for sessions that may need attention. #### How to read the list Use the list to spot patterns fast: * short sessions with no products shown may point to drop-off * repeated CTAs can show which actions users take most often * incomplete sessions can help you find friction in the flow Use flags to find risky or off-path sessions faster. #### Individual conversation view Open any row to inspect the full conversation. The conversation view shows the complete dialogue thread in order, including user messages and Sagent responses. This view is read-only. You cannot take actions from this screen. The conversation view can also include: * flags where triggered * tool usage per Sagent response * quality signals where available #### Filters and retention Use the selected date range to focus the conversation list on a relevant period. Monitoring data is retained for 30 days. Sensitive user data is masked in the conversation experience. Personal details entered by users should not be shown in plain form. #### When to use the conversations tab Use this tab after you detect a change in the overview tab. It is the fastest way to move from a trend to the underlying session behavior. Use it to: * review flagged sessions * inspect incomplete conversations * confirm which tools were used * understand why a CTA was or was not clicked #### Best practices Use Monitoring regularly, not only when something breaks. Weekly reviews work well for trend tracking. Use the page after every major update to your Sagent. When you see a change, compare: * locale * time range * recent Sagent updates #### Related guides Start with [Setup your Sagent](/how-to-guides/sagent/setup-your-sagent) if you are still configuring your agent. # How to Use Analytics Track Sagent performance in the Dashboard tab and explore conversation data in Ask Analytics. ### Overview Use **Analytics** to monitor Sagent performance and explore conversation data. Analytics includes two subtabs: * **Dashboard** * **Ask Analytics** Both subtabs use the same top-level filters: * **Locale** * **Date range** Use these filters first. They shape the data shown in both views. ### What you can do in Analytics Use Analytics to: * track core usage and outcome metrics * compare performance over time * ask plain-language questions about conversation data * add generated charts to the dashboard ### Dashboard tab #### How to use the dashboard tab {% stepper %} {% step %} #### Open the Dashboard subtab Open **Analytics** and stay on **Dashboard**. {% endstep %} {% step %} #### Choose your locale and date range Use the **Locale** filter to focus on one market or language. Use the date picker to define the period you want to review. {% endstep %} {% step %} #### Review the default metrics The Dashboard tab shows a set of default metric cards. Use them as a quick health check. {% endstep %} {% step %} #### Compare changes across cards Do not read one metric in isolation. Check whether multiple cards move together. {% endstep %} {% endstepper %} #### Default metrics The Dashboard tab includes four default cards: * **Sessions** * **Completion Rate** * **CTA Clicks** * **Conversion Rate** Each card uses a chart area and a short description. Each card also includes a three-dot menu. #### Sessions This card shows the total number of user sessions. Use it to understand overall usage volume. Changes can reflect updates to prompts or product selection. #### Completion Rate This card shows the percentage of users who complete the experience. It focuses on users who reach recommendations. Drops may indicate usability issues. #### CTA Clicks This card shows how often users click CTA elements. Changes can follow prompt changes. Use it to understand action-taking behavior. #### Conversion Rate This card is part of the Dashboard layout. It is currently marked as **Coming soon**. #### How to read the dashboard tab Start with these checks: 1. Compare the current period with the previous one. 2. Look for shifts across more than one card. 3. Match the change to recent prompt or catalogue updates. Some examples: * **Sessions drop** and **CTA Clicks drop** — usage may be lower overall. * **Sessions stay stable** and **Completion Rate drops** — review the flow for friction. * **Completion Rate rises** and **CTA Clicks rise** — users may be moving through the experience more effectively. ### Ask Analytics tab #### How to use the Ask Analytics tab Use **Ask Analytics** to query your conversation data in plain language. This tab turns a question into a chart and summary. {% stepper %} {% step %} #### Open Ask Analytics Open **Analytics** and click **Ask Analytics**. {% endstep %} {% step %} #### Set the same filters first Choose the **Locale** and **Date range** before asking a question. These filters define the scope of the result. {% endstep %} {% step %} #### Start with a suggested prompt The interface shows example prompts you can click. These help you start quickly. {% endstep %} {% step %} #### Enter your own analytics request Use the input field at the bottom of the page. Type your request in plain language. {% endstep %} {% step %} #### Review the generated answer The result includes a written summary and a chart. Use both together when you interpret the output. {% endstep %} {% step %} #### Add useful results to the dashboard Use **Add to Dashboard** when you want to keep the chart. {% endstep %} {% endstepper %} #### Suggested prompts Example prompts include: * average sentiment score as a line graph * number of messages and unique users per day * most recommended product per week * most mentioned topics in a table * intents per day * most active day of the week These examples show the kinds of questions the tab supports. #### Generated result view The result area includes: * a chat-style user request * a written explanation of the result * a chart card with title and subtitle * an **Add to Dashboard** button A result can include a line chart for average user sentiment over time. #### Resetting the chat Use **Reset Chat** to clear the current conversation. This helps when you want to start a new analysis path. ### Filters and shared controls Both subtabs use the same shared controls at the top: * **Locale** * **Date range** Use the same filter values when you compare Dashboard metrics with Ask Analytics results. This keeps the analysis consistent. ### Best practices Use Analytics regularly, not only after changes. Start with **Dashboard** for a quick overview. Then use **Ask Analytics** to investigate a specific question. When you find a useful view, add it to the dashboard. # Product Finders Find everything you need to set up, customize, and optimize your Product Finder. This section guides you through creating an engaging user experience.
First Steps & Set UpHow to create your Product Finder and customize its appearance/pages/DBHwK9JL7qxjxTqoyhtp
Flow TabHow to manage the questions of your Product Finder/pages/UTZC98LpleyvdjentsbN
Product Finder EditorHow to customise your pages, questions and answers/pages/ofPQAuqIKmwB2sLY6UpA
TranslationsHow to add relevant languages to your Product Finder/pages/PG6wgRiV8L8Z9PhjmOTL
ActivationsHow to create optimized entry points to your Product Finder on site/pages/RIsMjPAMenPIF7nV0UV9
A/B TestingHow A/B Test your Product Finder/pages/cPiZXT7zXZi3bB5wqHYK
VersionsHow to publish your Product Finder/pages/LEDssATQHpLN9A9Zn8h2
### FAQ
Does the Product Finder solution comply with ADA/WCAG and other accessibility standards? Yes, the solution is designed to be compliant with ADA and WCAG standards, ensuring accessibility for all users. Read more about our key features within the [Accessibility page](/how-to-guides/product-finders/accessibility).
How is the solution optimized for scalability across regions, languages, and currencies? The solution is designed to scale globally, supporting multiple regions, languages, and currencies through dynamic configuration and localization features.
# Launch Your First Product Finder Get your Product Finder live with these quick and essential steps. Make sure your technical setup is complete before diving in. {% stepper %} {% step %} #### Connect Your Data Feed Make sure your [product feed is integrated](/how-to-guides/product-data/setting-up-a-product-feed) so the Product Finder has the latest product information to work with. {% endstep %} {% step %} #### Generate a Finder for Your Category Use our AI-powered in app tool to create a Finder—just enter your product category, and we’ll do the rest. {% endstep %} {% step %} #### Customize Content & Styling Adjust the look and feel to match your brand and provide a seamless experience. {% endstep %} {% step %} #### Set Up Filtering, Ranking & Benefits Link your product data to fine-tune recommendations, add benefits to highlight why a product is a great fit for your user. {% endstep %} {% step %} #### Generate Translations Easily generate translations with AI so your Finder works in all your key markets. {% endstep %} {% step %} #### Activate & Place Your Finder Decide where users can access the Finder on your site for maximum impact. {% endstep %} {% step %} ### Publish & Go Live You’re ready! Launch your Product Finder and start helping customers find the perfect products. 🚀 {% endstep %} {% endstepper %} # Choosing the Right Product Category Before you begin your onboarding journey with us, it's important to make strategic decisions about which product categories or product lines to focus on for your Product Finder experience. This guide will help you consider key factors to ensure that you maximize the effectiveness of your Crobox experience and provide the best finder for your users in line with your business goals. ### Key Considerations for Selecting a Product Category 1. Consider Category Complexity: * Select a product category for which visitors need assistance in deciding the “right” product for their needs. These are usually products containing more complex attributes. * Complex categories benefit more from guided decision-making, enhancing user satisfaction. 2. Evaluate Product Quantity: * Choose a product category with a substantial number of products. * A larger selection ensures the Product Finder can be useful and leverage diverse data attributes to recommend the right product. 3. Identify High-Traffic Products/Categories: * Examine your user session metrics to identify which products or categories attract the most visitors. * High-traffic products indicate strong interest and can provide a wealth of data for recommendations. 4. Ensure Data Quality: * The data for your chosen category must be of high technical quality. * Sufficient, accurate data is crucial for creating questions in the Product Finder that will resonate with your users' needs. 5. Align with your Business Goals: * Ensure your Product Finder aligns with your overall business objectives, this can include reviewing your consumer research, sales and marketing strategies, landing page and website navigation. * Think about whether you aim to promote a particular product category and how this fits into your broader strategic decisions. By taking these factors into account, you'll be well-prepared to set up your Product Finder in a way that drives engagement and meets your business goals. Ready to get started? Let's make the most of your Crobox experience! {% hint style="info" %} Contact your Account Manager, who will be able to answer any questions about your onboarding. {% endhint %} \\ # Setup your Product Finder This guide outlines the process of setting up a Product Finder using the AI Generate Finder feature and configuring essential Finder settings. Product Finders for leading retailers in action 🚀 ### First Steps To create a new Product Finder, follow these steps: 1. **Select Experiences** in the sidebar on the left side of the screen, and click on Product Finders. Then select New Product Finder to create your Finder. 2. Enter the **Product Category** your Finder will focus on, or start from blank. You will be directed to a preview of your newly generated Finder, based on your selections.

Use our AI driven Generate Finder feature to get a head start on relevant questions and answers based on your product category.

### Finder Settings #### General The General Settings section allows you to configure essential properties of your Finder, defining how the Finder is identified, accessed and layered on your website. {% tabs %} {% tab title="Finder Name" %} Edit the unique title of your Finder. The generate finder feature provides a relevant title upon creation, or you can update it manually. {% endtab %} {% tab title="Key" %} The Finder Key is used for a variety of technical purposes, the most important of which is the URL parameter of your Finder. The Key is set to automatically update to match the Finder’s name, or you can update it manually. It should be short, simple, and unique per Finder that you create with Crobox. {% endtab %} {% tab title="Z-Index" %} Choose the Z-Index of your Finder when in use on your website. Elements with a higher z-index will be placed on top of elements with a lower z-index. {% endtab %} {% tab title="Dynamic Answers" %} Dynamic Answers filters the answers of the questions in real-time based on the availability of the products for the specific question path. This way if there are no relevant products available for a given journey, an answer or question can be skipped. This makes sure that the user doesn’t follow a path that will not display a result and that only relevant questions are shown to your users. Turn the toggle on for the Finder's overall dynamic answer function to be set. {% endtab %} {% endtabs %} #### Design The Design tab in the Setup section allows you to customize the visual appearance of your Finder. Below is an overview of the available settings and their functions.
Theme Settings If you have a custom theme within the Enterprise plan, here you can select the theme component and top bar component specific to your brand. Otherwise, use the Default theme.
Global Modify overarching design elements that apply to the entire interface. Image requirements for background and landing page (large images) is **100–200KB**. #### **Core layout** * **Finder Content Width (%):** The content column width as a percentage. Example: `70%`. * **Finder Width (px):** Base width of the Finder iframe container. Example: `750`. * **Mobile Breakpoint (px):** Switch to mobile layout below this width. Example: `600`. #### **Background** * **Background Image:** Default background for the Finder, you can adjust backgrounds per page type for further personalization in the page editors. * **Different for mobile res:** Enable a separate background image on mobile. * **Background Image Mobile:** Mobile-only background image (shown when the toggle is on). #### **Enable Wide Screen Mode** Optimize your Finder's layout for landing pages and inline activations where you want a wider presentation. When enabled, the results page displays product information alongside images (right) rather than below them. Turn on the toggle to reveal these additional settings: * **Wide Screen Breakpoint (px)**: Screen width above which wide screen settings apply. Example: `1200px` * **TopBar Content Width on Wide Screens**: Maximum width of the top bar in wide screen view. Example: `90px` * **Finder Content Width on Wide Screens**: Maximum width of Finder content in wide screen view. Example: `75px` * **Background Image on Wide Screens**: Optional background image for wide screen displays. {% hint style="info" %} Match your TopBar Content Width to your website's menu width for visual alignment. Test on both laptop (1366px) and larger monitors (1920px+) to verify your configuration. {% endhint %} {% hint style="warning" %} These are starting suggestions. Adjust based on your website's layout and test on your actual pages before publishing. For additional wide screen settings, you can further adjust: * Wide screen background settings on a specific [landing page](/how-to-guides/product-finders/finder-editor/page-settings#landing-page) or [results page](/how-to-guides/product-finders/finder-editor/page-settings#results-page). * Wide screen answer column and image size settings with the [question editor](/how-to-guides/product-finders/finder-editor/question-editor#configuring-question-settings). * Inline activation widths within the [finder activations tab](/how-to-guides/product-finders/create-activations#in-line-rendering). {% endhint %}
Color Presets Set your core colors once, then reuse them across pages and components. Page-specific styling can still override these defaults. Use **HEX** for solid colors and **RGBA** when you need opacity. #### Core colors * **Primary Color:** Main brand color for primary actions and highlights. * **Secondary Color:** Supporting accent color. Use for secondary actions and small accents. #### Surfaces (backgrounds) * **Primary Surface Color:** Default card/panel background. Pick a subtle tint. * **Secondary Surface Color:** Alternative surface for contrast between stacked sections. #### Tooltips * **Tooltip Background Color:** Usually a dark `rgba(...)` so content below still shows. * **Tooltip Text Color:** Must pass contrast against the tooltip background. {% hint style="info" %} Keep **Primary vs Primary Surface** high-contrast. Buttons and links often sit on surfaces. {% endhint %}
TopBar Control the Finder header that sits above the content. These settings apply across pages. * **Background Color:** TopBar background. Use `rgba(0,0,0,0)` for transparent. * **Logo Image:** Brand mark shown on the left. Prefer **SVG** for crisp scaling. * **Logo Alt (alternative text):** Accessible label for the logo. * **Icon Color:** Color for TopBar icons (close/back/restart, depending on your setup). * **Progress Bar Fill:** Completed portion of the journey indicator. * **Progress Bar Empty:** Remaining portion of the journey indicator. {% hint style="warning" %} If your TopBar is transparent, double-check icon and progress colors on every page background for accessibility. {% endhint %}
Text Control general text styles used across the Finder. To set your custom brand font, upload the font file within the **base font** field.
Body Configure styles for standard body text, including font, size, and color.
Headings (H1, H2, H3, H4) Adjust the styling for different heading levels, ensuring hierarchy and readability. Don't worry, if you need to apply specific customisations on a page level, you can edit this within the page settings CSS.
Subtext Manage the appearance of secondary or supporting text.
Label Customize label styles for form fields and UI components.
Answer Configure the style for displayed answers or responses within the Finder.
Buttons Button (Primary) — Define the main action button styling, used for start, continue, primary CTA. Button (Secondary) — Adjust the appearance of secondary action buttons, used for skip and secondary CTA.
Theme CSS & Viewport CSS Here, you can add custom CSS to override or extend theme styles, or apply CSS styles specifically for different screen sizes and responsive behavior.
#### Data The Data tab in the Setup section allows you to control how products are filtered, sorted, ranked, and grouped within your Finder, on the overall level. Below is a breakdown of the functions. {% stepper %} {% step %} **Results Filtering Rules** Here, you can define criteria for specific products to be included in the finder results. You can filter products based on attributes by using Conditions, for example, "Product Category \[equal to] Protein Supplement". The available attributes are based around your Product Data. * To apply multiple conditions together, use a Condition Group. {% endstep %} {% step %} **Product Benefits** Assign benefits to your products here on an overall level. Benefits defined here will be added to relevant products on the users results page. * Click Add Benefit to specify new benefits or disadvantages and the criteria for conditions they should appear. * Additionally, you can set a benefit on an answer level within the question editor. {% endstep %} {% step %} **Sorting Rules** To determine how products are ordered within results, select a product attribute. For example, "Product Ranking Points" or “Product Property Price”, and choose between High to Low or Low to High for the order. * To apply multiple sorting criteria, click "Add Sorting Rule." The order of sorting rules determines their priority. {% endstep %} {% step %} **Product Ranking** Define custom ranking rules to adjust product prioritization as a user completes the Finder. Ranking rules add points to products based on the criteria you define. * Click Add Ranking Rule to create a ranking-based prioritization and define the weight of points and the condition they receive certain points. * Additionally, you can set a ranking rule on an answer level within the question editor. {% endstep %} {% step %} **Product Grouping** Group products based on a selected attribute within your properties to affect the view of products in the results page. * Click Add Group By to choose a grouping category. * For example, if your product data is complex and has product titles named the same (due to sizing or color information), use the group by “Title” property to ensure duplicate or similar products are not shown twice on the results page. {% endstep %} {% endstepper %} # Manage the Question Flow In this guide, you will learn how to manage and arrange the questions in your Product Finder, as well as how to add new questions to the flow. ### Reorder and Define the Question Flow To reorder your questions, simply break the connection between questions by hovering over the link and selecting the X mark. To link questions together, drag the question (or answer) node and connect it to another. All questions must be linked in a logical sequence. Additionally, you can link answers to specific follow-up questions. For example, selecting a particular answer can direct users to a related question based on their choice. To do this, simply drag the answer to the target question you want to connect it to. {% embed url="" %} Watch how to reorder and define your question flow. {% endembed %} ### How to Add a New Question To add a new question to your Product Finder, follow these steps: 1. Select **Add question** to create a new question, or select the three dot menu on an existing question to duplicate it. * You'll be directed to the question editor to set up your question, for detailed editing instructions, refer to the Page Editor guide. 2. Save your question and navigate back to the Flow Tab, where your new question will appear. 3. Connect your new question dragging the question node to connect it within a specific point in the flow. 4. Once you're satisfied with the placement, click Save to finalize the changes. {% embed url="" %} Watch how to add or duplicate a question. {% endembed %} ### Copy and Paste Questions Between Finders You can easily copy and paste questions within the same finder or even between separate finders or containers. 1. Copy a Question 1. Select the three-dot menu on any question. 2. Click Copy to copy the question to your clipboard. 2. Paste a Question in Another Finder 1. Go to the Flow Tab of another finder. 2. Select the three-dot menu at the top right of the page and click Paste to add the copied question to the new flow. Alternatively, select Duplicate from the three-dot menu to create a copy of the question within the same finder. This makes it easy to reuse questions across different finders without having to recreate them from scratch. ### FAQ
What happens if I don’t connect the first or last question properly? If the first question is not connected to the landing page or the last question is not connected to the results or loading pages, your Product Finder may not function correctly. The flow could break, leading to users not being able to navigate through the Finder as expected.
Can I edit or delete a question after it’s been added to the flow? Yes, you can edit or delete any question at any time. To edit a question, simply click on it within the Flow Tab. To delete a question, click the remove icon within the three dot menu. Keep in mind that deleting a question will affect the flow, so make sure to adjust connected questions accordingly.
How do I ensure my questions are logically ordered for the best user experience? When organizing your questions, ensure the flow feels intuitive. Start with broad, general questions and progressively narrow down based on user responses. Use the preview feature to test the flow and verify that the sequence makes sense before finalizing your changes.
Can I add conditional logic to a question (e.g., based on previous answers)? Yes, you can add conditional logic to certain questions using the Skip functionality in the question settings. This allows you to define the journey for users by skipping questions or answers based on their previous answers. For more details on setting up conditional logic, refer to the Skip Functionality within the page editor.
\\ # Finder Editor The Finder Editor allows you to customize and manage the pages, questions and answers within your flow. This documentation will help you tailor each step of the user's recommendation journey.
Page Settings

Configure the layout, advanced styling, and behavior of each page in your Finder flow		/pages/sWBTrIR7IRqj3BcXzcXe
Question Editor

Define question content, logic, and structure to guide users effectively		/pages/Q0xuWlSDCQ4iyvAxx3iF
Answer Editor

Customize answer options, filtering, and ranking to refine product recommendations		/pages/KqUTwBrtDrHAae2hxdpx
# Page Settings This guide provides detailed instructions on general page settings, plus settings for Landing, Loading, Question, Results, and Category Results pages. ## General Page Settings These settings are applicable to every page in your product finder flow, and can be accessed by selecting the Page Settings button at the bottom left of a specific page/question within your flow. Here, you can select what the page will operate as from several predefined page types. This will then define which types of settings you can further apply within the question editor. Additionally, you will define the Page Key, which acts as a unique identifier for each page. ### Page Types [**Landing Page:**](#landing-page) This page serves as the entry point for users, featuring an introductory message or educational content on what the user should expect. [**Question Page:**](#question-page) This page type allows to ask relevant questions and gather data for personalized product recommendations. Within the question editor, select different question types to enhance question visualization and content (such as single select, multi-select, slider or checkbox). [**Loading Page:**](#loading-page) A transitional page that appears while data is being processed or recommendations on the results page is loading. [**Results Page:**](#results-page) The final page where product recommendations are displayed to users based on their answers, including optional complementary product information to help a users understanding of why this product is right for their needs/preferences. [**Category Results Page:**](#category-results-page) A results format that groups recommendations into category slots to help you recommend a set of products from multiple categories, like a routine based finder or a set of products that work together. **Custom Page Type:** If you have access to custom page types based on your plan, you can select one of your personalized page layouts to fit specific needs. {% hint style="info" %} If included in your plan, you can select one of your [custom page types](/technical-documentation/custom-themes-and-css). Contact your Customer Success Manager for details. {% endhint %} ### Page Key The Page Key is a unique identifier for each page within your flow. It is crucial that these keys are short, simple, and consistent across your Finder flow. Changing a page key after the Finder is live could disrupt tracking and analytics, so it’s important to consider consistency once the Finder is published. {% embed url="" %} Watch how to select and interact with your page types. {% endembed %} ## Landing Page The Landing Page serves as the starting point for the user journey. It usually includes introductory content and branding elements to orient the user. Follow the available options below to configure your Landing Page settings effectively. * **Content Fields** – Add text, images, or HTML content to welcome users to the Finder or introduce your products/services. * **Background Color/Image** – Choose a solid background color or upload an image for visual appeal. * **Different for mobile res** – Enable this toggle to set a separate background image for mobile devices. This allows you to use a smaller file size or differently cropped image that displays better on narrower screens. * **Different for Wide Screen Mode** – Enable this toggle to set a separate background image optimized for wide screen displays. This is useful when your Finder is displayed on a landing page or inline activation where the wider viewport benefits from a higher-resolution or differently cropped image. * **CSS Input Fields** – Customize the page’s appearance further with CSS for advanced styling options (e.g., adjust fonts, layout, spacing). ## Loading Page The Loading Page appears while the Finder is processing data or transitioning between pages. You can create a seamless experience for the user by providing visual cues or interactive elements. Follow the available options below to configure your Loading Page settings effectively. * **Content Fields** – Add messages to inform the user that the Finder is loading or processing their request. * **Typing Effect** – Enable a typing effect to simulate a dynamic, real-time loading process. * **Background Color/Image** – Similar to the Landing Page, you can choose a background color or image. * **CSS Input Fields** – Additional styling for the Loading Page can be customized with CSS. ## Question Page The Question Page collects user input and plays a pivotal role in the product recommendation flow. This page features various settings to control the logic behind how questions and answers are presented to users. Follow the steps below to configure your Question Page settings effectively. {% stepper %} {% step %} #### Dynamic Answers The Dynamic Answers setting enables real-time filtering of the available answers based on the product inventory. This feature ensures that only relevant answers are shown, based on the user’s journey and the available products. If no relevant products exist for a particular answer path, that answer or question will be skipped, preventing the user from continuing down an irrelevant path. * Select the Dynamic Answer field and select from the options for this question's dynamic answer function to activate real-time filtering. * **Use General Setting** – Select to use your [pre-defined overall dynamic answer logic](/how-to-guides/product-finders/setup-your-advisor#finder-settings), set up in the general Finder settings. * **Enabled** – Select to activate dynamic answers and real-time filtering. * **Disabled** – Select to deactivate dynamic answers and real-time filtering. {% endstep %} {% step %} #### Auto-Submit With the Auto-Submit functionality, a user’s selection can instantly trigger the next page. This is especially useful when your questions are straightforward or when you want a faster flow experience. Note that this is not available for all question types, such as Multi-Choice questions. {% endstep %} {% step %} #### Customize Question Pages * **Show Skip Button Toggle** – Activate the visibility of the Skip button by selecting the toggle, which allows users to bypass a question if desired. If not activated, this will not show as an option for the user. * **Continue Button Text** – Customize the text that appears on the Continue button, which leads users to the next step after answering a question (e.g., “Next” or “Submit”). * **Skip Button Text** – Customize the text that appears on the Skip button, which leads users to the next question and does not require them to select an answer. * **CSS Input Fields** – Add custom CSS to style the Question Page to match your brand’s design guidelines. This includes fonts, colors, button styles, and more. {% endstep %} {% endstepper %} ## Results Page The Results Page is the final step in your product finder journey, displaying tailored product recommendations based on the user's responses. This page plays a key role in guiding users toward purchase decisions. Follow the steps below to configure your Results Page settings effectively. {% stepper %} {% step %} #### Set the Number of Product Recommendations Define the maximum number of products to display on the Results Page. While you can specify a set number (e.g., 5), the actual number shown will depend on product availability—if only 3 relevant products match the user’s selections, only those 3 will be displayed. Products are presented in a vertical scroll format. {% endstep %} {% step %} #### Customize Results Page Content Tailor the content on the Results Page to align with your brand's messaging. You can adjust the following fields: * **Title** – Edit the main heading displayed on the results page to best describe the results or offer users a clear context, ***"Recommended for you"***. * **Alternatives Title** – Customize the title of the section where alternative recommendations are shown to users. * **Show Answer Summary** – Toggle this option to allow users to view the answers selected during the question flow. When enabled, a collapsible component at the top of the page provides a quick overview of key information for easy access. * **Answer Summary Title** – Set a custom title for the answer summary section, ensuring clarity and relevance, ***"Your Selection"***. * **Benefits Section Title** – Personalize the title of the Benefits section to highlight key advantages (or disadvantages) of the products and guide users toward informed decisions. * **Best Match Badge Text** – Modify the text used for the "Best Match" badge that highlights the most relevant result for the user. The badge is located at the top left of the product image. * **Alternative Match Badge Text** – Customize the text for the "Good Match" badge to give users clearer context about the products displayed as alternatives. * **Show More Button** – Enable this toggle to display a "Show More" button at the bottom of the Results Page when the number of matching products exceeds your maximum product display setting. This allows users to load additional recommendations on demand, preventing information overload while ensuring all relevant products remain accessible. Customize the button text to match your brand voice (e.g., "View All Results," "See More Options," or "Load More Products"). * **Reopen on Back** – Enable this toggle to reopen the Results Page when a user clicks through to a product detail page (PDP) and then navigates back. Rather than returning to a closed or reset state, the Finder reopens with their results still visible — letting users continue browsing recommendations without losing their place. {% endstep %} {% step %} #### Customize Product Information Display Enhance the user experience by enabling key product details: * **Show Price** – Display the product price alongside each recommendation. * **Show Product Variants Selector** – If the product has multiple variants (e.g., sizes, colors), allow users to select their preferred variant from the results page. For example, if you have products that come in multiple colors. The visitor can select their preferred color via small thumbnail images. Make sure you have, in this example, the color property targeted to Variant level, and set up as "Defines a variant". * **Show Alternative Images** – Enable this setting to allow users to browse multiple product images directly on the Results Page. Ensure your product feed receives alternative images. * **Show Review Stars** – Display customer ratings pulled from your product data to help users make informed decisions. Ensure your product feed receives review information in numerical format. * **Show Product Description** – Activate the product description setting to include a brief description of each recommended product to provide more context, pulling directly from your product data. * **Benefits Default Open** – Enable this setting to display the product benefits section in an expanded state by default. This ensures that key selling points and unique product advantages are immediately visible to users without requiring additional clicks. {% embed url="" %} Product Variants in action, see how your users can best interact with your Product offering on the results page. {% endembed %} {% endstep %} {% step %} #### Set Up Call-to-Actions Guide users toward the next step by customizing the primary and secondary CTA buttons. Some CTA fields support accessibility and localization: * Accessibility - Use Aria labels and announcement text to improve screen reader support. * Localization - Use the Translations tab to localize CTA text and announcement text for different regions, alongside your other finder content. Configurable fields: * **Show Secondary CTA Button -** Toggle this on to display a secondary CTA button alongside the primary CTA. * **Show Secondary CTA Button for Alternatives -** Toggle this on to show the secondary CTA on alternative product recommendations as well. * **Secondary CTA Text Type -** Choose how the secondary CTA label is defined. For example, you can source it from a component value. * **Secondary CTA Component -** Select the component value used for the secondary CTA when the chosen text type requires it. * **Enable Action for Image & Title -** Toggle this on to apply the primary CTA action to clicks on the product image and product title, making navigation behaviour consistent across all clickable elements on the results card. When secondary CTA is enabled, an additional Image & Title Action dropdown appears, letting you assign either the primary or secondary action to image and title clicks. * **Primary CTA Button Text -** Define the label displayed on the primary action button (e.g., "Shop Now", "View Product"). This text can also be localized for different regions. * **Primary CTA Aria Label -** Set a descriptive label for the primary button used by assistive technologies. If left empty, the button text is used. * **Primary CTA Action -** Select the action the primary button will perform (e.g., Go to PDP via URL property). Use standard CTAs from the dropdown menu. * **Primary CTA Announcement Text -** Enter the text that will be announced by screen readers immediately before the user is navigated away. For example: "Taking you to the product page." Leave empty to disable the announcement for this button. This text can also be localized. * **Primary CTA Announcement Timeout (ms) -** Set the time in milliseconds the finder waits after triggering the announcement before navigating. This should be long enough for the screen reader to finish reading the announcement text. A default of 2000ms is pre-filled; adjust based on announcement length (roughly 100ms per character plus \~500ms buffer). During this period, the button displays a loading indicator. Use the equivalent Secondary CTA fields to configure the same label, accessibility, action, and announcement behaviour for the secondary button. {% hint style="info" %} The announcement timeout applies to all users on finders where this is configured, not only screen reader users. Since there is no browser API to detect screen reader activity, all users will experience a brief loading delay before navigation. Keep announcement text concise to minimize the delay. {% endhint %} {% hint style="warning" %} Within your finder you can choose from standard CTAs within the dropdown list. For additional customized CTA options, contact your Customer Success Manager. {% endhint %} {% endstep %} {% step %} #### Add a Recommender Component Incorporate additional product suggestions alongside the main recommendation, such as relevant accessories that complement the primary item. This feature enhances the user experience by helping customers discover more relevant products and ultimately boosts the average order value (AOV). * Select your pre-defined Recommender from the dropdown menu to integrate it into your page.

Recommenders within Product Finders, optimize your results page by blending Crobox Experiences into a seamless user journey.

{% hint style="warning" %} If you would like Recommender options to be activated within your Finder, contact your Customer Success Manager. {% endhint %} {% endstep %} {% step %} #### Customize Page Appearance Ensure the Results Page aligns with your brand or create signature styling by adjusting: * **Background Color/Image** – Select a solid background color or upload a custom image. * **Different for mobile res** – Enable this toggle to set a separate background image for mobile devices. This allows you to use a smaller file size or differently cropped image that displays better on narrower screens. * **Different for Wide Screen Mode** – Enable this toggle to set a separate background image optimized for wide screen displays. This is useful when your Finder is displayed on a landing page or inline activation where the wider viewport benefits from a higher-resolution or differently cropped image. * **CSS Input Fields** – Apply custom CSS styles to match your branding and enhance page layout/styles. {% endstep %} {% endstepper %} ### Best Practices for Results Page

Reassure Users with Product Benefits

Include clear messaging within benefits to explain why the product was recommended, based on their selections. For example, “High protein content to support muscle growth.”

Accurate Recommendations

Test your Finder’s logic to ensure users receive the most relevant results. Use Ranking and Sorting Rules to automate and refine product selection based on each user’s journey.

Product Information

Provide enough product information to help users make decisions. This includes pricing, reviews, and key product highlights.

Clear CTAs

Ensure that the CTA buttons are visible and easy to understand. Users should know exactly what action they should take next.

## Category Results Page Category Results is available from the **Page Type** dropdown in **Page Settings**. It groups recommendations into category slots, rather than a single ranked list. For example, a hair-care Finder can show shampoo, conditioner, and styling slots. An apparel Finder can show jacket, top, and shorts slots. Each category uses products that remain after your question-level filters. Each slot follows your existing Finder ranking rules. Set **Page Type** to **Category Results** to use this format. The dropdown also includes Carousel Results, Landing, Loading, Question, and the standard [Results Page](#results-page). {% hint style="warning" %} Changing an existing results page to Category Results changes the available settings. Review every section after switching. Category-specific fields do not transfer automatically. {% endhint %} {% hint style="info" %} Category slots are defined at the Finder level, not on this page. Before configuring the fields below, go to **Setup** → **Data** → **Product Grouping**. Set **Group By (First level)** to the product property that splits results into slots. For example, use Product Type or Category. Each distinct property value becomes one category slot. Select the same property for **Category Heading Property** on this page. This keeps slot headings aligned with the result grouping. Use **Product Ranking** in the same **Data** tab to control the first category slot. Add a ranking rule for each category value. Give higher points to categories that should appear first. For example, give “Product Type is equal to Shampoo” 100 points and “Product Type is equal to Conditioner” 80 points. {% endhint %} {% stepper %} {% step %} #### Set the Number of Products Shown Use **Nr. of Products Shown** to set the maximum across all category slots. Fewer products display when fewer eligible products exist. {% endstep %} {% step %} #### Customize Category Results Content * **Page Title (H3)** – The main heading on the results page. * **Show Answers Summary** – Shows a collapsible summary of selected answers. * **Answers Summary Title** – Sets the summary heading. * **Benefits Section Title (H4)** – Sets the heading above each product's benefits. * **Best Match Badge Text** / **Alternative Match Badge Text** – Labels a slot's top-ranked product and alternatives. For example, “Best Match” and “Good Match.” * **Reopen on Back** – Keeps results visible when visitors return from a product page. * **Show Category Headings** – Shows a heading above each category slot. * **Category Heading Property** – Selects the product property for each slot heading. For example, use a category or product-line property from your feed. * **Alternative Button Text** – Labels the button that reveals a slot's alternatives. * **Previous Alternative Aria Label** / **Next Alternative Aria Label** – Sets accessible labels for alternative navigation. * **Product Position Announcement** – Announces an alternative's position to screen readers. Supports `{{current}}`, `{{total}}`, and `{{title}}`. For example, `Product {{current}} of {{total}}: {{title}}`. {% endstep %} {% step %} #### Customize Product Information Display These options work like the standard [Results Page](#results-page): * **Show Price** – Includes Price, Sale Price, and Original Price Aria Labels. * **Show Product Variants Selector** – Includes Pick Variants By and Variants Title. * **Show Alternative Images** * **Show Review Stars** * **Show Product Description** – Includes Description Section Title and Description Product Property. * **Benefits Default Open** {% endstep %} {% step %} #### Set Up Call-to-Actions Primary and secondary CTA fields work like the standard [Results Page](#results-page). These include button text, Aria Label, Action, Announcement Text, and Announcement Timeout. Category Results also supports: * **Show "Add All" Button** – Shows one button for all visible products. This includes any alternatives visitors select. It excludes alternatives they do not open. * **Add All Button Text** – Sets the button label. For example, “Add All Products to Cart.” * **Add All Action** – Selects the action. For example, Add-to-cart. {% endstep %} {% step %} #### Configure Layout * **Layout** – Choose **Vertical** for stacked slots. Choose **Grid / PLP** for a responsive grid. * **Columns (Desktop / Tablet)** – Sets grid columns for desktop and tablet. Mobile always uses one column. {% endstep %} {% step %} #### Customize Page Appearance **Background Color/Image** and **CSS Input Fields** work like the standard [Results Page](#results-page). {% endstep %} {% endstepper %} ### Best Practices for Category Results Page

Keep slot count intentional

More category slots need more scrolling or a wider grid. Use only categories that help visitors choose.

Confirm your Category Heading Property early

This property groups and labels slots. Check it against your product feed before you build the page.

Test alternatives coverage

Slots with one eligible product do not show an alternatives control. Ensure your targeting rules leave choice where it matters.

Match layout to catalog size

Use Vertical for smaller slot counts or routines. Use Grid / PLP when visitors benefit from viewing many categories together.

# Question Editor This guide provides detailed instructions on configuring question structure, display, and interaction. Including content, logic and styling to optimize the user experience. ## Accessing the Question Editor After entering the Finder Editor by selecting your question from the Flow tab, you can access the Page Settings, Question Settings, and Answer Settings. To access the Question Editor settings, select your question from the top left panel within your Finder Editor. The editor is structured into three primary sections: * **Left Column:** Displays an overview of all questions and answers included within the page, and access to Page Settings. * **Preview Section:** Provides a live preview of how the question will appear on mobile and desktop to a user (default view is set to mobile). Interact with the Page dropdown to quickly navigate to other pages within your flow. * **Right Column:** Contains configurable settings for the selected question, including question type, content, and logic. ## Question Types The Question Editor enables the selection of various question types, ensuring optimal engagement and usability for different content, needs, or preference-based questions. Each type defines how users can interact with the question and provide their responses. * **Single Select:** Users can choose one option from the answer options. Suitable for straightforward selections such as product categories or preferences. * **Multi-Select:** Allows users to select multiple answers. Ideal for cases where users may want to indicate multiple relevant options (e.g., preferred features or product use cases). * **AND/OR Logic Functionality:** Enhances multi-select questions by allowing conditions based on AND/OR logic to refine selections dynamically. * **AND** will ensure that only results meeting all selected conditions are shown, narrowing down the recommendations to match multiple criteria simultaneously. * **OR** will expand the results by including any product that meets at least one of the selected conditions, offering a broader range of recommendations. * **Checkbox:** Similar to multi-select but represented with a traditional checkbox layout. * **Hidden:** Used for questions that gather information without displaying an interface element to the user. * **Slider:** Provides a range-based selection method, ideal for numeric or preference-based inputs. * **Slider Range:** Enables users to define a minimum and maximum range within a given set of values. * **Text Input:** Allows free-text responses for open-ended questions where users provide specific details, this is not connected to Product Data. ## Adding Multiple Questions Within One Page For an optimized user experience, multiple questions can be added within the same page. This helps consolidate related inquiries while maintaining a smooth navigation experience. Arrange and structure these questions in the left-hand column to ensure logical progression. To add additional questions within the page, add a new question in the left hand column by selecting the **+ Add Question button**. ## Configuring Question Settings ### **Make Question Required** * Activate the **Make Question Required** toggle to ensure users must provide an answer before continuing in the flow. This prevents incomplete responses and ensures data integrity. ### **Define Question Key** * The **Question Key** is a unique identifier for each question. It should be short, simple, and consistently structured across your Finder flow. {% hint style="warning" %} Changing a Question Key after the Finder is live may affect tracking, analytics, and personalization logic. {% endhint %} ### **Question Content and Descriptions** * **Question:** Define the primary text displayed for the question. * **Description:** Add supporting text to provide context to a user, visible under the question. * **Hints:** Add supporting text to provide instructions on how to answer, visible above the answer options. * **Answer Columns:** Choose how many answer options should be displayed per row to align with the design aesthetic and usability. * **Mobile Answer Columns:** Set how many answer options display per row on mobile devices. Typically set to 1 or 2 for better readability on narrow screens. * **Enable Wide Screen Mode:** Turn on this toggle to customize the answer layout for wider displays such as landing pages or inline activations. When enabled, reveals additional settings: * **Wide Screen Answer Columns:** Set how many answer options display per row on wide screens. For example, set to 3 to show more options at a glance. * **Wide Screen Grid Image Size:** Control the size of answer images in wide screen view (e.g., `20vw` or `20px`). {% hint style="warning" %} Wide screen settings only applies when Wide Screen Mode is also enabled in ***Setup > Design > Global settings.*** {% endhint %} ### Personalization & Conditional Logic #### **Skip Question Logic** The Skip Question field enables personalization based on user responses within previous questions. Use this feature to bypass certain questions when specific answers have been selected earlier in the flow. {% stepper %} {% step %} Select the Question Key and corresponding Answer Key(s) of a previous question to define where this question should be skipped. {% endstep %} {% endstepper %} {% embed url="" %} How to define Skip Question logic. {% endembed %} #### **Link Question to Visitor Profile** Linking a question to the Visitor Profile ensures that collected user responses influence business rules and future personalized experiences. This allows for seamless updates to filtering, ranking, and benefits while enabling tailored interactions beyond the Finder (such as Guided Journey Campaigns). {% stepper %} {% step %} **Sync Business Rules Efficiently** When a question is linked to the Visitor Profile, any updates to filtering, ranking, or benefits will automatically stay in sync, eliminating the need for manual adjustments across multiple areas. Once you link a question to a Visitor Profile, you can find the {% endstep %} {% step %} **Enable Personalized Experiences** User responses can be leveraged to create dynamic, personalized experiences beyond the Finder, ensuring more relevant engagement across different touchpoints. Use the Visitor Profile as a targeting rule to re-engage with users answer preferences within the same session. For example, if a user selected 'Hiking' as their primary activity you can run a campaign to highlight hiking products by targeting the Visitor Property linked with this answer. {% endstep %} {% endstepper %} {% embed url="" %} # Answer Editor This guide provides detailed instructions on configuring answer options within the Answer Editor. The Answer Editor allows you to configure answer options for each question in your Finder flow, ensuring accurate product recommendations and personalized user experiences. Through this editor, you can define answer content, set filtering and ranking rules, and apply product benefits that will influence the user’s final recommendations. ## Managing Answers To add or modify answers within a question, access the Answer Editor by selecting an answer in the left-hand column. You can: * Add a new answer by selecting the **+ Add Answer** button. * Duplicate an existing answer to maintain consistency while making minor modifications by selecting the three dot menu of an existing column in the left column. * Remove an existing answer by selecting the three dot menu of an existing answer in the left column. * Edit answer settings in the right-hand column. ## Configuring Answer Settings {% stepper %} {% step %} #### Answer Content and Descriptions Each answer can be customized with supporting text and additional details: * Answer Title – The primary text displayed for the answer option. * Answer Description – Additional explanatory text visible under the answer title. * Information Text – Supporting details that remain hidden behind an (i) icon, providing users with more information when needed. {% endstep %} {% step %} #### Define Answer Key The Answer Key is a unique identifier for each answer option. It should be short, simple, and consistent across the Finder flow. {% hint style="warning" %} Changing an Answer Key after the Finder is live may affect tracking, analytics, and personalization logic. {% endhint %} {% endstep %} {% step %} #### Personalization & Conditional Logic **Skip Answer Logic** The Skip Answer setting allows dynamic personalization by omitting answers based on previous user selections. This ensures that irrelevant answer choices are hidden from users, even if product data would typically include them. * Select the Question Key and Answer Key(s) that should trigger the answer to be skipped. * Use this to refine the user journey and prevent unnecessary options from appearing. {% endstep %} {% step %} #### Data Connection & Rule Setup To ensure precise product recommendations, configure answer-based filtering, ranking, and benefit settings. **Results Filtering Rules** Control which products appear based on user selections. Filtering rules define inclusion criteria to refine recommendations. * Use **Conditions** (e.g., *Product Category \[equal to] Protein Supplement*) to filter products based on attributes. * Combine multiple conditions with **Condition Groups** to further refine product selection. **Results Ranking Rules** Prioritize products dynamically based on user responses. Ranking rules assign points to products, influencing their placement in the results. * Click **Add Ranking Rule** to set ranking criteria. * Assign a **numerical weight** to products based on the selected answer. Higher points increase visibility in results. * Global ranking adjustments can also be configured in the **Setup Tab (Data)**. {% hint style="warning" %} Ensure to add a sorting rule in the **Setup Tab (Data)** to display products from highest to lowest ranking. {% endhint %} **Applying Benefits on an Answer Level** Enhance user experience by assigning benefits to specific answers. Benefits help users understand why a product suits their needs. * Select Add Benefit to define product advantages or disadvantages. * Benefits will be applied to relevant products in the results page based on the selected answer. * Similar to ranking rules, benefits can also be set at an overall level within the **Setup Tab (Data)**. {% endstep %} {% endstepper %} The Answer Editor is a crucial part of structuring your Finder flow. Ensuring answer content is well-defined, logically structured, and linked to appropriate filtering and ranking rules will enhance and provide more relevant product recommendations. # Translations Ensuring your Product Finder is accessible in multiple languages enhances user experience and broadens your reach. Our platform offers several methods to manage translations efficiently.
AI Generate TranslationsQuickly generate translations for all active languages with our AI translations feature.
Manual EditingDirectly modify translations within the Crobox app for precise control.
Export/Import via CSVDownload, review, and upload translations in bulk using CSV files.
Navigate to the translations tab to get started. You will see the page drop down menu on the left to view content per page, and the language drop down menu to the right to select a specific language. ### AI Generate Translations To expedite the translation process, use our AI driven translation generator and apply specific context for accuracy. 1. Choose the language for which you want to generate translations. You can add translation context within the prompt settings (settings icon) for more accurate results before generating translations. 2. Select “**Generate Translations**”. 3. After generation, review the translations for accuracy. {% hint style="info" %} If a translation was not accurate, use the “Regenerate Translation” button next to the specific content translation. {% endhint %} 4. Make sure to **click save** to apply them in between each language translation. {% embed url="" %} ### Manual Editing of Translations To make direct adjustments of specific content, use our easy in app translation management interface. 1. In the Translations tab, choose the language you wish to edit. 2. Edit the content directly by clicking on any text field to modify its content. Note that the default language is not editable, only the chosen language content field. 3. After editing, click Save to update the translations. {% hint style="info" %} Use manual editing for minor tweaks or when refining specific phrases. {% endhint %} ### Uploading Translations via CSV For extensive translation management, you can export and import translations via a CSV file. This method is ideal for collaborating with internal teams or external translators. 1. In the Translations tab, click on **Download CSV** in the three dot menu to obtain the current translations file. This always contains the default language base content, and your languages as additional columns. {% hint style="info" %} If you have previously generated or manually edited some translations, they will appear in the CSV file. {% endhint %} 2. **Edit the CSV File**, by opening the file in a spreadsheet editor. Input or modify translations as needed. 3. After saving your changes, return to the Translations tab. Click on **Upload CSV** and select your updated file. You will immediately see the updates in the content on this page. Once you click **Save**, those changes will be saved to your Finder. {% hint style="info" %} The first column - key - should not be changed, moved, or removed. This is essential for uploading the file once your edits are complete.\ \ If you remove a column (language) from the file and then upload the CSV file to the app, this language will not be affected. If you add a language as a new column, ensure the language code is used in the column header (i.e. it for Italian) and that language is part of an active region in your container.\ \ Ensure your file is in CSV formatting before importing the file again. {% endhint %} ### FAQ
What if I don’t see the language needed for my finder within the dropdown list? If the language is not listed within the dropdown, the region has not been set up in your container. Navigate to **Settings > Regions**, and add your missing region or alternatively add a language to an existing region.
Can I manually edit translations after they are generated? Yes! After generating translations, you can manually update any content and save changes. This allows for customization and fine-tuning of translations to better fit your brand's tone and regional context.
How can I edit the default language in the translations tab? It is not possible to edit the default language content in the translations tab. This content comes directly from the Finder editor, therefore if you have changes to make they should be adjusted within the page of the Finder.
Why can’t I see my translation edits within the live state of the finder? If you are editing a Product Finder that is live, don't forget to publish a new version so the changes can be displayed in the live environment.
# Create Activations In this article, you will find information on how to place your Product Finder on your website to allow your users to interact with it. Once your Product Finder is ready, you need to decide how users will open it on your site. Go to your Product Finder and open the **Activations** tab.
## Activations Tab ### Quick pick (which activation should I use?) * Use **JavaScript Snippet** when you want a button or banner to open the Finder on the same page. * Use **URL Parameter** when you want a shareable link (email, ads, QR, etc). * Use **Activation Ribbon** when you want a persistent entry point across targeted pages. * Use **In-line Rendering** when you want a dedicated Finder page embedded in your layout. For inspiration on where to place entry points, check [Activations: Best Practices](/how-to-guides/product-finders/activations-best-practices). ### Before you start * The **Crobox snippet** must be installed on every page where users can open the Finder. * The page must be included by **Advanced Filtering**. See [Advanced Filtering](#advanced-filtering). {% hint style="info" %} You can apply filters to all activation types via [Advanced Filtering](#advanced-filtering). {% endhint %} ## URL Parameter Use a URL parameter when you want a direct link that opens the Finder by default. Add the query parameter to the end of any URL on your website. When a user loads that URL, the Finder opens automatically. #### How to get the parameter In the Activations tab, click **URL Parameter**. A pop-up opens with the unique parameter for this Product Finder.
Example: **?running-shoe-finder=open** #### Prerequisites * The Crobox snippet is installed on the page. * The page is included by [Advanced Filtering](#advanced-filtering). #### Suggested Use Case * Use this when you drive traffic from outside your site.\ Example: marketing email, paid ad, social post, QR code. {% hint style="info" %} Avoid URL parameters for internal navigation. Use a **JavaScript Snippet** instead to open the Finder without redirects. {% endhint %} ## JavaScript Snippet Use a JavaScript snippet when you want an on-page trigger (CTA, banner, link) that opens the Finder immediately. This avoids redirects. Users can open the Finder on a PLP or PDP. #### How to get the snippet In the Activations tab, click **Javascript Snippet**. A pop-up opens with the unique snippet for this Product Finder. Implement that snippet in the element that should open the Finder.
#### Prerequisites * The Crobox snippet is installed on the page. * The page is included by [Advanced Filtering](#advanced-filtering). #### Suggested Use Case * Use this for banners, buttons, and other on-page elements.\ Example: “Find your perfect product” CTA on PLP or PDP. ## Activation Ribbon The Activation Ribbon is a persistent tab on the right side of the page. Users can open the Finder without leaving the current page. To configure it, click **Ribbon** in the Activations tab. This opens the Ribbon editor.
#### Ribbon setup checklist {% stepper %} {% step %} ### Configure the look Set the text, icon, and styling. {% endstep %} {% step %} ### Configure where it shows Set **Ribbon Advanced Filters** to target the right pages. {% endstep %} {% endstepper %} #### Customization options #### Ribbon Text * Text Color (hex code) * Font Size (rem or px, default is 14px) * Font Family * Font weight #### Ribbon Image You can add an icon within the tab/ribbon, which will show before the text, as shown in the screenshot below.
* Image: Upload a .svg (recommended) or .png * Image Padding: Select how much space will be around the icon. * Image Size: Select the size the icon will be displayed in (the value can be in px, rem, or % size of the image). #### Ribbon Style * Background color: Select the color of the tab (hex code). * Border radius: How rounded the tab is (default value is 5px). * Padding: This affects the spacing around the text and image. * Z-index: Controls layering vs other elements on your site #### Ribbon Animations * Wobble after 5 seconds: Draw attention after a short delay #### Ribbon Position: * Height: How tall the tab is (default value is 40px) * Top: Vertical position. Example: 20% means 20% from the top (default value is 50%). #### Auto-hide Auto-hide keeps the ribbon accessible without obstructing page content. It hides the ribbon while users scroll down and shows it again when they scroll up. * **Auto-hide on scroll:** Enable or disable this behavior. * **Hide on:** Choose **Always**, **Below breakpoint**, or **Above breakpoint**. * **Breakpoint (px):** Set the screen width used by the **Below breakpoint** and **Above breakpoint** options. * **Scroll threshold (px):** Set how far users must scroll before the ribbon hides or reappears. #### Custom CSS Add CSS snippets to customize the ribbon further. These CSS snippets only affect the ribbon. #### Translations: Translate the ribbon text into different languages. #### Ribbon Advanced Filters This is where you determine where the ribbon should show on your site (which pages, countries, etc).
* These filters operate the same way as the Advanced Filters for all activations (see the [Advanced Filtering section](#advanced-filtering) of this article). * Keep in mind that adding any filters in this section will only affect the ribbon. However, any other filters you add in Advanced Filtering will also apply. ## In-line Rendering / Landing Page Use In-line Rendering when you want to embed your Product Finder directly into a dedicated page on your website. Unlike modal-based activations, in-line rendering makes the Finder part of your page layout (ideal for creating a seamless, immersive discovery experience). #### What you need on your site Your development team needs to prepare the target page: * Create a dedicated page for your Product Finder (e.g., `/product-finder` or `/find-your-product`) * Add a placement element with a unique **CSS selector** that Crobox can target * Ensure the Crobox snippet is installed on the page {% hint style="info" %} Use a unique ID selector when possible (e.g., `#product-finder-placement`) rather than a class. This ensures Crobox targets exactly one element on your page. {% endhint %} #### Setup in Crobox {% stepper %} {% step %} ### Create the activation * Navigate to your Product Finder and open the **Activations** tab. * Click **Create activation** → **In-line Rendering**. {% endstep %} {% step %} ### Configure the target element * In the **Target** section, you'll specify where and how Crobox renders the Product Finder on your page. * **CSS Selector Target:** Enter the CSS selector for your placement element. | Selector Type | Format | Example | | ----------------- | ---------------- | --------------------------- | | ID Selector | `#element-id` | `#product-finder-placement` | | Class Selector | `.class-name` | `.finder-container` | | Combined Selector | `#parent .child` | `#maincontent .main` | * **CSS Selector Mode:** Choose how Crobox positions the Product Finder relative to your target element: | Mode | Description | Use Case | | ----------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------- | | Append Within Parent Element | Inserts the Finder as the last child inside your target element | Default choice, works with most layouts | | Prepend Within Parent Element | Inserts the Finder as the first child inside your target element | When you need the Finder above existing content within the container | | After Parent Element | Places the Finder immediately after (outside) your target element | When your container has constraints that prevent internal placement | | Before Parent Element | Places the Finder immediately before (outside) your target element | When you need the Finder above the target container | | {% endstep %} | | | {% step %} ### Configure styling The **Style** section controls the dimensions and appearance of the Product Finder container. * **Height:** The height of the Finder container. Use `auto` to let content determine height, or specify a fixed value (e.g., `600px`). * **Min Height:** The minimum height the container will maintain, regardless of content. Prevents layout shifts during loading. * **Max Width:** The maximum width of the Finder container. Use `100%` for full-width layouts or a fixed value (e.g., `1200px`) for centered designs. * **Enable dynamic height:** Toggle this option **on** to allow the Finder container to automatically adjust its height as users navigate through questions. This creates a smoother experience by preventing unnecessary scrolling or empty space. When disabled, the container maintains its initial height throughout the experience. * **Background color (optional):** Set a background color for the area behind the Finder. This is visible when Max Width is smaller than the viewport width, creating margins on either side. In most cases the field will be left empty. {% endstep %} {% step %} ### In-line Rendering Advanced Filters This is where you determine the page(s) where this in-line activation should show. * These filters operate the same way as the Advanced Filters for all activations (see the [Advanced Filtering section](#advanced-filtering) of this article). * Keep in mind that adding any filters in this section will only affect the In-line Rendering. However, any other filters you add in Advanced Filtering will also apply. * Even when using a unique CSS selector target, we still recommend targeting only the URL. {% endstep %} {% endstepper %} {% hint style="warning" %} Exclude the in-line page from your ribbon targeting. If both show on the same page, they can interact and cause unexpected behavior. {% endhint %} ## Advanced Filtering Under **Create activation**, you will see **Advanced Filtering**. These filters apply to all activation types. If a page is excluded here, **URL Parameter** and **JavaScript Snippet** will not work on that page.
You can include or exclude pages using: * Page Type * Country * Language * Page URL {% hint style="info" %} You can also set up a **Conditional** filter. This requires extractors on your site. Contact your Customer Success Manager if you want to use this. {% endhint %} # Activations: Best Practices Integrate our solution across your website to guide users at key decision points and increase visibility of your product advisor. We recommend multiple entry points to create a seamless and engaging user experience. Please see the overview of our recommended product advisor entry points, with further details below. #### Available via the Crobox platform: * [Ribbon Activation](#ribbon-activation) * [Inline Activation](#inline-activation) * [Homepage Banner Activation](#homepage-banner-activation) * [Notification Activation](#notification-activation) * [PLP Filter Banner Activation](#plp-filter-banner-activation) * [PLP Static Banner Activation](#plp-static-banner-activation) * [PLP Product Tile Activation](#plp-product-tile-activation) * [Product Search Overlay Activation](#product-search-overlay-activation) * [PDP Banner Activation](#pdp-banner-activation) #### Requires setup outside of the Crobox platform: * [Navigation Activation](#navigation-activation) * [Support Page Activation](#support-page-activation) * [Footer Activation](#footer-activation) * [Physical Activations](#physical-activations-such-as-a-qr-code-packaging-or-promotional-material) (such as a QR code, packaging or promotional material) * [Social Channels](#social-channels) * [Email Journeys / Newsletters](#email-journeys-newsletters) ### Available via the Crobox platform #### Ribbon Activation Make your advisor accessible via an activation ribbon located on the right side of the pages where it is targeted. The product advisor will slide out seamlessly over the page. [See further details](/how-to-guides/product-finders/create-activations#activation-ribbon) where this can be set up in the Activations tab of your finder, or contact your Account Manager for assistance.
#### Inline Activation Create a dedicated landing page on your website in order to utilize the inline activation. This can be useful if you want to lead users to a dedicated page from an entry point such as the navigation bar or alternative campaigns. [See further details](/how-to-guides/product-finders/create-activations#in-line-rendering) where this can be set up in the activations tab of your finder, or contact your Account Manager for assistance.
#### Homepage Banner Activation Using a homepage or a hero banner can highlight your advisor as soon as the user lands on your website. The banner itself could be altered to suit your homepage, as well as the placement. Contact your Account Manager for assistance in setting up this activation.
#### Notification Activation Make your advisor accessible by utilizing consumer behavior based triggers/notifications. This can be useful to assist customers when their decisions and journey onsite is ambiguous, since it allows for optimization through various approaches. Contact your Account Manager for assistance in setting up this activation.
#### PLP Filter Banner Activation Highlight your advisor through a banner activation, in this example it targets users who may interact with the filtering menu. It allows you to remind users of the advisor where they are looking for a narrowed down selection of products. Contact your Account Manager for assistance in setting up this activation.
#### PLP Static Banner Activation You can emphasize your product advisor through a static banner activation, targeting users who are engaging with a product listing page (PLP). This approach helps remind users of the advisor while they explore relevant product categories. Contact your Account Manager for assistance in setting up this activation.
#### PLP Product Tile Activation Promote your product advisor through a product tile activation within a product listing page (PLP). This method positions the advisor directly within the product listing area, ensuring users can easily access help when browsing different items. It’s an effective way to guide users who might need assistance in choosing the best product for their needs. Contact your Account Manager for assistance in setting up this activation.
#### Product Search Overlay Activation Enhance your product discovery experience with a search overlay activation, displayed when users interact with the search functionality. Engage users directly in their search journey, making it easier for them to navigate through your offerings and receive a tailored suggestion. Contact your Account Manager for assistance in setting up this activation.
#### PDP Banner Activation Support user experience on product detail pages by displaying a banner directly beneath the product information, where users are already engaged with the product details. This strategic location allows you to offer timely advice, exactly when users are evaluating their choices. Contact your Account Manager for assistance in setting up this activation.
### Requires setup outside of the Crobox platform #### Navigation Activation One of the most effective activations to promote your product advisor is through the top navigation, by featuring a "Product Advisor" link. This allows users to easily access the advisor from any page. Place it as a standalone item next to key categories to ensure maximum visibility and convenience. This activation involves setup on your side, however please contact your Account Manager for further assistance. #### Support Page Activation Enhance your product advisor's visibility through a support page activation by adding a "Find the Perfect Product" CTA banner or button. This will prompt users to get personalized product recommendations while browsing support articles or FAQs. For optimal impact, place it at the top of the support page or within help articles related to product selection. This activation involves setup on your side, however please contact your Account Manager for further assistance. #### Footer Activation Include a "Product Advisor" link under the "Customer Service" or "Shop" sections to help users who scroll down for additional options. For increased visibility, place it in the footer links, potentially using a bold or highlighted text to draw attention. This activation involves setup on your side, however please contact your Account Manager for further assistance. #### Physical Activations (such as a QR code, packaging or promotional material) Another effective activation we see are in physical use cases. Integrate QR codes on in-store signage, packaging, or promotional materials that lead to the online product advisor. This prompts customers to use the tool to discover the best products for their needs, leveraging the expertise you've integrated into the digital recommendation journey. This activation involves setup on your side, however please contact your Account Manager for further assistance. #### Social Channels Lead customers to your product advisor through social platforms with engaging visuals and a [direct link to the tool for quick access](/how-to-guides/product-finders/create-activations#url-parameter). Share posts or stories featuring the product advisor, and include paid social campaigns for recurring visibility. This will help build awareness of your advisor and can increase conversions from the advisor journey. #### Email Journeys / Newsletters Use your email campaigns and newsletters including a [direct link](/how-to-guides/product-finders/create-activations#url-parameter) to the product advisor, especially in communications highlighting new products, seasonal promotions, or customer education. Including a CTA banner or link in the body of the newsletter can encourage customers throughout their journey to find the best recommendation of products suited to their needs. \\ # Product Quality Assurance This guide explains how to use the Products Tab to preview results and ensure accurate product population, providing a seamless and effective QA process. The Products Tab is a dynamic, real-time interface that interacts with the Finder questions, delivering synchronized product recommendations. This tool is crucial for ensuring that the suggested products align with internal knowledge and adhere to the filtering, ranking, and sorting criteria set up in the Finder Setup. ### Features and Interactions #### Real-Time Product Population As you progress through the questions, the products dynamically update in real time with Finder selected answers. This provides an immediate view of how your selections impact the recommended products, allowing you to fine-tune settings and rules as needed. #### Question Views {% tabs %} {% tab title="Flow View" %} This text-based view allows you to interact in an expandable dropdown menus containing questions and answers. By selecting answers, the product recommendations update in synchrony. {% endtab %} {% tab title="Preview View" %} This view simulates what the end user will experience, while still updating the product recommendations in synchrony. This gives you a realistic sense of how products are populating inline with how the Finder will be presented to customers. {% endtab %} {% endtabs %} #### Active Filters The filters dynamically update as you progress through the process, showcasing the product search properties. You can click on an active filter to view associated properties at each stage, and use the dropdown to navigate directly to the catalog. This allows you to review or adjust values to prioritize certain products effectively. #### Locale Selector Adjust the locale to view products based on specific regions. This is particularly useful when stock availability varies by region. By changing the locale, you can verify that the products recommended are consistent per region. #### Settings To enhance the QA process, enable additional properties through the Manage Columns section. For instance, if using ranking points to prioritize product recommendations, toggle the Ranking Points within Manage Columns to have direct visibility during the QA process. ### How to Use the Products Tab for Quality Assurance
Review Product Population

As you answer each question, verify that the products displayed match the filtering, ranking and sorting rules you've set up. This ensures that the products presented align with your expectations and business criteria.

Adjust Filters and Rules

If any discrepancies arise or products that shouldn’t appear are shown, identify the filtering currently used and then fine-tune these within the question editor and data setup of your Finder.

Use Manage Column Settings for Insights

Enable the visibility of relevant properties to understand why certain products are prioritized. This transparency helps you troubleshoot issues and optimize the product finder experience for better results.

The Products Tab is a crucial tool for ensuring your Product Finder is functioning as intended. By leveraging this dynamic feature, you can ensure the products displayed align with your internal criteria and meet user expectations. Using these features for quality assurance ensures that the Product Finder consistently presents the best products to customers, while also establishing filtering, sorting, and ranking rules that support the long-term scalability and maintenance of your Finder. \\ # A/B Testing This guide explains how to set up and manage A/B tests for your Product Finder, allowing you to compare different versions and measure the impact of changes. ### Create a Testing Variant Follow these steps to create a new test variant for your Product Finder. {% stepper %} {% step %} **Create a New Variant** Navigate to the Tests tab in your Product Finder. Click Create Variant to start setting up your A/B test. {% endstep %} {% step %} **Name Your Variant** Enter a descriptive name for the new variant. This name will appear in your test reports. For example, if you're testing the impact of a new question about weather conditions, you might name the variant “Weather Question”. {% endstep %} {% step %} **Choose the Base Variant** Select which existing Product Finder variant you want to base your new test on. {% endstep %} {% step %} **Set the Testing Weight** Define the weights for each variant. The weight determines the allocation of sessions between variants, with higher weights receiving a larger share of traffic. For example, if one variant is weighted 3 and another is weighted 10, the first variant will receive 23% of the sessions and the second will receive 77%. {% endstep %} {% step %} **Save Your Test** After saving, you will see both variants along with the test allocation percentage of each. {% endstep %} {% endstepper %} ### Edit a Testing Variant Once your test variant is created, you can edit it just like a regular Product Finder. Here's how: {% stepper %} {% step %} **Select the Variant to Edit** In the top right corner, you'll see a dropdown showing which variant you are currently editing (accessible in the setup, flow, translations and products tab). {% endstep %} {% step %} **Edit the Variant** Make changes to the setup page, flow or translations. These changes will only affect the selected variant. {% endstep %} {% endstepper %} {% hint style="info" %} If you want to apply changes that affect the entire Finder (e.g., global settings or design), you’ll need to update each variant individually. {% endhint %} ### Key Testing Insights **Use A/B Tests for Quick Results**\ For faster insights, use a 50/50 weight split between variants. This will give each variant an equal share of sessions for quicker comparisons. **Multivariate Tests**\ These tests involve multiple variants but take longer to reach significant results due to fewer sessions per variant. **Editing Variants**\ Any edits you make will apply only to the selected variant. To apply changes that affect the entire Finder, you must update each variant individually and publish your changes as a whole in the versions tab. ### FAQ
What is A/B testing in the context of my Product Finder? A/B testing allows you to compare two or more versions of your Product Finder to evaluate the impact of specific changes. You can test different variants of your Finder to see which performs better with users.
What is the difference between A/B testing and multivariate testing? **A/B Testing —** Involves comparing two versions of your Product Finder. It's the fastest way to understand the impact of a change. **Multivariate Testing —** Involves testing multiple variants simultaneously. It takes longer to reach significant results because fewer sessions are allocated to each variant.
How do I choose the weight for each variant? The weight determines how sessions are allocated between variants. A higher weight means that variant will receive more traffic. For instance, if one variant is weighted 3 and another is weighted 10, the first variant will receive 23% of the sessions, and the second will receive 77%. For a balanced test, use a 50/50 weight split between variants.
Can I make changes to my Product Finder while a test is running? Yes, you can edit the flow, setup, or translations for each variant during the test. However, any changes you make will only apply to the selected variant. If you need to make a global change (e.g., affecting all variants), you’ll need to update each variant individually.
How do I apply global changes across variants? If you need to make a global change (e.g., a design update) that should apply to all variants, you will need to manually update each variant and publish the changes in the Versions Tab.
Can I use A/B testing to test changes on just part of my Product Finder? Yes, you can create a variant to test specific changes, such as a new question, different styling or a different flow. By using A/B testing, you can measure the impact of those changes while keeping the rest of the Finder the same.
How can I track the performance of my variants? After saving your test, you will see both variants in the Tests Tab with their respective test allocations. To track performance over time, refer to your Analytics dashboard, where you can compare key metrics for each variant by targeting the Product Finder Variant within filtering.
\\ # Publishing & Versions Manage and publish different versions of your Product Finder to ensure the best experience for your users while maintaining full control over updates and revisions.
Publish your Product FinderTo publish a version of your Finder, navigate to the Versions tab in your settings. Click the three-dot menu next to the desired version and select Publish. Before publishing, you can use the Preview in app button to review your Finder.
Create a New VersionOnce a Finder is published, any modifications automatically create a new draft version. After making your edits, return to the Versions tab, click the three-dot menu next to the latest draft, and select Publish to apply the changes.
Unpublish the Product FinderTo remove your Finder from your website, access the Versions tab, click the three-dot menu next to the currently published version, and select Unpublish. This will take it offline until you choose to republish.
Revert to a Previous VersionIf you need to revert to an earlier version, go to the Versions tab, locate the version you want to restore, click the three-dot menu, and select Publish. This will make the selected version live.
Preview a VersionTo view any past version, navigate to the Versions tab, click the three-dot menu next to the version you want to check, and select View version. This opens a read-only view. To return to an editable version, select return to latest version.
# Accessibility Product Finder follows WCAG standards and is compliant with ADA requirements, ensuring all customers can navigate and complete questionnaires using assistive technologies. ## Key features **Keyboard and screen reader support** * Full keyboard navigation with clear focus indicators * Screen readers announce progress, question context, and option selections * Alternative text for all images and interactive elements **Visual accessibility** * Sufficient color contrast ratios * ARIA labels on interactive thumbnails and controls * Progress information with percentage values for assistive technologies {% hint style="info" %} If you encounter accessibility issues or have specific requirements, please contact your Customer Success Manager. We're committed to making Product Finder experiences inclusive for all users. {% endhint %} # Campaigns Explore the details of campaign customization and learn how to effectively engage and reach your target audience. Crobox Campaigns let you deliver personalized messaging experiences that guide shoppers toward products they’ll love — at the right time, in the right place, and in the right format. Whether it’s a subtle message badge, a notification or an interactive overlay, Crobox Campaigns give you the power to turn product data into moments of discovery.
Campaign Set Up GuideHow to create, target and customize your campaigns/pages/kWH8zcetThAfVsLmigUj
Campaign CategoriesStructure your overview page by adding a campaign categoryhttps://github.com/crobox/docs/blob/main/docs/how-to-guides/dynamic-messaging/broken-reference/README.md
Campaign PerformanceHow to measure your performance tracking campaigns and leverage insights/pages/BmS5MeXLh4Sr3t9llHgZ
### ✨ What are Campaigns? **Campaigns** are customizable, data-driven experiences designed to help you: * Influence purchase decisions through on-site messaging * Target specific audiences and product segments * Test and optimize content to boost performance * Scale personalization across different touchpoints Each campaign controls what message appears, when it appears, to whom, and where on your site — all through a guided setup process in the Crobox dashboard. ### 🧠 Why use Campaigns? Campaigns are essential for delivering **guided product discovery** experiences across your e-commerce site. They help you: * Surface the right product information at key decision points * Personalize based on visitor behavior, preferences, and context * Learn what types of messaging resonate most with your customers * Reduce friction and improve conversion through timely nudges They’re especially powerful when paired with Crobox’s intelligence on product attributes, shopper psychology, and behavioral data — though you can launch standalone campaigns as well. ### 🗂 How Campaigns work Every campaign follows a step-by-step setup flow, which includes: 1. **Setup**: Define campaign name, goal, and testing settings 2. **Design**: Choose message type, style and content 3. **Targeting**: Set audience rules, timing, and conditions 4. **Locations**: Select page types and placeholders 5. **Content**: Add translations or personalize with content variants 6. **Preview & Publish**: Test and push campaigns live You can also track performance, duplicate or version existing campaigns, and optimize content based on real-time results. # Create a Campaign This guide outlines the process of setting up a Campaign using Crobox and configuring essential Campaign settings. Create Campaign To create a new Campaign, follow these steps: 1. Navigate to **Experiences → Campaigns** in the left hand navigation menu 2. Select **Create campaign** at the top right of the Campaigns overview page *** ## Setup Tab Once the campaign is created, you will be directed to the Setup tab where you will need to add the following information, and create a campaign draft: 1. **Campaign Name**: Add a title for your campaign. We recommend a brief, but descriptive title to make it easier to distinguish between campaigns down the line. 2. **Campaign Category**: (Optional) Assign the campaign to a category for organization. 3. **Campaign Description**: (Optional) Add a short note on the campaign’s goal, audience, or promotion. This is for internal organizational purposes, and will not be shown to your users. ### Performance Tracking (A/B Testing) The Crobox app allows you to easily track the performance of your campaign by setting up an A/B test. Control how you measure campaign impact with these settings: 1. **Enable Performance Tracking**: This toggle is turned on by default. If you’re not interested in tracking the performance of your campaign, and instead want all of the eligible audience to see your campaign, then you can turn this toggle off. * On = campaign is A/B tested against a control group * Off = campaign is shown to all eligible users 2. **Traffic Ratio**: You can use the Traffic Ratio slider to decide what percentage of your site’s audience will be exposed to the campaign. For quicker and more reliable results, we recommend a **50/50 split** between the users who will be exposed to the campaign (the Crobox group) and those who won’t (the Control group).
Screenshot from the Crobox app showing the Setup tab settings.

Performance tracking enablement.

### Advanced Settings (optional) #### Campaign Priority Campaign Priority has two main uses. **Lower numerical values = higher priority** (Priority 100 displays before Priority 200). Use 1: When Multiple Campaigns Compete When you have multiple campaigns that could show to the same user or on the same page, priority determines which one wins. Simple priority guide: * Lower numbers show first (1 beats 100, 100 beats 200) * Use gaps between numbers (100, 200, 300) so you can easily add campaigns in between later * Example: * You have a "Flash Sale" and "Free Shipping" campaign both targeting jackets. * Set Flash Sale to Priority 100 and Free Shipping to Priority 200. Users will see the Flash Sale message. {% hint style="info" %} **Easier Method:** Drag and drop campaigns in the Campaigns overview page to set priority visually. Activate with the toggle "Adjust campaign prioritization". Only use the numerical field here if you need precise control. {% endhint %} Use 2: Advanced Testing Setup Align priority across linked campaigns to run A/B testing or A/B/C testing with a control group. Link two or more campaigns and set their priorities to control which variations users see. {% hint style="success" %} For more in depth information on how you can best use the Crobox Campaign testing capabilities, find the concepts use cases within our [**Testing**](/how-to-guides/dynamic-messaging/testing) page. {% endhint %} **Link Campaign Performance** Enable **Link this campaign performance to other campaigns** for [advanced testing](/how-to-guides/dynamic-messaging/testing) scenarios like A/B/C testing with shared control groups. #### When to Use Linking * Test multiple campaign variations against a single control group * Coordinate related campaigns to work together * Run advanced attribution across connected campaigns {% hint style="warning" %} When campaigns are linked, priority settings become critical as the system shows the highest-priority campaign among the linked set. {% endhint %} Once you are happy with your settings, click **Create Campaign Draft** to save your work and continue with the next step. *** ## Design Tab In this step, you define the **look and format** of your campaign. Additionally, this is where you will be able to add the content of your campaign. To do so, follow these steps: 1. Select a **Campaign Type** from the following format options: 1. **Message Badging** **-** Short, text-based nudges usually in message badge format 2. **Image Badging -** Visual icons or images 3. **Notifications -** Longer copy with emphasis 4. **Interactive Overlay -** Dynamic components like timers or sliders {% hint style="info" %} Can’t select a type? Contact your Customer Success Manager to enable it. {% endhint %}
Screenshot from the Crobox app showing the different Campaign Types available.
2. Once you select a Campaign type, click on **Save & Next Step**. 3. Select a **Template** from the **Template Gallery**. 1. Templates are based of your containers available Components, that are made to suit your brand, content and campaign types. 2. Depending on the template’s setup, you will be able to customize it in the next step. 3. Alternatively, you can select a template you previously customized in the **Saved Designs** section of the page. 4. Define your campaign’s **Content**. 1. This could include, a headline, subtext, image, CTA, or other elements depending on template. 2. Add links or visuals as needed for your campaign goals. 3. This will be the content shown live on your website. 5. Customize the **Design** of your template. 1. Depending on the setup of the selected template, you will have different options to customize on the right side panel. 6. To save your work and proceed, click **Save & Next Step**. {% hint style="warning" %} Templates can be built and edited within the Components section of the app. For additional assistance, contact your Customer Success Manager. {% endhint %}
Screenshot from the Crobox app showing the Content and design customization settings.
*** ## Targeting Tab Targeting ensures that each campaign reaches the **right users**, at the **right moment**, in the **right context**. This guide walks you through how to apply rules and filters to control when and where your campaign is shown. ### Targeting Crobox supports both **simple** and **advanced** targeting logic. Use them alone or in combination for flexible control. #### Simple Targeting * **Product Tag**: Show the campaign only on products grouped under a tag (e.g., "On Sale", "Eco-Friendly"). See [**Product Tags**](/how-to-guides/product-data/product-tags). * **Visitor Segment**: Target defined user groups like: * Mobile users * First-time visitors * Returning customers * Users in a specific country * ***(Optional)***** Campaign Start** & **Campaign End**: Set a campaign schedule: * Define a **start date** to delay activation * Use an **end date** to automatically turn off the campaign *(Leave blank to run indefinitely.)*
Screenshot from the Crobox app showing Simple targeting settings.
#### Advanced Targeting Here, you can define criteria for specific products or visitors to be eligible for the campaign. Use this for more granular, rule-based setups. {% hint style="warning" %} Filters and conditions are only visible to users with Editor, Publisher, or Admin roles. {% endhint %} {% hint style="info" %} Need the full filter reference? See [**Advanced Targeting Filters**](/how-to-guides/dynamic-messaging/advanced-targeting-filters) for presets, filter groups, and detailed filter definitions. {% endhint %} **Conditions** Build rules using product or user attributes: * Examples: * `Product Brand` = “Nike” * `Price` > 100 * `Stock` ≠ “Out of stock” **Condition Groups** Combine multiple conditions using AND/OR logic: * Example: * Show only on `Category = Shoes` **AND** `Size Availability = 42` * Show only on `Visitor Segment = Logged in` **OR** `Visitor Segment = Member` * Show only on `Sale Flag = True` **OR** `Discount > 1`
Screenshot from the Crobox app showing Advanced targeting settings.
### Locations In the Locations section you can choose where your campaign will be displayed by selecting the pages where the campaign will be shown, as well as the exact placement by choosing a placeholder. #### 1. Select Page Types Choose the page(s) where the campaign will display: * Product Detail Page (PDP) * Product Listing Page (PLP) * Category Page * Homepage, etc. * Cart Page #### 2. Assign Placeholders Placeholders are specific locations on your website (e.g., below product title, near CTA). * For each selected page type: * Open the **Placeholder dropdown** * Choose a position from the available options
Screenshot from the Crobox app showing Location targeting settings.
{% hint style="info" %} If you'd like to use a placement that isn’t available, it can be created by our team. Please contact your Customer Success Manager for more information. {% endhint %} ### Targeting Use Cases Here are examples to help you apply targeting strategically: | Use Case | Targeting Setup | | --------------------------------------------------------------- | ----------------------------------------------- | | Show campaign to **returning users** only | Visitor Segment = Returning | | Promote **seasonal sale** for jackets | Product Category = Jackets + Sale Flag | | Highlight **low-stock urgency** | Stock Level < 5 | | Target **mobile-exclusive** offers | Visitor Segment = Mobile users | | Show badge on **brand-specific** products | Brand = “Nike” | | Reassure users who completed a Finder of their **"Best Match"** | Finder position = top 1 in Finder "Shoe Finder" | ### Guided Journey Targeting Use the **Guided Journey** framework to display Campaigns based on a visitor’s interactions with the Product Finder. This allows you to tailor messaging across key moments in the product discovery journey — from prompting new users to supporting those who’ve already received personalized recommendations. {% stepper %} {% step %} **Target users who haven’t started the Finder** Use notification style components to prompt eligible visitors to begin their guided journey at the right time. Additionally, see our in-depth guide to our [Best Practices with Activations](/how-to-guides/product-finders/activations-best-practices).\ \ \&#xNAN;*Targeting:* *Page type = PLP + URL HREF contains`/category/new`* *`/category/shoes`* {% endstep %} {% step %} **Target users who received a Product Finder recommendation** Show tailored messages to users who have already seen product recommendations within the Product Finder.\ \ \&#xNAN;*Targeting: Finder position = top 1 in Finder "Shoe Finder"* {% endstep %} {% step %} **Target based on a users specific Finder answers** Target visitors based on how a user answered a specific question/s within in a Finder. First [create a Visitor Property within the Finder by linking the question](/how-to-guides/product-finders/finder-editor/question-editor). This will enable you to target the visitor profile within Campaign targeting. You could widen the users product discovery by highlighting hiking boots, waterproof gear, or guide users tailored to that activity.\ \ \&#xNAN;*Targeting: Session visitor property "Primary Activity" equals to "Hiking".* {% endstep %} {% endstepper %} {% embed url="" %} Re-targeting users through Personalization {% endembed %} ### Tips for Effective Targeting * Start broad, then layer conditions as needed * Avoid over-narrowing — check estimated reach (shown on the right panel) * Use Preview to test before publishing * Use Content Variants to personalize messages for different targets *** ## Content Tab Settings The Content tab is where you can translate your messaging and personalize it by adding content variants which you can then test against each other. ### Translating the Campaign Content As mentioned above, you can define the content shown in your campaign in the Design tab. If you would like it to show in multiple languages based on the site’s locale, you can localize the campaign’s content like so: 1. Click on the **Language dropdown** and add a new language by clicking on the **+** next to it. 2. Either manually add the translated content or click **Generate Translations** to use AI-powered suggestions.
Screenshot from the Crobox app showing how to add a language to translate your content to.
### Personalized Content You can add multiple **Content Variants** (Messages) to a campaign when you want to test different copy variations while using the same targeting rules. To do so, follow these steps: 1. Click on **Personalize Content**. 2. In the table that will appear above the Translations section, add a new Content Variant by clicking on **Add a new message** and giving it a name.
Screenshot from the Crobox app showing content variant creation.
3. **Filters**: Apply additional filters to each content variant for further personalization. Note: If your campaign only has one variant, filters must be applied in the Targeting tab. 4. **Reach**: View the percentage of products eligible for this campaign. Click the graph to see more details. 5. **Content Tag (Optional)**: You can group Content Variants/Messages together for reporting purposes. {% hint style="info" %} Once you add a Content Variant, you will be able to localise it by selecting the variant/message you want to translate from the Content Variant dropdown that will appear, and then follow the instructions in the Translating Campaign section above. {% endhint %} ### Generate Content with AI Save time creating compelling campaign content with Crobox's AI-powered content generation. This feature helps you craft engaging, brand-consistent messaging that resonates with your audience by analyzing your campaign goals and brand context. Generate Content with AI works best for: * Creating multiple content variations quickly * Maintaining consistent brand voice across campaigns * Generating compelling copy when you're short on time or inspiration * Ensuring your messaging aligns with campaign objectives **How to generate AI content** {% stepper %} {% step %} **Access Generate Content** :sparkles: 1. Navigate to the **Content** tab of your campaign 2. Click the **Generate Content** :sparkles: button (located next to the Generate Translations button) 3. The AI Content Generation panel will open on the right side {% endstep %} {% step %} **Configure campaign information** Provide context to help the AI understand your campaign: Brand Name * Enter your brand name (auto-populated from your container settings) * This helps the AI maintain brand-appropriate tone and messaging Campaign Description * Describe your campaign's purpose, promotion, or goal * Be specific: "20% discount campaign for black sneakers with limited stock" works better than "sale campaign" * Include key details like discount percentages, target products, or seasonal context * Incorporate persuasion principles like scarcity, urgency, or social proof to guide AI tone {% endstep %} {% step %} **Select content elements to generate** In the Content Elements section: 1. **Enable/disable elements:** Use the toggle switches to choose which content fields you want AI to generate 2. **Customize labels:** Edit the field labels to provide better context for the AI * Default: "Notification Text" * Better: "Urgency message for flash sale" 3. **Field targeting:** The system automatically identifies available content fields from your selected component {% hint style="info" %} **Pro tip:** More specific labels help the AI generate more targeted content. Instead of generic labels associated with the component, use descriptive ones like "Main headline for discount offer" or "CTA button for product comparison." {% endhint %} {% endstep %} {% step %} **Generate your content** 1. Click **Generate Content** 2. Wait for the AI feature to process your request 3. The generated content will appear in the "Generated Content Preview" section {% endstep %} {% step %} **Review and customize generated content** Review each element: * Generated content appears in editable text fields * Each field shows the label you provided for context * Content is tailored to your campaign description and brand Edit as needed: * Click into any text field to make adjustments * Refine the AI suggestions to perfectly match your campaign goals * Maintain your brand voice while leveraging AI efficiency Select content to apply: * Use toggle switches to choose which generated elements to apply * You can apply some elements while keeping others unchanged * This flexibility lets you combine AI-generated content with your existing copy {% endstep %} {% step %} **Apply the generated content** 1. Click **Apply Generated Content** to add your selections to the campaign 2. The selected content will be applied to your campaign fields 3. Click **Apply & Close** to save your configuration and close the panel {% endstep %} {% endstepper %} {% hint style="success" %} **Quick tips for better AI content:** * Be specific in campaign descriptions: "Flash sale: 25% off T-shirts, limited time only" vs. "sale campaign" * Use descriptive labels: "Main promotional headline" instead of "Text Field 1" * Always review and refine generated content to match your brand voice * Generate multiple variations to test different messaging approaches * Apply AI content first, then use Generate Translations for consistent multilingual messaging {% endhint %} ## Preview & Publish in the Versions Tab Once your campaign is set up, preview it to confirm everything looks correct. You have two options: 1. Click the **Preview button** (top right – visible throughout the flow). 2. Go to the **Preview & Publish** section and click **Preview**. Once you click on any Preview button, you will be taken to a new tab where you will be able to see your campaign. To test on a specific page, paste the desired URL into the **Target URL** field. To **publish** your campaign, click on the **Publish** button in the Preview & Publish section. {% hint style="info" %} Crobox campaigns support versioning, allowing you to make changes without disrupting the live campaign. Once you update a live campaign, a new version will be created. To publish a newer version (you can identify this by looking for a version with the Draft status), click the three-dot menu next to it and select Publish. {% endhint %} # Advanced Targeting Filters Reference guide to the available advanced targeting filters, presets, and filter groups for Campaigns. ## Advanced Targeting Filters Use advanced targeting when simple targeting is not enough. It lets you target campaigns with rule-based logic across product, visitor, page, session, cart, and behavior data. Use this page as a reference while building conditions in the **Targeting** tab. For the full campaign setup flow, see [Create a Campaign](/how-to-guides/dynamic-messaging/how-to-create-a-dynamic-messaging-campaign). ### Before you start * Choose a filter * Choose an operator * Enter the value * Combine conditions into groups when needed * Check estimated reach and preview before publishing {% hint style="warning" %} Filters are only visible to users with **Editor**, **Publisher**, or **Admin** roles. {% endhint %} ### Presets Presets apply a common filter setup in one click. You can edit them after applying. | Label | What it does | Pre-configured as | | ------------------------- | ---------------------------------------------- | -------------------------------------------------------------------- | | Most Popular Products | Top 30% most viewed products per category | Product Popularity Rank ≤ 30%, per category, views, last 30 days | | Bestsellers | Top 15% most sold products per category | Product Popularity Rank ≤ 15%, per category, sold, last 30 days | | New Products | Products added within the last 14 days | Product Lifespan ≤ 14 days | | Sale Products | Products with at least 15% discount | Product Discount ≥ 15% | | Out-of-Stock Products | Products currently unavailable or on pre-order | Product property `availability` equals `out_of_stock` or `pre_order` | | Free Shipping Cart Filter | Cart total in a mid-range threshold | Cart Value between 30 and 70 | ### Filter groups #### Cart | Filter | Description | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | Any Cart Product | Whether the cart contains a product matching an optional sub-filter. Sub-filter options come from the Product and Product Engagement groups. | | Total Cart Products | Number of products in the cart. Configurable per all products or per unique product. Default operator: ≥ | | Total Cart Value | Total monetary value of the cart. Always includes a product sub-filter. Default operator: ≥ | #### Client (Behavioral Targeting) | Filter | Description | | --------------------- | --------------------------------------------------------------------------------------------- | | Client Element Exists | Checks whether a specific DOM element or CSS selector is present on the page at trigger time. | | Client Idle Time | Seconds the visitor has been idle. Default operator: ≥ | | Client Time On Page | Seconds the visitor has spent on the current page. Default operator: ≥ | | Client Viewport | The visitor's viewport size or breakpoint at trigger time. | #### General These filters are available for campaign targeting only. | Filter | Description | | ------------------ | ---------------------------------------------------------------------------------------------------------------- | | Time Period | Restricts the campaign to a specific date and time window. | | Recurring Schedule | A cron expression defining when a countdown timer starts and stops. Times are based on the visitor's local time. | #### Page | Filter | Description | | ------------- | -------------------------------------------------------------------------------------------------------------------------- | | Page Type | The type of page the visitor is currently on, such as PDP or PLP. Options come from the container's configured view types. | | Page Url Href | Full URL of the current page. | | Page Url Host | Hostname of the current page URL. | | Page Url Path | Path portion of the current page URL. | #### Product | Filter | Description | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | Parent ID | The parent or group product ID. Useful for targeting variant groups. | | Product | Any custom product property from your feed. Available operators depend on the value type. | | Product Country | Country associated with the product in the feed. | | Product Created | Date the product was first created. | | Product Discount | Absolute discount amount on the product. | | Product Discount Percentage | Discount expressed as a percentage. | | Product Finder Position | Position of the product in a specific Product Finder's results. Select a finder and operator such as top N or between N and M. | | Product ID | The product's unique identifier. | | Product Imported | Date the product was first imported into the feed. | | Product Language | Language associated with the product in the feed. | | Product Lifespan | Number of days since the product was first seen. Default operator: ≤ | | Product Tag | Membership in a saved product tag. The dropdown shows tag names with estimated product counts. | | Product Updated | Date the product was last updated in the feed. | #### Product Engagement | Filter | Description | | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | Product Interactions | Number of times a product was interacted with. Configure the interaction type, time window, and whether to count all events or per unique visitor. | | Product Popularity Rank | Relative popularity rank of a product. Configure rank type, interaction type, scope, time window, and counting method. | #### Referrer | Filter | Description | | --------------- | ----------------------------------------------------------------------- | | Referrer Medium | The medium of the traffic source, such as `email`, `cpc`, or `organic`. | | Referrer Source | The source of the traffic, such as `google` or `newsletter`. | #### Region | Filter | Description | | --------------- | ---------------------------------------------------------------------- | | Region Country | The visitor's country as configured in the container's active regions. | | Region Currency | The visitor's active currency context. | | Region Language | The visitor's active language context. | #### Session | Filter | Description | | ----------------- | -------------------------------------------------------------------------------- | | Entry URL Href | Full URL of the page the visitor entered the site on during this session. | | Entry URL Host | Hostname of the session entry URL. | | Entry URL Path | Path of the session entry URL. | | Session Property | Any custom session-level property. Available operators depend on the value type. | | Session Returning | Whether the visitor has visited before. Default value is `true`. | #### Visitor | Filter | Description | | --------------------- | ---------------------------------------------------------- | | Device Type | The visitor's device category: Mobile, Tablet, or Desktop. | | IP Address | The visitor's IP address. Campaign targeting only. | | Visitor Geo City | Visitor's city from geo-lookup. | | Visitor Geo Continent | Visitor's continent from geo-lookup. | | Visitor Geo Country | Visitor's country from geo-lookup using ISO code. | | Visitor Geo Region | Visitor's region or state from geo-lookup using ISO code. | | Visitor Platform | Platform the visitor is on: Web, iOS, or Android. | | Visitor Segment | Membership in a saved visitor segment. | ### Common examples * Show only discounted shoes: * `Category = Shoes` AND `Product Discount Percentage >= 15` * Show a message to returning mobile visitors: * `Device Type = Mobile` AND `Session Returning = true` * Show a cart message when the threshold is close: * `Total Cart Value between 30 and 70` * Highlight top-performing products: * `Product Popularity Rank <= 30%` {% hint style="info" %} If you only need broad rules like page type, visitor segment, schedule, or product tags, start with the simpler controls in [Create a Campaign](/how-to-guides/dynamic-messaging/how-to-create-a-dynamic-messaging-campaign). {% endhint %} # Testing Learn how to test Crobox Campaigns using control groups, linked campaigns, and persuasion-based content variants to optimize campaign performance and messaging effectiveness. Crobox gives you multiple ways to test your campaigns — from A/B testing with control groups to testing different messages based on persuasion principles. This guide explains the available testing options, when to use them, and how to set them up step by step. #### Why Test Campaigns? Testing allows you to: * **Prove campaign effectiveness** before scaling * **Compare messaging approaches** using persuasion tactics * **Optimize continuously** based on real-world performance and your audience You can implement testing at three levels in Crobox Campaign set up, find the details below. *** ## A/B Test with a Control Group **📍Where to set up**: `Setup` tab → “Performance Tracking” section #### What It Does Splits your traffic into: * **Crobox group**: Sees your campaign * **Control group**: Sees no campaign This helps you measure the **true impact** of a campaign by comparing exposed vs. non-exposed users. #### How to Set It Up 1. Go to your campaign’s **Setup** tab 2. Ensure **“Enable Performance Tracking”** is turned ON 3. Adjust the **Traffic Ratio** slider (e.g., 50% exposed, 50% control) 4. Save the campaign draft {% hint style="success" %} Best for validating whether your campaign is having a meaningful impact vs. showing nothing at all {% endhint %} *** ## Linked Campaign Testing (Advanced Settings) For advanced testing setup, you can compare two or more campaigns directly by linking them and aligning their priority. This method supports both standard A/B testing as well as A/B/C testing with a control group. **📍Where to set up**: `Set up` tab → “Advanced” ### **Option 1: A/B Test Without a Control Group** ***Linked Campaigns, Performance Tracking Off*** You can run a head-to-head comparison between two (or more) campaigns in the same placeholder without using a control group. To Implement: 1. Turn off Performance Tracking in each campaign’s Setup tab 2. Set both campaigns to the same Campaign Priority (copy Campaign A priority and paste into Campaign B within the advanced section) 3. Activate the toggle for "**Link this campaign performance to other campaigns**", and select the campaign/s 4. Ensure campaigns target the same placeholder 5. When published, users will see either Campaign A or Campaign B based on Crobox’s internal rotation logic {% hint style="warning" %} This method doesn't show you a true control group baseline — it only compares the two active campaigns {% endhint %} {% hint style="danger" %} Campaigns must target the same placeholder, and have the same priority set in advanced settings {% endhint %} ### **Option 2: A/B/C Test With a Control Group** ***Linked Campaigns, Performance Tracking On*** This setup lets you compare: * Campaign A * Campaign B (linked to A) * A control group with no campaign To implement: 1. Turn on Performance Tracking in both campaigns 2. Set both campaigns to the same Campaign Priority (copy Campaign A priority and paste into Campaign B within the advanced section) 3. In Campaign A, activate toggle **“Link this campaign to another for performance tracking”** and select Campaign B 4. Ensure campaigns target the same placeholder 5. When published, users will see either Campaign A, Campaign B or no campaign based on Crobox’s internal rotation logic With this setup: * Users are randomly split into three groups: one sees Campaign A, one sees Campaign B, and one sees nothing (control) * Results will include clear control group data for performance benchmarking *** ## Testing Content Variants with Persuasion Messaging **📍Where to set up**: `Content` tab → “Personalize Content” #### What It Does Test **multiple message variations** within the same campaign. Ideal for experimenting with **persuasion tactics** like urgency, social proof, scarcity, or authority. #### How to Set It Up 1. Go to your campaign’s **Content** tab 2. Click **“Personalize Content”** 3. Click **Add a new message** 4. Give each variant a clear name (e.g., “Urgency - Low Stock”, “Social Proof - Best Seller”) 5. Add your content for each message 6. *(Optional)* Apply filters to target specific segments for each meassage 7. Localize each variant as needed 8. *(Optional but recommended in pilot phase)* Make sure **Performance Tracking** is enabled in the Setup tab to measure impact #### Example Persuasion Principle Variants | Persuasion Principle | Example Message | Filters Applied | | -------------------- | ------------------------------------------------------------------ | --------------------------------------- | | **Urgency** | “Hurry! Only a few left in stock” | Stock < 1 | | **Social Proof** | “Trending” | Top 30% bought - last month (/category) | | **Scarcity** | “Limited Edition – While Supplies Last” | Product ID / Product Tag | | **Scarcity** | "Members receive an extra 15% off!" | Visitor Segment | | **Authority** | “Expert-recommended pick” | Product ID / Product Tag | | **Luxury trait** | "Iconic" | Product ID / Product Tag | | **Reasons Why** | "100% secure payments with: Visa, MasterCard, PayPal, XXX" | Page Type | | **Endowment Effect** | "Almost there! You're just clicks away from owning your new gear!" | Page Type | {% hint style="info" %} Use Content Tags to group variants for better reporting across campaigns. {% endhint %} #### Why Use This * Fastest way to experiment without duplicating campaigns * Clear analytics for each message * Ideal for **iterating on messaging** based on shopper psychology *** ## Choosing the Right Test Method | Goal | Method | Setup Area | | ------------------------------------------ | ------------------------ | ---------------- | | Test campaign vs. no campaign | A/B with Control Group | Setup tab | | Compare two campaign strategies or formats | Linked Campaign A/B Test | Setup (Advanced) | | Test copy, messages, persuasion tactics | Content Variants | Content tab | ### Best Practices for Testing * Use **50/50 traffic splits** for faster results * **Test one variable at a time** (message, design, or placement) * Let tests run long enough to be reliable (depending on traffic) * Review results in **Analytics** and iterate * Tag variants clearly for cleaner reporting # Campaign Management Organize campaigns with categories, manage priorities, and understand automated lifecycle processes. Keep your campaign overview clean and strategically organized. ## Campaign Categories Organize your campaigns into logical groups that make sense for your team and business processes. Campaign categories help you group campaigns, providing a structured way to manage and organize your campaign overview, making it easier to manage diverse campaign ranges. #### Why use campaign categories Campaign categories provide several key benefits for your campaign management:
Improved organizationGroup related campaigns for easier navigation and oversight
Enhanced collaborationTeam members can quickly locate campaigns relevant to their projects
Strategic oversightClear visibility into different campaign types and initiatives
Categories work particularly well for organizing different campaign styles, such as: * Seasonal events like Black Friday sales, Christmas, Mother's or Father's Day gifting * Always-on campaigns * Badging or highlight overlay campaigns * Sustainability awareness campaigns * Crobox testing campaigns This categorization not only improves data organization but also provides a clear overview of the experiences running on your site, specific to your groupings. It enhances your ability to optimize how different campaigns work together, ultimately creating a stronger guided selling experience for your users. #### Creating campaign categories **Add categories from the campaign overview** 1. Go to Crobox App, navigate to **Experiences** and select **Campaigns** 2. Click on the three-dot menu (⋮) and select **Add Category above** 3. Name the category and select **Save** {% hint style="info" %} **Category naming best practices:** Use descriptive names that reflect your business structure and campaign types. This makes it easier for team members to understand campaign organization at a glance. {% endhint %} #### Managing existing campaigns in categories After additional campaign categories are created, you can move campaigns to specific categories: 1. Navigate to your **Campaigns** overview 2. Select the checkbox next to one or more campaigns you want to move 3. Choose **Move to Category** from the menu of options 4. Select the destination category ***OR*** Once you have campaign categories existing in your overview page, you can apply a category to a campaign during setup: 1. Create or select an existing campaign 2. Navigate to the **Setup** tab 3. Select the dropdown menu labeled **Category** and choose the category relevant to your campaign {% hint style="success" %} You can select multiple campaigns at once to move them to the same category, making bulk organization quick and efficient. {% endhint %} #### Category management options Each category section provides quick access to management functions through the three-dot menu (⋮): * **Move down** - Adjust category order in the display * **Edit category** - Rename the category * **Remove category** - Delete the category (campaigns will become uncategorized) * **Add category above** - Create a new category positioned above the current one *** ## Campaign Prioritization Control which campaigns take precedence when multiple campaigns could display on the same page. Campaign prioritization ensures your most important messaging reaches customers when it matters most. #### Understanding priority levels Campaigns are assigned priority numbers that determine display order when multiple campaigns target the same page or audience. Lower priority numbers indicate higher importance: * **Priority #1** - Highest priority, displays first when conditions are met * **Priority #2, #3, etc.** - Lower priority campaigns that display when higher priority campaigns aren't triggered #### Managing campaign prioritization **From the campaign overview:** 1. Navigate to **Experiences** > **Campaigns** 2. Toggle on **Adjust campaign prioritization** at the bottom of the page 3. Use the drag handles (⋮⋮) next to each campaign to reorder priority 4. Campaigns with lower numbers have higher priority [*See further information regarding advanced prioritization settings.*](/how-to-guides/dynamic-messaging/how-to-create-a-dynamic-messaging-campaign#campaign-priority) {% hint style="warning" %} **Priority conflicts:** When multiple campaigns have the same priority number and target the same audience, display behavior becomes unpredictable. Always assign unique priority numbers for campaigns that might overlap. {% endhint %} *** ## Automated Campaign Lifecycle Crobox automatically manages campaign lifecycles to keep your campaign overview clean and organized. Understanding these automated processes helps you plan campaign timelines and maintain system hygiene. {% hint style="warning" %} **TL;DR** * Completed campaigns are moved to > unpublished after 5 days * Unpublished campaigns are moved to > archived after 30 days {% endhint %} #### Auto-unpublishing completed campaigns When campaigns reach their scheduled end date, Crobox automatically transitions them through a managed lifecycle: **Completed → Unpublished (after 5 days)** * Campaigns that have finished running enter a "Completed" state automatically * After 5 days, these campaigns automatically move to "Unpublished" status #### Scheduled campaigns **Scheduled campaigns** are set to start automatically at a future date and time: * Campaigns with start dates in the future display as "Scheduled" * These campaigns will automatically transition to "Published" when their start time arrives * You can modify scheduled campaigns before they go live, and publish modifications to ensure these go live at the scheduled time #### Auto-archiving unpublished campaigns **Unpublished → Archived (after 30 days)** * Campaigns in unpublished status are automatically archived after 30 days * Archived campaigns remain accessible for historical reference and reporting * Archived campaigns are moved to a separate view to declutter your active campaign overview #### Managing the automated lifecycle **Accessing archived campaigns:** * Use the **Show archived campaigns** toggle at the bottom of your campaign overview * Archived campaigns retain all historical data and performance metrics * You can reactivate archived campaigns by making changes to the campaign and saving, or duplicating an archived campaign to re-use settings {% hint style="info" %} **Timeline planning:** Factor in the 35-day total lifecycle (5 days to unpublish + 30 days to archive) when planning campaign follow-ups or similar initiatives. This ensures you have adequate time for campaign management and strategic planning. {% endhint %} #### Lifecycle status indicators Each campaign displays its current lifecycle status: * **🟢 Published** - Campaign is live and running * **🟡 Pending changes** - Campaign has unpublished modifications * **⚪️ Draft** - Campaign is created but not yet published * **🟣 Scheduled** - Campaign is set to start at a future date * **🔵 Completed** - Campaign has finished its scheduled run and stopped automatically * **🟠 Unpublished** - Campaign has been manually stopped or is in the auto-archive queue * **⚪️ Archived** - Campaign has been automatically or manually archived *** ## FAQs
Can I prevent campaigns from being automatically archived? Yes, you can manually change a campaign's status from "Unpublished" back to "Published" or "Draft" before the 30-day archive timer completes.
Can I modify a scheduled campaign before it starts? Yes, scheduled campaigns can be edited until their start time arrives. Once published, you'll need to make changes through the campaign editor.
What's the difference between Completed and Unpublished status? Completed campaigns finished automatically based on their end date, while Unpublished campaigns were manually stopped or are in the auto-archive queue. Both follow the same 30-day path to archiving.
How do I restore an archived campaign? Navigate to your campaign overview, enable "Show archived campaigns," find your campaign, and start editing it and save changes to come back to an active status. You can also duplicate an archived campaign to reuse previous campaign settings.
Can I delete campaigns permanently? Crobox retains any published campaigns for historical data and compliance purposes. The archive system provides organization while preserving valuable performance insights. However, you can remove campaigns that are in draft status by clicking the three-dot menu on any campaign > Remove.
What happens to campaign performance data when campaigns are archived? All performance metrics and historical data remain fully accessible via the Analytics Dashboards. Archived status only affects campaign visibility in your active campaign management overview.
How many campaigns can I have in a single category? There's no limit to campaigns per category. However, for optimal organization, consider creating subcategories if any single category grows beyond 20-30 campaigns.
# Campaign Performance The Campaign Performance section of the app provides insights into your campaigns and allows you to find specific performance metrics related to your campaigns. To start, go to **Experiences → Campaign Performance**. All tracked campaigns will appear within the overview page. Select a campaign to see performance details. Your campaign overview will appear with listed details about your campaign setup such as where the campaign appeared to shoppers, the metrics measured, defined visitor segments that were targeted and your campaign description (if configured in the campaign setup). ## Adjusting campaign filters Within the top header, there are options to adjust filtering to see specific data related to your campaign. * **Date range:** Click the date button to adjust the time period you want to review the campaign performance. By default, it is set to the previous 30 days. * **Metric:** Click the metric button and select the desired data metric you want to review the campaign performance of. Each campaign will have different metrics depending on the campaign setup and configuration. For example, you will see metrics such as: * **Click-through Rate:** The percentage of people who clicked on your campaign after viewing it. * **Conversion Rate:** The percentage of users who completed a desired action after engaging with your campaign. * **Basket-to-Detail Rate:** The percentage of users who added a product to their cart after viewing its details in your campaign. * **Average Order Value:** The total revenue generated divided by the number of transactions (KPI). * **Average Session Value:** The total revenue generated divided by the number of sessions (KPI). {% hint style="info" %} Please contact your Account Manager for more details on custom metrics. {% endhint %} * **Show Control Data:** If the show control data toggle is activated by clicking the toggle, control data will appear as a comparison to your campaign performance data. This can be used if your campaign is running A/B testing and you want to view the control group data side by side with your campaign performance. * **Filter:** Adjust the data you want to view with conditional filtering. Similar to the business rules you create for your campaign, you can add filters to show you specific data related to your campaign. For example: * Adding a filter where Page type contains PLP → this filter will show you data only from where the campaign was available to users on the product listing page (PLP). ## Understanding your data: Campaign Performance Below is a description of each data measure related to your campaign: **Trials:** The amount of time the campaign has been made visible to website visitors (a badge, banner, highlight, etc.). **Successes:** Successes indicate how many times the campaign has been interacted with. This metric is dependent on your KPI. For example, if someone clicks on a product with a badge on the Product Listing Page, this will be counted as a success for CTR (click-through rate). **Sessions:** The amount of times a visitor has been exposed to the campaign (KPI). **Metric:** This will change as you select which metric you wish to see, and can be adjusted at the top of the page. **Relative Impact:** This indicates the increase or decrease (as a percentage) relevant to the metric selected. This means that the difference between 1.99 and 2.28 is an uplift of 14.49%. **Data Confidence:** Data confidence indicates the trustworthiness of the data in regards to the campaign. Green, orange and red bars indicate the overall health of the data and if hovered over, the percentage value will appear. Please see our [article on data confidence](/how-to-guides/analytics/data-confidence) for further details. {% hint style="info" %} Generally, the more data that is collected, the more confident the data will be. It is good to note that if you are reviewing the performance of a campaign with a smaller date period then the data confidence will most likely appear low. If you increase the date period to the whole campaign length (for example), you will most likely see the data confidence grow as it takes into consideration the data from a longer period of time. {% endhint %} For an analytic chart view within this data table, please select the icons at the top right to see various metrics and select your desired secondary dimension, or chart series and chart interval to view the relative data. ## Understanding your data: Message Group Performance This section of data indicates individual subsets of your campaign messaging. If you created different message groups with altering targeting/filtering rules within your campaign setup, this is where you will find the specific analytics for each group. Please refer to the [data measure descriptions](#understanding-your-data-campaign-performance) above to assist in reading your message group performance. For an analytic chart view within this data table, please select the icons at the top right to see various metrics and select your desired secondary dimension, or chart series and chart interval to view the relative data. ## Understanding your data: Message Performance This section of data indicates individual message subsets of your campaign. If you created different messages with altering copy and targeting/filtering rules within your campaign setup, this is where you will find the specific analytics for each individual messaging. Please refer to the [data measure descriptions](#understanding-your-data-campaign-performance) above to assist in reading your message group performance. {% hint style="info" %} This is helpful to analyze behavioural patterns among users and impacts in the data. For example, if testing different copy within your campaign messaging, you will be able to see the impact in performance on your different campaign subsets. {% endhint %} For an analytic chart view within this data table, please select the icons at the top right to see various metrics and select your desired secondary dimension, or chart series and chart interval to view the relative data. \ \\ \\ \\ # Accessibility Campaign experiences are built with accessibility considerations to ensure all users can interact with your messaging and promotional content, regardless of their abilities or assistive technologies. ### Accessibility in Crobox campaigns Crobox provides a flexible approach to campaign accessibility through configurable components and ARIA attributes. You have control over accessibility settings through a two-level system: technical teams configure accessibility defaults and exposure settings in Component Builder, while campaign editors customize specific attributes during campaign setup. Key accessibility features include: * **Configurable ARIA roles and labels** for proper screen reader support * Overlay and Notification component types default to `dialog` role * **Alternative text configuration** for images and media * **Expose mode controls** for managing which accessibility attributes are editable per campaign *** ### How accessibility configuration works Accessibility settings are managed through a two-step process: {% stepper %} {% step %} **Component Builder setup** In the Component Builder, you configure which accessibility attributes are available to campaign editors: * **Enable expose mode**: Toggle to make accessibility settings visible and configurable * **Default values**: Set default ARIA roles where needed (Overlay and Notification component types default to `dialog` role upon creation) * **Expose specific attributes**: Choose which accessibility settings campaign editors can modify {% endstep %} {% step %} **Campaign content setup** When building individual campaigns, editors can customize the accessibility attributes you've exposed within the Component Builder: * **Exposed fields appear in Design and/or Content tab**: Configurable attributes show up as editable fields (like "Component Aria Role") * **Non-exposed fields use defaults**: Hidden attributes use the default values set in Component Builder * **Per-campaign customization**: Each campaign can have different accessibility configurations where needed {% endstep %} {% endstepper %} {% hint style="info" %} Only accessibility attributes that are "exposed" in Component Builder will appear as editable fields during campaign setup. This gives technical teams control over which settings campaign editors can modify. {% endhint %} *** ### Setting up accessibility controls #### In Component Builder 1. **Configure default accessibility**: Set appropriate ARIA roles, labels, and alternative text 2. **Enable expose mode**: Turn on exposure for attributes that campaign editors should control per campaign 3. **Choose what to expose**: Select which accessibility fields (ARIA roles, alt text, etc.) should be configurable per campaign #### In campaign setup 1. **Review exposed fields**: Check the Design/Content panel for available accessibility settings 2. **Customize as needed**: Modify ARIA roles, labels, and other exposed attributes for your specific campaign 3. **Test accessibility**: Verify that your configurations work with assistive technologies
Technical teams (Component Builder)
  • Set up default ARIA roles and accessibility structure
  • Decide which accessibility attributes campaign editors can modify
  • Ensure baseline accessibility compliance for all components
Campaign editors (Campaign setup)
  • Configure exposed accessibility attributes for specific campaigns
  • Write clear, descriptive labels and alternative text
  • Test accessibility with target audience and tools
*** ### When to contact Customer Success {% tabs %} {% tab title="Complex accessibility requirements" %} Industry-specific compliance needs or advanced ARIA configurations {% endtab %} {% tab title="Expose mode strategy" %} Deciding which accessibility attributes to make configurable vs. locked {% endtab %} {% tab title="Integration guidance" %} Connecting accessibility features with your existing tools and workflows {% endtab %} {% endtabs %} {% hint style="info" %} If you encounter accessibility issues or have specific requirements, please contact your Customer Success Manager. We're committed to making Crobox Campaigns inclusive for all users. {% endhint %} ### Best practices {% tabs %} {% tab title="Component Builder setup" %} * Use sensible defaults that work for most use cases * Only expose attributes that campaign editors need to customize * Test default configurations with assistive technologies {% endtab %} {% tab title="Campaign configuration" %} * Provide clear, descriptive ARIA labels for your specific content * Use meaningful alternative text that conveys purpose, not just description * Test keyboard navigation and screen reader compatibility {% endtab %} {% tab title="Content writing" %} * Write clear, simple copy that's easy to understand * Use descriptive headings and button text * Avoid relying on color alone to convey information {% endtab %} {% endtabs %} ### FAQs
Why don't I see accessibility fields in my campaign setup? Accessibility attributes must be "exposed" in Component Builder before they appear in campaign setup.
Can I change the default ARIA role for components? Yes, but this is configured in Component Builder, not during campaign setup. Default accessibility settings can be defined in the Component Builder.
What happens if I don't configure exposed accessibility fields? The campaign will use the default values set in Component Builder. Only modify exposed fields when your specific content requires different accessibility attributes. If using a Custom Component, the ARIA attributes may need to be manually added. Contact Support for additional assistance where needed.
# Inspiration Library # What's the difference between product attributes and behavioral nudges? ### What's the difference between product attributes and behavioral nudges? Behavioral Nudges are messages that leverage behavioral principles (or [cognitive biases](https://blog.crobox.com/article/behavioral-economics-marketing)) to drive purchase behavior. These are displayed as Dynamic Badges or Notifications but shouldn’t be confused with product attributes. Behavioral Nudges leverage subconscious biases that nudge people through their customer journey, like “Recommended” (Authority), “Staff Picked” (Authority), or “New Line” (Novelty). [Product attributes](https://blog.crobox.com/article/product-attributes-and-benefits) are, on the other hand, a product’s characteristics that make it special, unique, or different from others in the same category. Displayed as Dynamic Badges and Notifications, product attributes drive behavior by showing exactly what components your customers are looking for in your products. ### When do I use each? When planning your product badging campaigns you should always start with the end goal in mind. For example, do you want to **increase the CTR and CR** on a certain product segment in the two weeks leading up to Christmas? Or maybe you'd like to **create awareness** around your new sustainable product range? Whatever the goal, it will usually fall under one of two categories: Sell or inform. For each intent, you can leverage a certain messaging type. The results you get from these approaches will either be short-term or long-term. **Short-term strategy:** Focuses on seasonal campaigns or retail events. * Message type = **Behavioral Nudges** (e.g., "Bestseller", "Few Left", "Recommended") **Long-term strategy:** Focuses on sharing product-specific information. * Message type = **Product Attributes** (e.g., "Extra Warm", "Reflective", "Windproof") **To sum it up,** * **Behavioral Nudges** are messages that leverage behavioral principles to drive purchase behavior. * **Product Attributes** are a product’s characteristics that make it special, unique, or different from others in the same category. Displayed as Campaigns in the Crobox App, both drive behavior by showing what your customers are looking for on a **psychological level** (nudges) and **informational level** (attributes). Things like the size, color, shape, or material of your products are all things that fall under product attributes. In other words, these are the products’ features and functions. For example, I might want to buy a running shoe because I’m a runner. The product attributes of a shoe are the **rational reasons** why I choose to buy the product. Meanwhile, Behavioral Nudges may urge me to buy a product based on a subconscious desire to follow the behavior of others (Social Proof), or because the product is exclusive (Scarcity), or even because it boasts of new technologies (Innovation). **Behavioral Nudges are the impact drivers** of Campaigns. Because they are persuasive by nature, these messages are more likely to resonate with your customers on a broad level. You can also use Behavioral Nudges to get a better idea of your customer segments' psychographics. This information can be used to optimize your [psychographic segmentation](https://blog.crobox.com/article/psychographic-segmentation). **Product Attributes are insight drivers**. Because you are inherently testing more copy variations and messages, you will get deeper insights into which micro-segments respond to which messages. The trade-off for these insights, however, could be a short-term negative impact on CTR. In the bigger picture, this trade-off is worth it for those looking for unique insights, as it's just as important to learn which messages have a negative impact on behavior as it is a positive impact. This could lead to a temporary inverse effect on KPIs such as CTR and CR. With time, however, the AI will have enough data to optimize how the messages are being shown to the shopper. # What are the differences between Campaign Types? ### What are the differences between Campaign Types? When setting up a campaign in the Campaign Flow, you will have the option to choose between different campaign types. But what are the differences between these? *This is step 2 of the Campaign Flow, and what you see here depends on the step that you've chosen in step 1 and your product package. If you'd like to read more about the whole flow, check out the guide* [*here*](/how-to-guides/dynamic-messaging/how-to-create-a-dynamic-messaging-campaign)*.* #### ![](https://lh6.googleusercontent.com/s3c3sl2Rd4h_iHDCxR3ku7b47n03A8l5ciD11BsaQqjsFqzDJ76vGkaCBaTvRF95jC_Pfp6ZQXy00kJWWiBuHkBP3mBXCtO1BMim548-HSjovqGtGpIQv08nbT7QEtIkUDX_VS3-) #### Message Badging Message Badges are best used on the product listing page to decrease choice overload. The effect of these badges is further improved when they are also present on the product detail page. These “sticky” badges ensure consistency in the product message and increase credibility. Message Badges are fast-acting nudges with a short-form copy and they are tied to a product. Their aim is to make products stand out against others based on individual shopping goals. In short, you want to appeal to your customers’ automatic decision-making and nudge them through to the PDP. When they get to the PDP, shoppers generally interact more with the product. This is the place where you want to provide the most detailed, clear, and concise information. Notifications and USPs should offer this information in a way that doesn’t interrupt the product experience, and instead, serve to boost it. Key Features * Text-only * Short Messages * Product-dependent * Pages: PLP, PDP \ ![](https://lh5.googleusercontent.com/9vjGGsLD-QRwsKNmBrxfUUr6CXwJrSEpd4jyz-5YSBM9QRR4i4Up1U7BIW8Jo8e1Yy9xdopN5vm3PxaWGtXvkP63TZ8QbXlwEXuFCd0m1tahuIqnWXeBEBEYJhOE29Yxv6mnvwpF) #### Image Badging Similar to message badges, Image Badges show in association with a product, usually on PLP and/or PDP. The goal of these is also to make an individual product stand out against others. The difference is that an Image Badge can show an image/icon and text, or just an image or icon. Key Features * Image+text or Image-only * Product-dependent * Pages: PLP, PDP ![](https://s3.amazonaws.com/helpscout.net/docs/assets/5f61d6774cedfd00173b8695/images/61f0047e2130e5169468045d/file-t09ouDk88n.png) #### Notifications Notifications appear somewhere on the screen, usually a certain amount of time. When used on the PDP these are almost always product-dependent. When used on different page types, they are product-independent. Notifications are bigger than badges and can contain more information. They can contain images+text or just text and instead of being in-line, they usually appear on top of website content (sticky to the screen) in the corners of a page. Because they are on top of other content, they usually contain a close button. However it is also possible to use and apply notifications embedded into the page. These can be to inform the customer that they only have a limited time for a sale, or to call out something special about a product. ![](https://lh4.googleusercontent.com/_mdNidIC2ti51qftcRer2djE_T5p_URD_c_ytvjVxsMhEotQY-F5VLPyPDWcIkgfgVww0Awdb2fV3swR5GpAg0WjRZHWyVyi9o6kNb6G5RfKjYGNMNQx5acwGHcZ7yNqA4Q8fPKe) Key Features * Image+text or Image-only * Larger than badges * Can contain longer text, animations (appear/disappear/etc), and/or a close button * Pages: All pages (product-independent) or PDP (product dependent) #### Interactive Overlay Interactive Overlays include banners at the top or bottom of your screen, countdown timers, links, or even exit-intent pop-ups. They generally contain a lot of information and can either show immediately or show after a certain amount of time. Larger Overlays will always show a close button for the user (countdown timers would be the only interactive overlays that would potentially not have a close button). Interactive Overlays contain form fields for users to fill in, or buttons to click to see more information. They are designed to call out a particular part of the website (such as the sale page) or to get the customer to take a certain action. Key Features * Designed to not be ignored by the customer, larger than notifications and badges * Include countdown timers, other interactive banners, visual filters, email grabbers, or notifications with links. * Product-independent * Pages: All pages ![](https://s3.amazonaws.com/helpscout.net/docs/assets/5f61d6774cedfd00173b8695/images/61f004908200bc052eb8231f/file-ezhNX2S8eM.png) #### Product Stories Product Stories allow you to draw more attention to specific products by autoplaying a video that replaces the product image. Product Stories can also be used for showcasing additional product capabilities when users hover a specific product. This is a good way to utilize your product-specific video to call attention to key products. Key Features * Video that autoplays, or plays when a person is hovering over a product tile * Product Dependent * Pages: PLP, PDP ![](https://s3.amazonaws.com/helpscout.net/docs/assets/5f61d6774cedfd00173b8695/images/61f0044bd86136157d99d37a/file-eA9oCAQWp3.png) # Product Data Discover everything you need to manage your data and effortlessly set up your product catalog within Crobox.
Setting up a product feedImport and manage your product catalog with automated data synchronization/pages/85vNilySQ9dJ5mLCczSk
Manage product propertiesConfigure attributes, validation rules, and data transformations for your catalog/pages/AegAvK3teTQtRjTyHqRm
Setting up AI Enricher PropertiesAutomatically generate product attributes using AI-powered data enrichment/pages/PiFQ07W8C7ABbevCYYfg
How to create and edit a product tagOrganize and categorize products with custom tags for better discoverability/pages/Xt07THDDkjhevUcOvPiI
Adding a property categoryGroup related properties to streamline catalog organization and navigation/pages/qOONrmJOQ1UGqX8NzH7l
# Introduction to Product Data Feeds **What is a Product Data Feed?** This is how we get all of the information about our customers’ products. Having it in an automated process allows us to continuously have up-to-date information. This expands our ability to display more specific messages (based off of product scarcity for instance), and allows us to always have accurate product attribute information. **Why is a Product Data Feed needed?** * Crobox needs detailed information about a customer’s products in order to be able to: * Target messages to certain products * Have clean, accurate data with a single (or ranked) source of truth * Be able to drill down into the specifics of the data, even on a product level * All product attribute messages and almost all of our Behavioral messaging relies on a Product Feed in order to have enough information to be able to accurately display the correct message. **How can a Product Data Feed be set up?** * Crobox supports various existing formats like Google Merchant Center feed, Channable, Productsup. If a customer has such a feed available Crobox can use them as is. * There are a few options for how data can be delivered to Crobox: * Periodic fetch\* (pull mechanism) * SFTP upload (push mechanism) * Manual upload * Website scraping\*\* * The following file formats are supported: * CSV (or similar) * XML * Customers can have one or more of these options and can choose which Feed should be the source of truth and overwrite the others *\* Preferred mechanism and in most cases requires no development work from the customer side.* *\*\* Only recommended for augmenting information like product ratings that originate from the website. Not specified further in this documentation.* #### Generic feed settings These settings apply to all feeds; * Name (required): a name that describes the feed. * Active: allows for enabling / disabling the feed without deleting it. * Priority: In the case that multiple feeds are defined that are extracting the same product field (e.g., title) the feed with the lowest number will be used for that field. (Lowest priority = first preference). * Incremental: When selected all fields will be augmented instead of replaced. #### Feed types **Periodic fetch** Crobox supports fetching urls using a cron interval. This is a pull mechanism that automatically runs on a configured interval and supports various URL standards. Only 2 additional configuration settings are required: * Interval * e.g. Every night at 2:00AM, or every 4 hours during weekdays * URL * Can by either HTTP(S) or (S)FTP URL; Basic authentication is also supported **SFTP upload** Crobox exposes an SFTP service that can be used to (automatically) upload feeds. This allows customers to push the data on their preferred timing instead of having a fixed interval configured. (Note that it is preferred to set this up in an automated way that could require additional development time on the customer side.) Only 1 additional configuration setting is required: * File name pattern * A unique file name pattern is required with the name of the file that is uploaded. If the file name doesn’t match the file that is uploaded the upload is denied. This is so we can correctly identify which file should be connected to each feed. * E.g. If file pattern is set to .csv.gz , the upload will match files such as feed.csv.gz and other.csv.gz but not feed.xml **Manual upload** Manual upload can be used in the Crobox interface to upload a feed that contains data that doesn’t change often. This allows for an easy way of augmenting product data. No additional configuration settings are required. #### File formats For all file formats compression is supported and gzipped or zipped files are automatically deflated and encoding is configurable (currently UTF-8 and ISO-8859-1 are supported but more can be added on request) **CSV** Csv format should contain data in columnar format. Each row must contain a uniquely identifiable product / variant. The following configuration settings are available: * Header as first row * Instead of using index-based columns the first row of the file contains the names of the columns * Delimiter * Configures what delimiter is used for separating the values. Available are * * Comma character (,) * Tab character (\t) * Semicolon (;) * Space( ) **XML** Xml format should contain data with different levels of indentation / nesting. Crobox supports an XPath like selector mechanism to extract different field values. The following configuration settings are available: * Path * The path should contain the element names that identifies a single product in the XML feed. A commonly used format is RSS 2.0 for XML feeds; In this case taking the following example, the value of path should be rss channel item to uniquely identify a single product ``` ... ``` #### Crobox product data model The Crobox product data model is flexible and extensible so it can be easily connected with various feeds. Only the Product entity is actually required as bare-minimum with product ID as the only required field, but ideally the following fields would be included: * Product Name * Product ID * Product Image URL * Product Description * Product PDP URL * Category information (product type, gender, etc) - This should ideally include all of the categorization that will used for the Product Finder questions/answers * Stock information **Custom Properties** Crobox Data model is extensible with custom properties that a Product or Variant can define. Those fields can be of type * Boolean * Number * Date * String **Field Value Conversions on Feed imports** Crobox supports various ways to ‘clean’ the data that is provided in the feeds. This allows a flexible connection between the source and target data model. * Boolean (including trueish value configuration) * Number (including division and multiplication) * Date (including format mechanism) * String (including splitting and joining) * Regex (including support for capture groups) * Lookup Table (key-value mappings with default value for no match) # Setting up a Product Feed In this article you will find information on how to upload and manage your data feeds. ## Overview Product feeds power your Crobox product catalog. They also power targeting, filtering, and recommendations. A common setup is: * **Locale feeds** to create products per region and currency. * **Enrichment feeds** to add extra attributes across locales. ### Before you start * Make sure your **Product ID** is stable over time. * Decide which locales each feed should target. {% hint style="info" %} You may find these URLs through other platforms in use by your business. For example Google Merchant, Channable, Shopify, etc. This method is preferable within the app as it provides real time data updates, without having to manually update the data feeds. {% endhint %} ## Upload your feed {% tabs %} {% tab title="Scheduled fetch (recommended)" %} Use this when you already have a stable feed URL. Crobox will fetch it on a schedule. {% stepper %} {% step %} ### Start the import 1. Go to **Crobox App** → **Product Data** → **Feeds**. 2. Click **Import** → **Create New Feed**. 3. Paste the **Data Feed URL** and click **Next**. {% endstep %} {% step %} ### Configure the feed * **Feed Source**\ Crobox detects the file type from the URL. * **Feed Setup** * **Data Feed Name**: Use a clear name. Example: `products-nl_NL` or `enrichment-all-locales`. * **Synchronization Frequency**: Match your upstream export schedule. * **Starting at**: Pick a time after your source feed finishes updating. * **Feed File Type**: Should match the URL output. * **Advanced**\ Leave unchanged unless advised by your Account Manager. * **Source Fields** * **Target Locales**: Select where this feed should apply. {% hint style="warning" %} Selecting a **language-only** locale (for example, **German**) can only **enrich existing products**. It will **not** add new **Product IDs** to the catalog. To add new products, target a specific locale like **German - Germany - Euro** (**Language - Region - Currency**). In the feed setup, you’ll see this warning: > You have targeted locale(s) that can only be used to enrich existing products. No new product ID will be added. If that was the intention, please select a specific locale like \[Language] - \[Region] - \[Currency]. > {% endhint %} {% hint style="info" %} If the locale you need isn’t available, contact your Account Manager. {% endhint %} {% endstep %} {% endstepper %} Next: map your fields in [Product Mapping](#product-mapping). {% endtab %} {% tab title="Manual upload (CSV/XML)" %} Use this for one-off imports, testing, or feeds that rarely change. {% stepper %} {% step %} ### Upload the file 1. Go to **Crobox App** → **Product Data** → **Feeds**. 2. Click **Import**. 3. Upload or drag-and-drop the file (CSV or XML). {% endstep %} {% step %} ### Configure the feed * **Feed Source**\ Crobox detects the file type from the upload. * **Feed Setup** * **Data Feed Name**: Use a clear name you will recognize later. * **Feed File Type**: CSV or XML. * **Advanced**\ Leave unchanged unless advised by your Account Manager. * **Source Fields** * **Target Locales**: Select where this feed should apply. {% hint style="warning" %} Selecting a **language-only** locale (for example, **German**) can only **enrich existing products**. It will **not** add new **Product IDs** to the catalog. To add new products, target a specific locale like **German - Germany - Euro** (**Language - Region - Currency**). In the feed setup, you’ll see this warning: > You have targeted locale(s) that can only be used to enrich existing products. No new product ID will be added. If that was the intention, please select a specific locale like \[Language] - \[Region] - \[Currency]. > {% endhint %} {% hint style="info" %} If the locale you need isn’t available, contact your Account Manager. {% endhint %} {% endstep %} {% endstepper %} Next: map your fields in [Product Mapping](#product-mapping). {% endtab %} {% endtabs %} ## Product Mapping After import, you’ll see the incoming fields. Map them to Crobox properties. {% hint style="info" %} Crobox will often suggest mappings automatically. It uses your existing properties in **Product Data → Properties**. {% endhint %} {% hint style="warning" %} Some properties are **core system properties** and should **always** be used when mapping your feed. These are tied to Crobox catalog structure and experience logic, so avoid creating duplicate custom properties for them, for example: * **Product ID** * **Variant ID** * **Parent ID** * **Price** * **Sale price** * **URL** * **Image** Create new properties only for attributes that don’t already exist in your container. {% endhint %} Map each row by aligning the **Source field** to a **Target Property**. * **Source Fields:** * **Active:** Turn on only the fields you want to import. * **Source field:** The column name from your feed. * **Target Property:** The property in Crobox to map into. * If it doesn’t exist, type a name and click **+Add**. {% hint style="info" %} Use simple, identifiable property names. Reuse the same naming across feeds. {% endhint %} * **Target Level:** Choose where the value lives. * **Product**: one value per product. * **Variant**: values like size or color. {% hint style="info" %} A Variant target level typically identifies values like color and size. It will help to prevent duplicate products in the recommended results of a product finder, for example. {% endhint %} * **Locale Override:** Set only when a field should target a different locale. * **Preview Values:** Sample values parsed from the import. Further property settings can be optimized here by selecting the three dot menu on the right of each property row. Click **Save**, then **Run Feed to Update** to commit the changes. To edit later, open the feed again and adjust its source field mapping. {% hint style="info" %} * For additional feeds, use **Autofill** to speed up mapping. * For enrichment feeds, **All locales** is often correct. {% endhint %} ## Best practices ### Feed structure and ownership * Keep **locale feeds** responsible for adding new Product IDs. * Keep **enrichment feeds** focused on extra attributes. * If you use multiple feeds, set a clear source of truth per field. ### Product IDs, variants, and locales * Every feed needs Product IDs to be able to tie the data together in the catalog. * Put variant-specific data on **Variant** level. * Mark variant-defining properties (like color/size) consistently. * Avoid language-only locales for creating products. Use full locale selection. ### Mapping and property hygiene * Prefer mapping into existing properties. * Avoid duplicating core system properties (ID, price, stock, URL, title). * Activate only fields you plan to use in your Crobox Experiences. * Sanity-check **Preview Values** for type issues and formatting. ### Operations * Align scheduled fetch timing with your feed export timing. * Start with a small test feed if you’re changing structure. * After each run, confirm products and key attributes in the catalog. # Manage and Transform Product Properties Within this article you will find information regarding the product data section of the app and how to navigate its property settings and capabilities. Enrichment is fundamental in maximizing the functionality of your data feeds, and will allow you to address gaps in product data. This involves introducing new properties and refining existing information to make it more accessible and user-friendly.\\ Adding properties is essential for effectively mapping a feed and aligning incoming data with your system. While system properties are available, creating custom properties is often necessary to accurately match source fields. ## Adding a Property 1. Go to **Crobox App**, navigate to **Product Data** and select **Properties**. {% hint style="info" %} General properties (for example, product ID, price, stock, etc.) are automatically populated within the app. It's important to note that certain fundamental properties like Product ID, Price, Stock, URL, Title, and Availability are automatically populated and managed by the Crobox system. These 'general properties' are hardcoded for optimal app performance and should not be duplicated when creating new properties. You will be able to connect these general properties when [setting up your Product Feeds.](/how-to-guides/product-data/setting-up-a-product-feed) {% endhint %} 2. Click on **Add Property** and configure the following settings: * **Category:** Select the relevant category from the drop down menu. This is only relevant if you have [created Property Categories.](/how-to-guides/product-data/add-a-property-category) * **Property Name:** Edit the name of your Property. * **Property Key:** The Crobox app generates a relevant key corresponding to the property name when added, but you can modify this if you’d like. It should be short, simple, and unique per property. * **Value Type:** This should be selected based on the data relating to your property. See below the meaning of each type of value to decide where you should use it. The app will interpret your data and suggest the most appropriate value type (if the data is already mapped to the property). * **String:** Used for data sets that are generally represented and stored as qualitative text. * **List:** Used for an array or collection of data and to organize and manage data elements in a sequential manner. * **Boolean:** Used to represent two possible states, true or false. * **Number:** Used for data sets that are numerical data and stored as quantitative value. * **Datetime:** Used to add a timestamp in-app to relevant products. For example, adding a datetime property could be used to run campaigns to showcase new releases. * **Target Level:** Select if the property is relevant to the product or variant product. * Select the relevant toggles if applicable: * A product can have multiple values * This toggle should be activated if a property has multiple attributes connected to the property (i.e. the property features may have 'durable', 'soft-foam sole', 'waterproof' associated). * A product must have a value * This toggle can be activated to ensure a warning symbol is allocated to the product if a crucial property attribute is missing in regards to the specific property. * Lock being edited in the app * This toggle provides a crucial control for data integrity. When activated, it prevents other users from making direct edits to this property within the app, ensuring that critical product attributes remain consistent and aligned with your defined setup, especially useful after enrichment configuration by a team member. * Mark as internal * This setting is designed to prevent specific property data from being visible to external users via browser developer tools. When marked as internal, the property will only be visible and usable only within our system, ensuring sensitive information is not exposed to unauthenticated users or APIs. * Define as a variant * This toggle should be used to identify that the property defines a variant. This is needed for properties such as size or color, and not the case for Price (due to the general property setup). The benefits of this setting can assist to ensure your color variants show in your Product Finder results page, and allow the user to interact with color options within the tool. {% hint style="info" %} The Validation field can remain empty. If you would like to explore incorporating validation rules to your property, please contact your Account Manager. {% endhint %} 3. Select **Save** and the top right of the screen to save your property settings. {% hint style="info" %} You are able to view, edit and categorize your properties in the properties overview page, *Crobox App > Product Data > Properties.* Alternatively in the product catalog, *Crobox App > Product Data > Catalog*, you can view configured properties by selecting *Settings > Manage Columns* and selecting the intended property to display alongside the products. {% endhint %} ## Adding a Transformation Rule Transformation rules allow you to divide and categorize information based on various data types and conditions. Using transformation rules you can create new properties and improve existing ones, by manipulating product data coming in from your product feed. You can then use these transformed properties within Crobox experiences (Product Finder questions, Campaign filters, etc), which helps with humanizing different data points, making data accessible and aligning with consumer preferences. Transformation rules are versatile and can be used for various properties to enhance the user's guided journey through your e-commerce business. Follow these steps to create and apply transformation rules, we have used an example use case to demonstrate adding a transformation rule. **Example Use case** For instance, you can create rules for capacity properties based on household sizes, aligning with data from your feed. These rules directly correspond to inquiries within the product finder, recommending products based on consumer preferences. Background for the use case: * The company sells Coffee Machines and Blenders. * The original property ‘capacity’ will be used to create 'household capacity size' through a transformation rule. This can be viewed in the product catalog or within the properties section of the app. * Blenders have a 'capacity' property (measured in liters). * The purpose of the 'Household Capacity Size' property is: * It allows viewing the 'capacity' attribute in relation to household size. * Helps find a blender that meets the needs of different family sizes. {% hint style="info" %} This example uses a specific example to show how transformation rules can be used within the app. Transformation rules are not limited to one category and can be used for a variety of different properties to enhance the user's guided journey through your ecommerce business. {% endhint %} 1. Create a **new property**, e.g., Capacity Household Size, and select the relevant category, such as Blenders.
2. Apply the **value type** (e.g., List) and **define segmentation options** (e.g., Single/Couple, Small Family, Large Family).
3. **Save** the property settings, then navigate to the **Transformation Rules tab**. 4. Create a new **transformation rule for each segment, setting conditions and values** accordingly.
5. **Save** the transformation rules, re-index the data in the product catalog, and rerun the feeds if necessary to update the enriched properties. You can then view your updates within the product catalog and begin using your transformed property in other Crobox experiences.
# AI Enricher Properties (text-based) Transform your product data with AI-powered enrichment that automatically generates new product attributes based on existing information. AI Enricher Properties use intelligent prompts to analyze your products and create valuable new data points that enhance your catalog. ### Before you begin * Set up your product feeds and ensure data is flowing into Crobox * Create the product properties you'll use as inputs and outputs * Ensure you have properties with the "AI Enricher" value type available in your property list ## Create your AI Enricher property Navigate to **Product Data > Properties** and either create a new property or edit an existing one. 1. Set the **Value Type** to "AI Enricher" 2. Choose your **Target Level** (Product or Variant) 3. Configure basic property settings: * **Lock being edited in the app** - Prevents manual editing of AI-generated values * **Mark as internal** - Keeps the property for internal use only * Set validation rules if needed for your outputs {% hint style="success" %} AI Enricher properties can be best organized when you have clear, descriptive property names that indicate their purpose, like "AI Generated Description" or "Style Category AI." {% endhint %} ## Configure AI enrichment settings In the **AI Enrichment Settings** section, configure the property in this order: {% hint style="info" %} Set a product filter before activation. The **Enable automated background enrichment** toggle only becomes available after you define which products should be processed. This helps you validate results on a smaller subset before enriching a larger part of your catalog. {% endhint %} {% stepper %} {% step %} **Write your prompt** Create a clear, specific prompt that tells the AI exactly what you want to extract or generate. Your prompt should include clear instructions, for example: ``` Extract the following properties from the title: - the player name, never include the shirt_nr (e.g. Lionel Messi) - team (e.g. Barcelona) - league (e.g. La Liga) ``` {% hint style="success" %} **Prompt best practices:** * Use clear, actionable language * Provide specific examples * Define the expected output format * Include constraints to avoid unwanted results {% endhint %} {% endstep %} {% step %} **Configure input properties** Select the **Inputs** that the AI will analyze: * Choose properties containing the source data for enrichment * Multiple inputs can provide richer context * Common inputs include titles, descriptions, categories, or specifications {% endstep %} {% step %} **Define output properties** Select the **Outputs** where enriched data will be stored: * These properties will receive the AI-generated values * You can select multiple outputs for different extracted attributes * Output properties should already exist in your property setup {% hint style="warning" %} Make sure your output properties can accommodate the type of data the AI will generate. {% endhint %} {% endstep %} {% step %} **Set the product filter** Use **Only for these products** to define which products are eligible for enrichment. Start with a narrow subset so you can validate the generated values before scaling up: * A specific category or brand * Products missing a target attribute This filter is required. You can only activate enrichment after setting it. {% endstep %} {% step %} **Test with preview** Click **Fetch Preview Values** to test your setup on products that match your filter. Review the preview table to check: * Input data being analyzed * AI-generated output values * AI explanations showing the reasoning Refine your prompt or filter until the results look right. {% endstep %} {% step %} **Activate enrichment** Turn on **Enable automated background enrichment** after your preview looks correct. When enabled, Crobox processes only the products that match your filter during background enrichment. {% endstep %} {% endstepper %} ## Testing with preview Use the **AI Enrichment Preview** to validate your setup before activation: 1. Click **"Fetch Preview Values"** to test your prompt on sample products 2. Review the preview table to see: * Input data being analyzed * AI-generated output values * AI explanations showing the reasoning 3. Use and adjust **Add Filter** to test different product subsets 4. Refine your prompt based on preview results The preview shows up to 20 products and includes an **AI Explanation** column that reveals how the AI interpreted your prompt and source data. ## Save and monitor 1. Click **Save** to store your configuration 2. Turn on **Enable automated background enrichment** if you have not already done so 3. Monitor enrichment progress in the **Insights** tab: * View enrichment coverage statistics * See value distribution across your catalog * Check for validation errors * Track which experiences use this property The insights dashboard shows exactly how many products have been enriched and provides detailed breakdowns of the generated values. ## Review and refine

Check enrichment quality

  • Review the generated values for accuracy
  • Look for patterns in the validation errors
  • Verify that outputs match your expectations

Optimize your prompt

  • Refine instructions based on actual results
  • Add examples for edge cases you discovered
  • Adjust constraints to improve consistency

Monitor performance

Use the Insights tab within output properties to track:

  • Product Value Insights - See distribution of enriched values
  • Validation Errors - Identify data quality issues
  • Connections - Track where this property is used in experiences
## Common use cases #### :diagram-project: Product categorization Extract categories, styles, or attributes from product titles or descriptions: ``` From the product title, identify the clothing style category. Options: Casual, Formal, Athletic, Vintage, Contemporary Only return one category that best matches. ``` #### :right-left-large: Attribute extraction Pull specific product details from unstructured text: ``` Extract these details from the product description: - Material (fabric type only) - Care instructions (washing temperature) - Country of origin Format as: Material | Care | Origin ``` #### :text: Content generation Create marketing copy or enhanced descriptions: ``` Create a concise product highlight (max 15 words) that emphasizes: - Key product benefits - Unique selling points Use an engaging, sales-focused tone. ``` ## Troubleshooting #### AI outputs are inconsistent * Refine your prompt with more specific instructions and examples * Add constraints to limit possible outputs * Test with preview using different product samples #### Enrichment isn't running * Check the filter - Add or review **Only for these products** first, since activation depends on it * Check the toggle - Ensure **Enable automated background enrichment** is active * Verify filters - Make sure your product filter is not too restrictive * Review inputs - Confirm input properties contain data for your target products #### Preview shows errors * Validate prompt syntax - Ensure instructions are clear and actionable * Check input data - Verify input properties have values for preview products * Simplify outputs - Start with fewer output properties to isolate issues #### Values don't appear in experiences * Check property connections - Use the Insights tab to see where properties are used * Verify property settings - Ensure target level (Product/Variant) matches your needs * Review validation rules - Make sure generated values pass validation ## FAQs
How long does AI enrichment take to process my products? Processing time depends on your catalog size and prompt complexity. Small catalogs (under 1,000 products) typically complete within minutes, while larger catalogs may take several hours. The system processes products in batches in the background.
Can I use the same property as both input and output? While technically possible, it's not always recommended as it can cause data conflicts. Create separate properties for inputs and outputs to maintain data integrity and clear audit trails.
What happens if my prompt generates invalid data? Invalid outputs are can be caught when previewing output. You can refine your prompt and re-run enrichment to fix these issues, or "Remove enriched data" to clear existing AI-generated values if needed.
Can I stop enrichment once it's started? You can disable "Enable automated background enrichment" to prevent new products from being processed, but you can't cancel in-progress batch operations. Use "Remove enriched data" to clear existing AI-generated values if needed.
How do I know which products have been enriched? The Insights tab in the output properties shows detailed statistics including total products, value distributions, and coverage percentages. You can also filter the product catalog to show only products that have a value by targeting your output property.
What's the difference between AI Enricher and manual enrichment? AI Enricher Properties automatically generates values using prompts and existing data, while manual enrichment requires individually assigning values to products. AI Enricher scales better for large catalogs but requires careful prompt engineering for accuracy and user UAT.
### What's next * [ ] **Create Product Finder experiences** using your enriched data for better product discovery * [ ] **Set up Campaigns** that leverage AI-generated attributes for targeted messaging * [ ] **Monitor performance** through analytics to measure the impact of enriched data # AI Image Analysis Enrichment Enrich your product catalog by analyzing product images with AI-powered visual recognition that automatically extracts visual attributes like colors, patterns, styles, and materials. AI Image Analysis properties use computer vision to identify visual characteristics from product photos, creating valuable structured data that enhances your catalog and improves product discovery. #### Before you begin * Map your feed's image URL field to the system property **"image"** in your feed configuration * Create the output properties where visual attributes will be stored: * Use **String type** for complex data like color breakdowns with percentages * Use **List type** for categorical analyses (e.g., style categories) to guide the AI into pre-defined options specific to your business * Ensure image URLs are publicly accessible (HTTPS) and show clear product photos #### Understanding image analysis properties Image analysis properties work differently from text-based AI enrichment. Instead of analyzing product titles or descriptions, these properties examine actual product images to identify visual characteristics like: * **Color composition** - Primary, secondary, and accent colors with coverage percentages * **Visual style** - Design aesthetics, patterns, and style categories * **Material appearance** - Texture and material identification from visual cues * **Structural features** - Shape, silhouette, and design elements The AI analyzes each product's image individually, making this enrichment method ideal for properties that require visual context rather than text interpretation. *** ## Create your image analysis property Navigate to **Product Data > Properties** and click **Add Property** to create a new image analysis property. ### Configure basic settings 1. Enter a descriptive **Property Name** (e.g., "Color Details" or "Visual Style") 2. A **Property Key** will automatically pre-fill the field based on the name 1. Property keys should be unique, short, and identifiable (e.g., "color\_details" or "visual\_style") 3. Set the **Value Type** to **Image Analysis (AI)** 4. Choose your **Target Level**: * **Product** - For attributes consistent across all variants * **Variant** - For attributes that differ by variant (e.g., if your variants are defined by different colors, select this so the enricher can analyze each image variant individually) 5. Configure additional settings: * Turn on **Lock being edited in the app** if you want to prevent manual overrides of AI analysis * Turn on **Mark as internal** if you want to keep visual analysis data internal *** ### Configure AI enrichment settings Configure the property in this order: {% hint style="info" %} Set a product filter before activation. The **Enable automated background enrichment** toggle only becomes available after you define which products should be processed. This helps you validate results on a smaller subset before enriching a larger part of your catalog. {% endhint %} {% stepper %} {% step %} **Write your visual analysis prompt** Create a clear, specific prompt that defines what visual characteristics the AI should identify. Your prompt should include: **Essential components:** * **Property definition** - What visual attribute to identify * **Output format** - How to structure the results (e.g., color breakdown, style category) * **Visual markers** - Specific visual cues the AI should look for * **Coverage guidelines** - Percentage thresholds or prominence rules * **Constraints** - What to include or exclude from analysis **Example prompt for color analysis:** ``` Analyze the product image and identify visible colors with their coverage percentages. Format: "primary_color:percentage|secondary_color:percentage|accent_color:percentage" Instructions: - Identify all colors visible on the main product body, accents, and details - Calculate approximate percentage of total visible surface area for each color - List colors in descending order by coverage - Include only colors with ≥5% coverage - Total percentages must sum to 100% Use consistent color names: black, grey, navy, blue, green, olive, brown, tan, beige, orange, red, yellow, white, purple, multi-color Coverage patterns: - Primary: Usually 40-80% - Secondary: Usually 15-40% - Accents: Usually 5-20% Example: "navy:80|white:15|gold:5" ``` **Example prompt for style identification:** ``` Classify the product's visual style based on design elements and aesthetic. Categories: Modern, Classic, Vintage, Minimalist, Bold, Athletic, Elegant, Rustic Consider: - Overall design aesthetic - Color palette complexity - Pattern presence - Structural elements - Visual balance Return only the single most appropriate category. ``` {% hint style="warning" %} Image analysis prompts require more detail than text-based prompts. Be specific about visual markers, coverage percentages, and formatting requirements to ensure consistent results. {% endhint %} {% endstep %} {% step %} **Define inputs and outputs** **Inputs:** * Select **Image** as your input source * The system automatically uses the product's primary image URL * Ensure your product feed includes valid, accessible image URLs **Outputs:** * Select the property where visual analysis results will be stored * For complex analyses (like color breakdowns), use String type properties * For categorical analyses (like style identification), use List type properties to guide results into pre-defined categories specific to your business {% endstep %} {% step %} **Set the product filter** Use **Only for these products** to define which products are eligible for enrichment. Start with a narrow subset so you can validate the generated values before scaling up: * New products only * A specific category or brand * Products missing a target attribute This filter is required. You can only activate enrichment after setting it. {% endstep %} {% step %} **Test with preview** Validate your image analysis setup before enabling enrichment across your catalog. 1. Click **Fetch Preview Values** to analyze sample products 2. Review the preview table showing product images, titles, and AI-generated results 3. Compare results against what you see in the product images to verify accuracy Adjust **Only for these products** or use **Add Filter** to test on specific product subsets and identify how well the analysis works across different product types. {% hint style="warning" %} Be specific about visual markers, coverage percentages, and formatting requirements in your prompt to ensure consistent results. {% endhint %} {% endstep %} {% step %} **Activate enrichment** Turn on **Enable automated background enrichment** after your preview looks correct. Once enabled, Crobox automatically processes only the products that match your filter during feed imports or re-indexing. {% hint style="info" %} Image analysis runs automatically in the background after enabling. You'll see a progress indicator showing "Property is ready for being processed in the background." {% endhint %} {% endstep %} {% step %} **Save and monitor enrichment** 1. Click **Save** to store your configuration 2. Turn on **Enable automated background enrichment** if you have not already done so 3. Monitor the status indicator: **Changed** > **Active** > **Completed** Image analysis processes approximately 100-120 products per hour, so larger catalogs may take several hours to complete. {% endstep %} {% step %} **Review and refine results** After enrichment completes, check quality by navigating to **Product Data > Catalog** and reviewing your image analysis property alongside product images. If needed, refine your prompt based on any edge cases discovered, then click **Remove enriched data** and save to re-run enrichment with improved instructions. {% endstep %} {% endstepper %} *** ## Best Practices * **Prompt clarity:** Be visually specific about what to look for, not what to read. Define clear boundaries with percentage thresholds and categorical options. * **Image quality:** Use clear, well-lit product photos with neutral backgrounds. Avoid lifestyle images, multiple products, or low-resolution photos. * **Property organization:** Use descriptive names for properties and create separate properties for each distinct visual attribute. Use List type for pre-defined categories specific to your business. ### Prompt examples
Color palette extraction Extract colors and coverage percentages for accurate color-based filtering and discovery. **Prompt approach:** ``` Analyze the product and return: "primary:percentage|secondary:percentage|accent:percentage" Include only colors with ≥5% coverage; total must sum to 100%. ```
Style classification Categorize products by visual design aesthetic for style-based recommendations and curation. **Prompt approach:** ``` Classify from: Modern, Classic, Vintage, Minimalist, Bold, Athletic, Elegant Return the single best match based on design elements. ```
Pattern recognition Detect visual patterns for pattern-based filtering and trend-based merchandising. **Prompt approach:** ``` Identify dominant pattern: Solid, Striped, Plaid, Floral, Abstract, Geometric, Camo, Animal Print Return "Solid" if no pattern is visible. ```
*** ## Troubleshooting {% tabs %} {% tab title="Image analysis not processing" %} * Verify image URLs are publicly accessible (HTTPS) and in supported formats (JPG, PNG, WebP) * Add or review **Only for these products** first, since activation depends on it * Confirm **Enable automated background enrichment** is toggled on to ensure new products receive image analysis enrichment * Check that input is set to "Image" and output properties are configured {% endtab %} {% tab title="Inconsistent or inaccurate results" %} * Refine your prompt with more specific visual markers and edge case examples * Verify product images are clear and well-lit * Test with a smaller product subset first to validate approach {% endtab %} {% endtabs %} *** ## FAQs
How long does image analysis take? Image analysis processes approximately 100-120 products per hour. A 1,000-product catalog typically takes 8-10 hours.
What image formats are supported? JPG, PNG, and WebP formats via publicly accessible HTTPS URLs.
Can I combine image analysis with text-based enrichment? We recommend ensuring your output properties are unique to either the image analysis or text-based enrichment properties to ensure you can QA enrichment values with ease. Use image analysis for visual attributes and text-based enrichment for descriptive attributes.
Can I manually edit AI-generated values? Yes, unless "Lock being edited in the app" is enabled. Manual edits may be overwritten if you re-run enrichment.
How do I re-process products after updating my prompt? Click "Remove enriched data" to clear results, update your prompt, and save. Enrichment restarts automatically.
What happens if products don't have images? Products without valid image URLs will not be accurately analyzed during enrichment.
*** #### What's next * Use visual attributes in Product Finder experiences for enhanced filtering within experiences and share product highlights with users in personalized Campaigns * Complete with [AI Enricher Properties](https://docs.crobox.com/how-to-guides/product-data/ai-enricher-properties) to enrich and create comprehensive product data for your experiences * Track enrichment performance in property and refine prompts based on results # Manual Data Enrichment Learn how to manually enrich your product data by categorizing products with values in-app. The app allows you to enhance your product data by categorizing it in the catalog and linking attributes to products without needing a transformation rule. To do this, you can create a new property that isn’t listed in the data feed and complete the categorization in the enrichment tab. 1. Complete steps to [add a property](/how-to-guides/product-data/manage-and-transform-product-properties), or work with an existing property. 2. Save the property settings. 3. Navigate to the left hand side menu, **Product Data**, and select **Enrichment**. #### Within the Enrichment Tab 1. Select the property and specified value within the left panel. 2. Attach the associated product(s) with this value or values by **selecting the product checkbox** in the right panel. 3. Select **Update selected values** to save your value and product association. #### **Key Tips for Efficient Enrichment** * **Using the Right-Side Panel**\ The right-side panel acts as the catalog, allowing you to filter by various product values or use the search functionality to quickly locate and select your desired products. * **Update Selected Values Button**\ The **Update Selected Values** button offers additional options when you select the arrow: * **Clear Selected Values:** This option removes all selected attributes and with the associated product(s). * **Update and Clear Selected Values:** This clears existing selections and applies new ones in a single action. This feature helps streamline updates and ensure accuracy. * **Be Cautious of Feed Overrides**\ Enriching product data through this method can override mapped feed property settings. However, be aware that if the feed is re-indexed or if other property settings are applied, it may lead to overlaps or conflicts in the product data. # Product Tags In this article we will go over creating a Product Tag, which can be used to target a subset of products in a Campaign. ## Introduction Product Tags are a useful tool for targeting a specific subset of products that are not all associated with a specific Product Property in your Product Feed. For example, if you want to set up a seasonal campaign for a Valentine's Day promotion, you can create a Valentine's Day promotion tag and include all the relevant products inside it. ## How to Create a Product Tag To create a Product Tag, follow these steps: 1. Navigate to Product Data > Properties, then select the **Tags** tab. 2. Click on the **Create Product Tag** button.
3. Add a title to the Product Tag, as seen in the screenshot below.
4. In the Product Tag side panel, you can add products to your tag in two ways: a) Search for Product IDs/Titles and add them to the new tag (useful for small product tags that contain only a few products): * Select the desired product tags one by one by clicking on the checkbox next to each item. * Click on the **Add to selection** button.
b) Batch Upload a list of Product IDs (useful for tags that will contain a large number of products) * Click on the **Batch upload** button at the right bottom side of the side panel. * Type or paste your Product IDs in the text panel that appears with **one Product ID per row**. * Click on **Upload IDs**.
5. Once all your products are added, click on **Save** at the top right of the side panel. {% hint style="info" %} There is no limit on how many product IDs can be batch uploaded at the same time. However, please keep in mind that a batch upload consisting of several thousand product IDs might take some time to be completed. {% endhint %} ## How to Edit Product Tag (Add or Remove Products) Once your Product Tag is created, you can add more products by following the same steps as above. In order to remove products from a Tag, follow these steps: 1. Open the Product Tag you want to edit by clicking on it. 2. Scroll down to the bottom of the side panel (underneath the Tag Name section). 3. Select the products you want to remove using the checkboxes. 4. Click on the **Remove from selection** button.
Once you have removed your products of choice click on the **Save** button. {% hint style="info" %} To use a Product Tag in a Campaign, search for Product Tag when you are adding a condition to your campaign's targeting. {% endhint %} # Add a Property Category Within this article, you will find how to organize your product data efficiently by creating and managing property categories. Product categories can be used to group properties, providing a structured way to manage and organize your product data. By categorizing properties, you can streamline the process of identifying and highlighting specific product benefits, making it easier to manage diverse product lines. For example, you might create distinct categories for Blenders and Coffee Machines, along with general properties applicable across multiple products. This categorization not only aids in better data organization but also enhances the ability to target and segment products effectively, ensuring that product-specific attributes are clearly defined and easily accessible. 1. Go to **Crobox App**, navigate to **Product Data** and select **Properties**. 2. Click on the three-dot menu and select **Add Category above.**
3. **Name** the category and if applicable, create conditions to segment specific products from your feed into the category (this is an optional filter to apply business rules).
4. After additional product categories are created, move properties to product-specific categories by **selecting the checkbox**, then choose **"Move to Category"** from the menu.
5. Adjust properties existing in multiple categories by updating the property settings and **adding all applicable categories.**
# Analytics Complete guide to Analytics dashboards, widgets, and performance monitoring. Learn to create powerful data visualizations and track key business metrics.
Quick StartStart your Analytics journey with foundational guides for creating dashboards and navigating the interface
Essential GuidesMaster core Analytics functionality with guides for charts, KPIs, and filtering
Advanced WorkflowsImplement sophisticated tracking and analysis for complex business scenarios
# Understand your Analytics Learn to navigate Analytics dashboards, understand different widget types, and interpret key metrics. Master the interface to efficiently explore your data and find insights that drive business growth Understanding how to navigate your Analytics dashboards and interpret your metrics is essential for making data-driven decisions. This guide will walk you through the complete analytics experience, from basic navigation to understanding what each metric tells you about your business performance. ### Accessing Analytics Dashboards #### Opening the Analytics Section {% stepper %} {% step %} **Navigate to Analytics** In your main navigation, click on **Discover** → **Analytics** to access your analytics dashboards. {% endstep %} {% step %} **View Available Dashboards** You'll see a list of all available dashboards. Each dashboard serves different analytical purposes and contains relevant widgets for specific business areas. {% endstep %} {% step %} **Select a Dashboard** Click on any dashboard name to open it and start exploring your data. {% endstep %} {% endstepper %} {% hint style="info" %} If you don't see any dashboards, they may need to be created first. Refer to our "Create Your First Dashboard" guide. {% endhint %} ### Understanding the Dashboard Interface #### Dashboard Layout Overview Analytics dashboards are organized into a clean, intuitive interface designed for data exploration: **Header Section** * Dashboard title and description * Time range selector for filtering data * Export and sharing options * Filter controls that apply to all widgets **Main Content Area** * Individual widgets arranged in a grid layout * Each widget displays specific metrics or data views * Widgets can be different sizes based on their content type **Navigation Elements** * Back navigation to return to dashboard overview * Category-based dashboard organization with collapsible sections * Direct dashboard access via dashboard table rows #### Dashboard Controls {% tabs %} {% tab title="Time Range Selector" %} **Purpose**: Filter all dashboard data by date range **How to Use**: * Click the time range selector (usually shows "Last 30 days" or similar) * Choose from preset ranges like "Last 7 days", "Last month", "Last quarter" * Or select custom date ranges for specific analysis periods **Impact**: Changes the time period for ALL widgets on the dashboard {% endtab %} {% tab title="Global Filters" %} **Purpose**: Apply filters that affect all widgets simultaneously **Common Filters**: * Product categories * Geographic regions * User segments * Traffic sources **How to Use**: Click on filter dropdowns and select values. Multiple filters can be applied at once. {% endtab %} {% tab title="Data Updates" %} **Purpose**: Dashboard data updates automatically when filters change **How It Works**: * Data refreshes automatically when date range changes * Widget data resets when filters are applied * No manual refresh button - updates are triggered by user actions {% endtab %} {% endtabs %} ### Metrics Analytics dashboards track key metrics based on data collected through your Crobox implementation. The depth and accuracy of these metrics depend on which Crobox experiences you have installed and how they're configured on your site. #### How Metrics Are Generated Your analytics data comes from: * **JavaScript tracking** installed on your site pages * **Experience interactions** from Product Finder, Campaigns, and other Crobox tools * **E-commerce events** captured through your implementation * **Cross-session tracking** that follows customer journeys over time {% hint style="warning" %} Missing expected metrics? Check that your Crobox implementation covers all relevant pages and events. Contact your technical team or Crobox support if you need help expanding your tracking coverage. {% endhint %} #### Core Site Metrics | Metric | Definition | Use Case | | ------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------- | | **Actions** | Total interactions customers make on your site - clicks, adds to cart, custom actions, and more | *Monitor overall site engagement and activity levels* | | **Pageviews** | How many pages visitors view during their time on your site | *Track content consumption and popular pages* | | **Sessions** | Individual visits to your site, from arrival to departure | *Understand traffic volume and visitor patterns* | | **Users** | Unique individuals visiting your site (removing duplicate visits) | *Measure your actual audience size and reach* | #### Performance Metrics | Metric | Definition | Use Case | | ----------------------- | ------------------------------------------- | ------------------------------------------------------------------- | | **Revenue** | Total money earned from completed purchases | *Track financial performance and business growth* | | **Transactions** | Number of completed purchases on your site | *Monitor sales volume and conversion success* | | **Conversion Rate** | Percentage of visitors who make a purchase | *Measure how effectively your site turns visitors into customers* | | **Average Order Value** | Average amount customers spend per purchase | *Understand spending patterns and identify upselling opportunities* | #### Cross-Session Performance Metrics | Metric | Definition | Use Case | | ----------------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | **Revenue (cross-session)** | Total money earned from customers within 30 days of their initial interaction | *Understand the full revenue impact of customer discovery journeys, including delayed purchases* | | **Transactions (cross-session)** | Number of purchases completed by customers within 30 days of their initial interaction | *Measure true conversion impact beyond single-session purchases* | | **Conversion Rate (cross-session)** | Percentage of initial visitors who make a purchase within 30 days of first interaction | *Evaluate the long-term effectiveness of customer acquisition and engagement* | {% hint style="success" %} **Cross-session metrics** provide a more complete picture of customer behavior by tracking the full customer journey, not just immediate conversions. These metrics are especially valuable for understanding the impact of discovery experiences on customers who need time to research before purchasing. {% endhint %} #### Engagement Metrics | Metric | Definition | Use Case | | ---------------------- | ------------------------------------------------------------- | ------------------------------------------------------ | | **Product Clicks** | Number of product clicks by visitors | *Identify which products generate the most interest* | | **Product Carts** | Number of products added to shopping carts | *Track purchase intent and product appeal* | | **Product Boughts** | Products that customers actually purchased | *See which products convert from interest to sales* | | **Add-to-Cart Rate** | Percentage of sessions where visitors add items to their cart | *Measure how well products appeal to shoppers* | | **Click-through Rate** | How often products generates clicks from visitors | *Measure content impressions and click event tracking* | | **Buy-to-Detail Rate** | Percentage of product page visits that result in purchases | *Identify your most effective product pages* | #### Product Finder Specific Metrics | Metric | Definition | Use Case | | --------------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------- | | **Finder Completion Rate** | Percentage of customers who complete your Product Finder | *Measure how engaging and useful your guided selling tools are* | | **Product Finder Products Bought** | Items purchased directly through Product Finder recommendations | *Track the sales impact of your guided selling experiences* | | **Product Finder Products Recommended** | Products suggested by your Product Finder experience | *Monitor recommendation volume and system performance* | #### Recommender Specific Metrics | Metric | Definition | Use Case | | ------------------------ | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | **Recommenders Shown** | Number of times your Product Recommender experience is displayed to users | *Track recommendation reach and impression volume across your site* | | **Recommenders Clicked** | Number of times customers click on recommended products | *Measure engagement with your recommendations and identify product suggestions* | {% hint style="info" %} Recommender specific metrics apply only to Recommender experiences active on your site. {% endhint %} {% hint style="warning" %} Recommender specific metrics should be used with the group bys: **Action** **Recommender ID** and **Action Product ID,** for accurate results. Contact Support for best practice recommender template dashboards. {% endhint %} #### Analyzing Recommender Data Recommender analytics support multiple grouping dimensions to help you understand performance from different angles: * Group by **Action** **Recommender ID:** Evaluate individual Recommender campaigns independently * Group by **Action Product ID:** Evaluate individual products recommended within a Recommender * Group by ***additional dimensions*** * Segment data by other product or context attributes available in your implementation (e.g; Product Title, Region Country). This helps organize and filter your data to focus on specific subsets of your Products and Recommender performance. * Multiple grouping levels combine grouping dimensions for deeper analysis. For example, group by both Recommender ID and Product to see which products are recommended by each campaign, then add another dimension to slice the data further. * Connecting Recommender Analytics to commercial performance: For deeper insights, cross-reference Recommender metrics with your site's core metrics ### Widget Types #### Understanding Different Widget Types Analytics dashboards contain these verified widget types: {% stepper %} {% step %} **Big Number Widgets** * Show single metrics with comparison options * Can compare against previous time periods or other filters * Display-only functionality with no drill-down capability * Perfect for monitoring key performance indicators at a glance {% endstep %} {% step %} **Line Chart Widgets** * Show time-based trends with configurable intervals (6 hours to monthly) * Single metric visualization over time * Horizontal time axis for trend analysis * Ideal for identifying patterns and seasonal variations {% endstep %} {% step %} **Bar Chart Widgets** * Compare values across different categories * Support group-by functionality for segmentation * Stacked and unstacked display options * Vertical axis shows metric values {% endstep %} {% step %} **Table Widgets** * Display up to 6 metric columns with group-by capabilities * CSV export functionality available * Data rendered as provided (no built-in sorting or search) * Best for detailed data examination {% endstep %} {% step %} **Pie Chart Widgets** * Show proportional data with group-by support * Single metric visualization * Effective for understanding composition and distribution {% endstep %} {% step %} **Additional Widget Types** * **Radar Chart:** Single metric with group-by comparison * **Bubble Chart:** Three-metric visualization for complex analysis * **Comment Box:** Markdown text areas for context and notes {% endstep %} {% endstepper %} #### Widget Interaction All widgets display data based on current dashboard filters and time ranges. Hover over data points to see detailed values and context. {% tabs %} {% tab title="Edit Mode Interactions" %} **What Happens**: Hover over widgets to reveal edit controls (if you have edit permissions) **Available Actions**: * **Edit**: Modify widget configuration via side panel * **Duplicate**: Create a copy of the widget * **Copy**: Copy widget to clipboard for pasting elsewhere * **Remove**: Delete the widget from dashboard * **Drag Handle**: Reposition widgets using the drag indicator **Visual Cues**: Edit bar appears on hover with primary color outline {% endtab %} {% tab title="Widget Management" %} **What Happens**: Widgets can be repositioned and resized when in edit mode **Drag & Drop**: * Use drag handles to move widgets around the grid * Resize widgets by dragging corner handles * Layout changes are automatically saved **Grid System**: Widgets snap to a responsive grid layout with defined sizes per widget type {% endtab %} {% tab title="Data Display Only" %} **Important Note**: Widgets are primarily for data display **No Interactive Filtering**: * Charts do not support click-to-filter functionality * No legend interaction for showing/hiding data series * No drill-down capabilities within widgets **Data Updates**: Widgets update automatically when dashboard-level filters change {% endtab %} {% endtabs %} ### Generate insights with AI You can generate a widget from a plain-language prompt when creating a widget on any dashboard. Use **Generate Insights with AI** to speed up setup or refine a widget you already started. The assistant can generate and update the full widget configuration, including the title, widget type, metrics, dimensions, filters, grouping, and sorting. {% stepper %} {% step %} ### Open the widget creator Open any dashboard in edit mode. Click **Create widget** to open the widget panel. {% endstep %} {% step %} ### Describe the insight you want Use the **Describe your widget** field at the top of the panel. Write the outcome you want to see, not the exact configuration. Examples: * `Show which countries drive the most sessions but have low conversion rates` * `Build a table of active countries with sessions, product boughts, and conversion rate sorted by highest conversion rate` * `How is cross session conversion vs single session conversion copmaring for visitors who completed the [Insert your finder name]` * `Compare returning and new visitors by device type to see which segment converts better` {% endstep %} {% step %} ### Generate the widget Submit your prompt from the widget panel. The assistant chooses the widget type, metric, dimensions, filters, and other setup values for you. Use the generated preview to check if the result matches your goal. {% endstep %} {% step %} ### Refine the result with another prompt You can prompt again after the first result. Use follow-up prompts to adjust the current widget instead of starting over. For example: * `Sort this table by conversion rate from high to low and keep only the most impactful countries first` * `Add product boughts and conversion rate so I can compare traffic volume against outcomes` * `Change this to a bar chart grouped by device type so the comparison is easier to scan` {% endstep %} {% step %} ### Review and save Check the generated setup before saving. You can manually edit any field before you click **Save**. {% endstep %} {% endstepper %} {% hint style="warning" %} AI can make mistakes. Review the generated widget before saving. {% endhint %} #### Prompt writing tips Use short, specific prompts for better results. * Start with the business question you want answered * Add the dimensions you want to compare, such as country, device type, or visitor type * Add the ranking, filter, or time angle that makes the result useful #### When to use it Use it in two ways: * **Start faster** when you want a first draft of a widget * **Refine faster** when you want to update an existing widget with another prompt ### Reading Widget Data Effectively #### Understanding Visual Cues {% tabs %} {% tab title="Color Coding" %} **Performance Indicators**: * **Green:** Positive performance, growth, or favorable trends * **Red:** Negative performance, decline, or areas needing attention * **Blue/Neutral:** Baseline data or informational metrics * **Consistent Colors:** Same metrics use consistent colors across widgets **Performance Indicators**\ Look for trend arrows, percentage changes, and comparison indicators that help you quickly assess performance against benchmarks or previous periods. {% endtab %} {% tab title="Trends and Patterns" %} **Line Charts**: * Upward slopes = growth or increase * Downward slopes = decline or decrease * Flat lines = stable performance * Sharp changes = significant events or anomalies **Bar Charts**: * Height/length indicates relative values * Grouping shows related categories * Sorting reveals rankings and priorities {% endtab %} {% tab title="Context Indicators" %} **Comparison Elements**: * Previous period comparisons (vs. last month) * Year-over-year changes * Benchmark or target lines * Industry averages (if available) **Data Quality Indicators**: * Confidence intervals * Sample sizes * Data freshness timestamps {% endtab %} {% endtabs %} ### Troubleshooting #### Common Issues and Solutions
Dashboard not loading or showing "No data" * Check your time range settings - you may be looking at a period with no activity * Verify that your implementation is active and tracking events * Confirm you have the necessary permissions to view the dashboard
Widgets showing different date ranges * Ensure all widgets are using the same time range and filters * Check if widgets are pulling from different data sources or attribution models * Look for widgets that might be using cross-session vs. single-session data
Edit controls not appearing on widget hover **Possible Causes**: * No edit permissions for the dashboard **Solutions**: * Check if you have update permissions * Contact administrator for permission changes
Navigation is slow or unresponsive **Possible Causes**: * Large datasets being processed * Network connectivity issues * High system load **Solutions**: * Try smaller time ranges or more specific filters * Check internet connection * Wait for peak usage times to pass
Missing expected metrics * Verify that relevant Crobox experiences are implemented and active * Check that tracking is properly configured for the events you want to measure from your technical implementation * Contact your technical team if implementation gaps are identified
### Best Practices #### Efficient Navigation Strategies {% stepper %} {% step %} **Start Broad, Then Focus** Begin with overview dashboards to understand the big picture, then navigate to specific areas that need attention. {% endstep %} {% step %} **Use Consistent Time Ranges** When comparing data across multiple dashboards, ensure you're using the same time ranges for accurate comparisons. {% endstep %} {% step %} **Leverage Filters Strategically** Apply filters to focus on specific segments, but remember to clear them when moving to different analysis areas. {% endstep %} {% step %} **Cross-Reference Data** Use multiple widgets and dashboards to verify findings and get a complete picture before making decisions. {% endstep %} {% endstepper %} #### Data Interpretation Tips * **Context is Key**\ Always consider the business context when interpreting data. Seasonal patterns, marketing campaigns, or external events can influence metrics. * **Look for Patterns**\ Regular navigation through dashboards helps you recognize normal patterns and quickly spot anomalies. * **Time Sensitivity**\ Understand which metrics update frequently and which are calculated on longer cycles to set appropriate expectations. * **Attribution Understanding**\ Remember that cross-session metrics provide a more complete view of customer impact than single-session data alone. ### Next Steps Now that you understand how to navigate Analytics dashboards and widgets, you're ready to: * **Create Your First Dashboard**: Learn to build custom dashboards tailored to your needs * **Set Up Dashboards to Support Regular Reporting:** Configure regular reporting for stakeholder updates Effective navigation is the foundation of data-driven decision making. Practice exploring your dashboards regularly to become more comfortable with the interface and develop insights that drive business value. *** # Data Confidence
### What is Data Confidence? Data Confidence measures the trustworthiness of the results from our experiments. This is an important metric that determines the likelihood that the impact of your experiment is accurate and not caused by random chance. To test the data confidence yourselves, try the [A/B Test Calculator](https://abtestguide.com/calc/). The Data Confidence indicates how certain you can be that there is a significant impact of your test. This confidence is based on a combination of the amount of change (impact) and number of trials. So, if you have a very small measured impact, you need to run the test longer for more trials to get a significant result. Our data bars go from red (not enough data to be trustworthy) to yellow (slightly trustworthy) to green (trustworthy). In general, the longer you run the test, the higher the Data Confidence. So, if your results are currently red, you should give the campaign more time to collect data or adjust the timeframe in which you are viewing the data. However, AB test results can be difficult to read sometimes. For example: 1. A 10% measured impact with 95% confidence does not mean that you are 95% confident that you have a 10% change. It means that the change is big enough to be 95% confident that there is a significant change. 2. Because of some seasonal change or any other influence, the measured impact reverses (gets smaller) while your number of trials increases. In this case the significance can go down, and you need to keep the test running. 3. An unexpected event happened that influenced your measurements, in which case you should rerun the test. 4. You have so many trials, that even a minute measured impact of, for example, 0.02% is calculated with 100% confidence. The small impact is more likely to result from other unknown small effects than a causal connection of your test. ### How do we measure Data Confidence? We measure Data Confidence based on statistical significance using a [null hypothesis test](https://simple.wikipedia.org/wiki/Null_hypothesis). This tests the difference between the performance of the Crobox group vs. Control group. In the Crobox group, users are exposed to our messages. In the Control group, users are exposed to invisible messages so that we can test the difference between the two. The null hypothesis test determines whether or not the use of Crobox’s Campaigns has any impact on your KPIs. There are two metrics of importance when determining statistical significance: P Value and Power. The P Value in your performance tracking is how we measure statistical significance. [Power](https://www.statisticsteacher.org/2017/09/15/what-is-power/) is the probability that a test of significance will pick up on an effect that is present. A P Value of 0.05 (5%) means you can say with 95% confidence that there is a difference between the Crobox group vs. Control group. We always make sure our experiments have at least 95% statistical significance. # Quick Start Start your Analytics journey with these foundational guides. Learn the basics of creating dashboards and navigating the Analytics interface.
Create Your First DashboardStep-by-step guide to build a comprehensive performance dashboard with essential KPIs
Understand the Analytics InterfaceNavigate the Analytics platform and understand key interface elements
# Create Your First Dashboard Step-by-step guide to create your first Analytics dashboard with essential KPIs for website performance monitoring. Perfect for new users getting started. #### Overview Table widgets provide comprehensive data analysis capabilities with multi-metric support and export functionality. This guide covers Table widget configuration based on the verified Analytics implementation. **Perfect for**: Detailed data analysis, multi-metric comparisons, data export workflows, comprehensive performance reviews **Time Required**: 10-15 minutes per table widget #### When to Use Table Widgets Table widgets excel at detailed data presentation and are ideal for: {% tabs %} {% tab title="Multi-Metric Analysis" %} **Comprehensive data views**: * Multiple KPIs side-by-side comparison * Performance metrics with supporting data * Detailed category breakdowns with various measurements * Complete performance scorecards **Why Tables**: Display multiple related metrics in organized, comparable format {% endtab %} {% tab title="Data Export Workflows" %} **Export and sharing needs**: * CSV data export for further analysis * Detailed reports for stakeholders * Data backup and archival * Integration with external tools **Why Tables**: Only verified widget type with CSV export functionality (Table.tsx) {% endtab %} {% tab title="Detailed Analysis" %} **In-depth data examination**: * Granular performance review * Category-by-category analysis * Detailed ranking and comparison * Supporting data for executive summaries **Why Tables**: Provide complete data context without visualization simplification {% endtab %} {% tab title="Reference Data" %} **Data reference and lookup**: * Performance benchmarks * Historical data reference * Detailed metric definitions * Comprehensive data documentation **Why Tables**: Structured data presentation for reference and lookup {% endtab %} {% endtabs %} #### Prerequisites * Analytics dashboard access with Edit permissions * Understanding of your key business metrics and available data * Multiple metrics for meaningful table analysis * Familiarity with verified Analytics features: * Dashboard creation * Widget basics * Dashboard filtering #### Creating Your First Table Widget {% stepper %} {% step %} **Add Table Widget** From your dashboard, click the **dot menu (⋮)** in the header area. Select **"Create widget"** to open the WidgetForm side panel (AnalyticsDetail.tsx:279-283). Choose **"Table"** from the widget type options (Table.tsx implementation). {% endstep %} {% step %} **Configure Table Specifications** Configure your Table widget in the **WidgetForm side panel**: **Table Widget Specifications** (Table.tsx): * **Grid Size**: 12x9 (largest widget size for detailed data display) * **Multi-Metric Support**: Up to 6 metric columns maximum * **Group-By Capabilities**: Categorical grouping with relative uplift calculations * **CSV Export**: Built-in JSON to CSV conversion and download functionality **Configuration Options**: * **Metric Selection**: Choose up to 6 metrics from available API metrics * **Group By**: Select categorical dimension for row organization * **Data Display**: Detailed data presentation without built-in sorting or search {% endstep %} {% step %} **Add Multiple Metrics** **Multi-Metric Configuration Process**: 1. **Primary Metric**: Select your main performance indicator 2. **Supporting Metrics**: Add up to 5 additional related metrics 3. **Metric Relationships**: Choose complementary metrics for comprehensive analysis 4. **Group-By Dimension**: Select categorical grouping (product, region, source, etc.) **Example Multi-Metric Setup**: * **Primary**: Revenue or main business metric * **Volume**: Sessions, users, or activity metrics * **Efficiency**: Conversion rate, efficiency measures * **Quality**: Average values, satisfaction scores * **Growth**: Period-over-period comparisons * **Context**: Supporting categorical data **Note**: Specific metrics depend on your API configuration and data setup {% endstep %} {% step %} **Position and Save** **Widget Specifications**: * **Grid Size**: 12x9 (verified Table widget dimensions) * **Auto-positioning**: Widget places in next available 12x9 grid space * **Title Configuration**: Set descriptive title for multi-metric analysis * **Data Organization**: Rows organized by group-by dimension, columns show metrics Click **"Save"** in the side panel to add the widget to your dashboard. {% endstep %} {% endstepper %} #### Understanding Your Table Widget Your completed table widget displays comprehensive multi-metric information: **Key Table Components** {% tabs %} {% tab title="Column Structure" %} **Multi-Metric Columns**: Up to 6 metrics displayed side-by-side * **Metric Headers**: Clear column labels for each metric * **Data Values**: Formatted metric values in organized columns * **Relative Uplift**: Calculations showing relationships between metrics * **Consistent Formatting**: Appropriate number formatting per metric type {% endtab %} {% tab title="Row Organization" %} **Group-By Rows**: Data organized by categorical dimension * **Category Labels**: Clear identification of each data row * **Data Grouping**: Rows represent different categories, segments, or periods * **Comprehensive View**: All selected metrics shown for each category * **No Built-in Sorting**: Data displayed according to implementation logic {% endtab %} {% tab title="Data Display" %} **Detailed Information**: Complete data presentation without simplification * **Full Precision**: Complete metric values without rounding * **Multiple Perspectives**: Various metrics provide comprehensive category view * **Static Display**: Data presentation without interactive sorting or filtering * **Export Ready**: Data formatted for CSV export functionality {% endtab %} {% endtabs %} #### Advanced Table Configurations **CSV Export Functionality** **Verified Export Capability** (Table.tsx): **Export Process**: 1. **CSV Generation**: JSON to CSV conversion functionality built into Table widgets 2. **Download Trigger**: Export mechanism available within table interface 3. **Complete Data**: All displayed metrics and categories included in export 4. **File Format**: Standard CSV format for external analysis tools **Export Use Cases**: * **Further Analysis**: Import into Excel, Google Sheets, or analysis tools * **Data Backup**: Archive historical performance data * **Reporting**: Share detailed data with stakeholders * **Integration**: Connect with external systems and processes **Multi-Metric Analysis Strategies**
Performance Scorecards **Comprehensive Category Analysis**: * **Revenue Metrics**: Total revenue, average order value * **Volume Metrics**: Sessions, users, transactions * **Efficiency Metrics**: Conversion rates, performance ratios * **Growth Metrics**: Period-over-period changes * **Quality Metrics**: Satisfaction scores, return rates **Benefits**: Complete performance picture for each category with all relevant metrics in single view
Comparative Analysis **Multi-Dimensional Comparisons**: * **Geographic Performance**: Countries/regions with multiple performance metrics * **Product Analysis**: Product categories with revenue, volume, and efficiency data * **Channel Performance**: Traffic sources with comprehensive performance indicators * **Time-Period Analysis**: Monthly/quarterly performance across multiple metrics **Benefits**: Side-by-side multi-metric comparison reveals performance patterns and opportunities
Executive Reporting **Stakeholder-Ready Data Views**: * **Key Metrics**: Most important business indicators in single table * **Supporting Context**: Additional metrics provide complete context * **Export Ready**: CSV functionality enables easy stakeholder sharing * **Comprehensive View**: All relevant data for decision-making in organized format **Benefits**: One-stop data source for executive reviews and strategic decisions
#### Table Widget Best Practices **Metric Selection Strategy** {% tabs %} {% tab title="Related Metrics" %} **Choose Complementary Metrics**: * **Business Impact**: Revenue, profit, key business outcomes * **Volume Indicators**: Traffic, users, transaction volume * **Efficiency Measures**: Conversion rates, performance ratios * **Quality Metrics**: Customer satisfaction, quality scores * **Context Data**: Supporting metrics that explain performance **Goal**: Create comprehensive view where metrics support and explain each other {% endtab %} {% tab title="Data Hierarchy" %} **Organize by Importance**: * **Column 1**: Most important business metric (primary KPI) * **Column 2**: Primary volume or activity metric * **Column 3**: Key efficiency or conversion metric * **Columns 4-6**: Supporting metrics that provide context and explanation **Benefits**: Logical data flow that tells complete performance story {% endtab %} {% tab title="Group-By Selection" %} **Choose Meaningful Categories**: * **Business Segments**: Product categories, geographic regions, customer segments * **Performance Drivers**: Traffic sources, marketing channels, campaign types * **Time Periods**: Monthly, quarterly, or seasonal comparisons * **Strategic Dimensions**: Business units, priority areas, investment categories **Goal**: Group-by dimension should align with business decision-making needs {% endtab %} {% endtabs %} **Display and Layout Guidelines** **Optimal Table Configuration**: * **Limit to 6 metrics** maximum for readability (verified Table.tsx limit) * **Choose descriptive column headers** for clarity * **Use consistent group-by dimensions** across related tables * **Position strategically** - 12x9 size requires adequate dashboard space #### CSV Export Best Practices **Export Workflow** **Efficient Data Export Process**: 1. **Configure Table**: Set up with all needed metrics and categories 2. **Verify Data**: Ensure table displays complete, accurate information 3. **Export CSV**: Use built-in CSV export functionality 4. **External Analysis**: Import into analysis tools for advanced processing **Export Use Cases**
Advanced Analysis Workflows **Excel/Google Sheets Integration**: * **Pivot Tables**: Create dynamic summaries and cross-tabulations * **Advanced Calculations**: Perform complex calculations not available in Analytics * **Custom Visualizations**: Build specialized charts and graphs * **Multi-Data Source**: Combine with other data sources for comprehensive analysis
Stakeholder Reporting **Professional Report Creation**: * **Formatted Tables**: Style exported data for presentation * **Executive Summaries**: Include table data in comprehensive reports * **Trend Analysis**: Combine multiple time-period exports for trend analysis * **Board Presentations**: Include detailed supporting data in presentation materials
Data Integration **System Integration Workflows**: * **Database Import**: Load Analytics data into data warehouses * **BI Tool Integration**: Import into business intelligence platforms * **Automated Reporting**: Use exported data in automated report generation * **API Alternatives**: Use CSV export when API integration isn't available
#### Troubleshooting Table Widgets **Table Shows Limited Data** **Common Causes & Solutions**: 1. **Metric Limitations** * **Problem**: Not all expected metrics appear in table * **Solution**: Verify metric availability in your API configuration * **Check**: Ensure selected metrics have data for chosen time period 2. **Group-By Issues** * **Problem**: Categories don't appear as expected * **Solution**: Verify group-by dimension has data and proper configuration * **Check**: Ensure categorical data exists for selected time range 3. **Data Volume** * **Problem**: Table appears empty or has very few rows * **Solution**: Expand time range or adjust filtering to include more data * **Check**: Verify dashboard-level filters aren't excluding data **CSV Export Problems** **Diagnostic Steps**: 1. **Export Functionality**: Verify CSV export option is available in table interface 2. **Data Completeness**: Ensure table displays data before attempting export 3. **Browser Compatibility**: Check browser settings allow file downloads 4. **File Access**: Verify downloaded file opens correctly in spreadsheet applications **Performance Issues** **Optimization Strategies**: * **Limit Metrics**: Use 6 metrics maximum (verified limit) * **Manage Categories**: Large group-by dimensions may impact performance * **Time Ranges**: Shorter periods reduce data processing requirements * **Filter Optimization**: Use dashboard filters to reduce data volume #### FAQ
How many metrics should I include in one table? **Optimal Range**: 3-6 metrics for best balance of information and readability * **Fewer than 3**: Consider using separate widgets for individual metrics * **3-6 metrics**: Perfect for comprehensive analysis tables * **6 metrics**: Maximum supported by Table widget implementation (Table.tsx) **Recommendation**: Start with 3-4 most important metrics, add others if needed for complete analysis
Can I sort or filter data within the table widget? **Table Widget Limitations** (verified implementation): * **No built-in sorting**: Data displayed according to implementation logic * **No internal filtering**: Table shows data based on dashboard-level filters * **Static Display**: Table presents data without interactive manipulation **Alternatives**: * **Dashboard Filters**: Use dashboard-level filtering to refine displayed data * **CSV Export**: Export data for sorting and filtering in external tools * **Multiple Tables**: Create separate tables with different dashboard filters
What's the difference between Table widgets and other widget types? **Table Widget Advantages**: * **Multi-Metric Display**: Only widget type supporting up to 6 metrics simultaneously * **CSV Export**: Only verified widget with export functionality * **Detailed Data**: Complete data presentation without visualization simplification * **Largest Size**: 12x9 grid provides maximum data display space **When to Use Tables vs Other Widgets**: * **Use Tables**: Detailed analysis, multi-metric comparison, data export needs * **Use Charts**: Trend visualization, single-metric focus, pattern identification * **Use Big Numbers**: Key performance indicators, executive dashboards, single metrics
How do I choose the right group-by dimension for my table? **Group-By Selection Criteria**: * **Business Alignment**: Choose dimensions that align with business decision-making * **Data Availability**: Ensure selected dimension has sufficient data * **Analysis Purpose**: Match dimension to analysis goals and questions * **Stakeholder Needs**: Consider what categorization is most useful for end users **Common Effective Group-By Options**: * **Product/Category**: For product performance analysis * **Geographic**: For market and regional analysis * **Traffic Source**: For marketing and acquisition analysis * **Time Period**: For trend and seasonal analysis **Test Different Options**: Try various group-by dimensions to find most insightful categorization
Can I use Table widgets for real-time data monitoring? **Table Widget Data Behavior**: * **Data Updates**: Tables refresh when dashboard-level filters change * **Static Display**: Tables show current data based on selected time range and filters * **No Auto-Refresh**: Tables don't automatically update without user action **For Monitoring Use Cases**: * **Dashboard Refresh**: Manually refresh dashboard to update table data * **Time Range Selection**: Use current/recent time ranges for most current data * **Combine with Other Widgets**: Use alongside Big Numbers for key metrics monitoring * **Export Recent Data**: Regular CSV exports can track data changes over time **Best Practice**: Tables work best for periodic analysis rather than real-time monitoring
*** {% hint style="info" %} **Documentation Verification**: All Table widget features and configuration options described in this guide have been verified against the actual Analytics codebase. Multi-metric support, CSV export functionality, grid sizing, and display capabilities are accurately documented based on Table.tsx implementation. {% endhint %} **Related Guides:** * Configure Big Number KPIs * Create Line Chart for Trends * Setup Bar Chart Comparisons * Configure Dashboard Filters # Understand the Analytics Interface Complete guide to navigating the Analytics interface. Learn key elements, navigation patterns, and essential controls for effective data analysis. ![Analytics interface with key elements highlighted](https://placeholder.com/analytics-interface-overview.svg) #### Overview Understanding the Analytics interface is crucial for effective data analysis. This guide provides a comprehensive tour of all interface elements, helping you navigate confidently and work efficiently with your analytics data. **What You'll Learn**: Complete interface navigation, key controls, and best practices for using the Analytics platform. All features described are verified against the actual implementation. **Time Required**: 15-20 minutes #### Prerequisites * Access to Analytics module in your account * Basic familiarity with web applications * Understanding of your business metrics (helpful but not required) {% hint style="info" %} This guide serves as the foundation for all other Analytics how-to guides. Bookmark it for quick reference while learning other features. {% endhint %} #### Interface Overview The Analytics interface is organized into several key areas for optimal workflow:
Complete Analytics interface breakdown

Analytics interface with main areas labeled for reference

{% tabs %} {% tab title="Dashboard Overview" %} **Location**: Main Analytics page (AnalyticsOverview\.tsx) **Purpose**: Central hub for accessing all dashboards **Key Elements**: * Dashboard table organized by categories (lines 244-403) * Collapsible category sections with chevron controls * "Create Dashboard" button for new dashboards * Row-click navigation to open dashboards (line 233) {% endtab %} {% tab title="Dashboard Canvas" %} **Location**: Center area **Purpose**: Main workspace for viewing and editing dashboards **Key Elements**: * Widget grid layout system * Drag-and-drop functionality * Widget interaction controls * Real-time data display {% endtab %} {% tab title="Top Controls" %} **Location**: Header area **Purpose**: Dashboard-level controls and settings **Key Elements**: * Time range selector * Dashboard filters * Sharing and export options * Dashboard settings menu {% endtab %} {% tab title="Widget Controls" %} **Location**: Widget hover menus (AnalyticsDetail.tsx:164-196) **Purpose**: Widget-specific actions and configuration **Key Elements**: * Edit widget settings via side panel * Duplicate widget functionality * Copy/paste widgets between dashboards * Remove widget from dashboard * Drag handle for repositioning {% endtab %} {% endtabs %} #### Dashboard Organization System {% stepper %} {% step %} **Category-Based Organization** Dashboards are organized into collapsible categories (AnalyticsOverview\.tsx:244-403): **Category Management**: * Categories are created using tag system (useTagCategories hook) * Each category can be collapsed/expanded with chevron icon * Category preferences are stored per user * Default category exists for uncategorized dashboards **Category Controls** (lines 274-374): * Move dashboards between categories * Reorder categories (move up/down) * Edit/remove categories (admin permissions required) * Add new categories with priority ordering {% endstep %} {% step %} **Dashboard Access Methods** Access dashboards through these verified methods: * **Table Row Click**: Click any dashboard row to open (line 233) * **Category Navigation**: Expand/collapse categories to organize view * **Back Navigation**: Use "Back to Analytics overview" link from dashboards * **Direct URL Access**: Bookmark specific dashboard URLs **No Search Functionality**: Dashboard filtering is done by category organization only {% endstep %} {% step %} **Dashboard Creation Process** Actual dashboard creation workflow (AnalyticsDashboardTemplateModal): **Template Selection**: * **Product Finder Template**: Pre-configured for product analytics * **Simple Template**: Basic dashboard structure * **Multi-Dashboard Template**: Consolidated multi-container view * **Empty Template**: Start with blank canvas **Creation Process** (lines 394-399): * Click "Create Dashboard" button in category section * Select template from modal dialog * Template is instantiated with default widgets * Navigate directly to new dashboard for editing {% endstep %} {% endstepper %} #### Dashboard Canvas & Widget System Understanding how dashboards and widgets work together: **Grid Layout System**
Dashboard grid system visualization

12-column grid system with standard widget sizes

**Grid Specifications**: * **12-column layout**: Flexible widget positioning * **Standard widget sizes**: 3×3, 6×6, 12×9 most common * **Responsive design**: Adapts to different screen sizes * **Drag-and-drop**: Intuitive widget repositioning **Widget Interaction Patterns** {% tabs %} {% tab title="Display Mode" %} **Default State**: Data visualization only (no drill-down functionality) * **Static Data Display**: Widgets show data without click interactions * **Time Range Updates**: Automatic refresh when date range changes (AnalyticsDetail.tsx:243-244) * **Filter Updates**: Real-time response to dashboard-level filters (lines 262-263) * **No Hover Tooltips**: Charts display data without interactive tooltips {% endtab %} {% tab title="Edit Mode" %} **Configuration State**: Available with edit permissions (AnalyticsDetail.tsx:164-196) * **Dot Menu (⋮)**: Access edit, duplicate, copy, remove options * **Drag Handles**: Resize and reposition widgets (WidgetsGrid.tsx:179-204) * **Hover Activation**: Edit controls appear on widget hover (if permitted) * **Grid Layout**: Widgets snap to responsive grid system {% endtab %} {% tab title="Widget States" %} **Visual Feedback**: Verified widget status indicators * **Loading**: Data fetching states during refresh * **Edit Outline**: Primary color outline on hover (WidgetsGrid.tsx:80-85) * **Permission Restrictions**: Edit controls hidden without update permissions * **Grid Positioning**: Visual feedback during drag-and-drop operations {% endtab %} {% endtabs %} #### Time Range Controls Master the time range selector for effective analysis:
Time range selector interface

Time range controls affect all widgets on the dashboard

**Preset Time Ranges** **Quick Selection Options**: * **Last 7 days**: Week-over-week analysis * **Last 30 days**: Monthly performance review * **Last 90 days**: Quarterly trend analysis * **Year to date**: Annual performance tracking * **Custom range**: Specific date periods **Time Range Best Practices**
Executive Dashboards **Recommended Ranges**: * **Daily monitoring**: Last 7-14 days * **Monthly reviews**: Last 30-60 days * **Quarterly planning**: Last 90 days * **Annual reporting**: Year-to-date or full year **Why**: Executive dashboards need current, actionable data with enough context for trend identification.
Operational Dashboards **Recommended Ranges**: * **Real-time monitoring**: Last 24 hours * **Performance tracking**: Last 7 days * **Weekly reviews**: Last 14-30 days * **Issue investigation**: Custom ranges around specific events **Why**: Operations teams need current data with enough detail to identify and resolve issues quickly.
Strategic Analysis **Recommended Ranges**: * **Trend analysis**: 3-6 months * **Seasonal comparison**: Year-over-year * **Growth tracking**: 12+ months * **Historical research**: Custom ranges for specific periods **Why**: Strategic decisions require longer-term context and historical perspective.
#### Filter System Overview Understand how filters work across the Analytics platform: **Dashboard-Level Filters** **Global Filters**: Apply to all widgets on the dashboard * **Geographic filters**: Country, region, city segmentation * **Device filters**: Mobile, desktop, tablet analysis * **Traffic source**: Organic, paid, direct, social channels * **User segments**: New vs. returning, customer segments
Dashboard filter interface

Dashboard filters apply to all widgets and can be saved as dashboard defaults

**Widget-Level Filters** **Specific Filters**: Apply to individual widgets only * **Metric-specific filters**: Relevant to particular metrics * **Grouping filters**: Related to widget grouping options * **Advanced filters**: Complex multi-condition filtering **Smart Filter Presets** **Pre-configured Common Filters**: * **Most Popular Products**: Top 30% by engagement * **High-Value Customers**: Above average order value * **Mobile Users**: Mobile device traffic only * **Seasonal Analysis**: Comparable time periods {% hint style="warning" %} Too many filters can impact dashboard performance. Start with essential filters and add more as needed. {% endhint %} #### Settings & Configuration Areas Access advanced features and customization options: **Dashboard Settings**
Dashboard settings panel

Dashboard settings control sharing, alerts, and advanced features

**Available Settings**: * **General**: Name, description, category assignment * **Permissions**: Sharing and access control * **Alerts**: Dashboard-level alert configuration * **Performance**: Optimization and refresh settings **Account-Level Settings** **System Configuration**: * **User preferences**: Default time zones, date formats * **Notification settings**: Email alerts and report delivery * **Integration settings**: Connected data sources * **Account permissions**: User role management
User Preferences **Customization Options**: * **Time zone**: Set your local timezone for accurate data interpretation * **Date format**: Choose preferred date display format * **Number format**: Currency symbols and decimal preferences * **Dashboard defaults**: Default time ranges and view settings
Notification Management **Alert Delivery Options**: * **Email notifications**: Configure frequency and recipients * **Dashboard alerts**: Visual indicators and pop-ups * **Report scheduling**: Automated report delivery settings * **Threshold management**: Global alert threshold settings
#### Common Navigation Patterns Learn efficient workflows for common tasks: **Daily Monitoring Workflow** {% stepper %} {% step %} **Start with Overview Dashboard** * Check key KPIs for any alerts or anomalies * Review time range is set to appropriate period * Note any significant changes from previous period {% endstep %} {% step %} **Investigate Anomalies** * Drill down into specific metrics showing unusual patterns * Apply filters to isolate root causes * Compare current performance to historical trends {% endstep %} {% step %} **Take Action** * Export data for further analysis if needed * Set up alerts for ongoing monitoring * Share insights with relevant team members {% endstep %} {% endstepper %} **Weekly Review Workflow** {% stepper %} {% step %} **Performance Summary** * Review weekly performance across key metrics * Compare week-over-week and month-over-month trends * Identify top performing and underperforming areas {% endstep %} {% step %} **Deep Dive Analysis** * Analyze specific segments or categories * Investigate campaign or product performance * Review user behavior and engagement metrics {% endstep %} {% step %} **Strategic Planning** * Document key insights and recommendations * Plan upcoming optimizations and experiments * Schedule follow-up analysis and monitoring {% endstep %} {% endstepper %} #### Verified Interface Controls Actual controls and interactions available in the Analytics interface: **Mouse-Based Navigation** **Dashboard Navigation**: * **Click Dashboard Row**: Opens dashboard detail view (AnalyticsOverview\.tsx:233) * **Back Link**: "Back to Analytics overview" link (AnalyticsDetail.tsx:224) * **Category Chevron**: Collapse/expand dashboard categories (lines 250-267) * **Create Dashboard Button**: Opens template selection modal (lines 394-399) **Widget Management**: * **Hover Widget**: Reveals edit controls (if permissions allow) * **Dot Menu Click**: Access edit, duplicate, copy, remove options * **Drag Handle**: Reposition widgets via drag-and-drop * **Resize Handles**: Adjust widget dimensions **Form-Based Controls** **Time Range Selection** (AnalyticsDetail.tsx:239-246): * **DateRangePicker Component**: Click to open date selection * **Manual Date Entry**: Set custom start and end dates * **Automatic Refresh**: Data updates when date range changes **No Keyboard Shortcuts**: All interactions require mouse/touch input **Efficiency Best Practices**
Dashboard Organization **Naming Conventions**: * Use consistent naming: "\[Department] - \[Purpose] - \[Frequency]" * Example: "Marketing - Campaign Performance - Weekly" * Include time context: "Daily", "Weekly", "Monthly" **Category Structure**: * Align with business functions * Use clear, descriptive category names * Regular cleanup of unused categories
Bookmark Strategy **Browser Bookmarks**: * Bookmark frequently used dashboards * Create bookmark folders by department or purpose * Use descriptive bookmark names **Favorites System**: * Mark most important dashboards as favorites * Regularly review and update favorites list * Remove outdated or unused favorites
#### Mobile Interface Considerations Understanding Analytics on mobile devices: **Mobile Layout Adaptations** **Responsive Grid System** (WidgetsGrid.tsx uses react-grid-layout): * **Grid Layout**: Responsive breakpoints adjust widget sizing * **Touch Support**: Drag-and-drop works on touch devices * **Standard Responsive**: Basic mobile adaptation via CSS * **Note**: Mobile optimization level not extensively verified in codebase **Mobile Best Practices** **Dashboard Design for Mobile**: * **Prioritize important widgets**: Place key metrics at top * **Limit widget complexity**: Simple charts work better on mobile * **Use Big Number widgets**: Most readable on small screens * **Test mobile view**: Always check dashboard on mobile devices {% hint style="info" %} Consider creating mobile-specific dashboards for executives who primarily use mobile devices for data review. {% endhint %} #### Troubleshooting Interface Issues Common interface problems and solutions: **Dashboard Loading Issues** **Symptoms**: Slow loading or incomplete dashboards **Solutions**: 1. **Reduce widget count**: Limit to 8-10 widgets per dashboard 2. **Shorten time ranges**: Use 30-90 day periods 3. **Clear browser cache**: Refresh browser data 4. **Check internet connection**: Ensure stable connectivity **Widget Display Problems** **Symptoms**: Widgets not displaying correctly **Solutions**: 1. **Refresh dashboard**: Use browser refresh (F5) 2. **Check filters**: Remove restrictive filters temporarily 3. **Verify permissions**: Ensure access to required data 4. **Browser compatibility**: Use supported browser versions **Navigation Problems** **Symptoms**: Menus or navigation not working **Solutions**: 1. **Clear browser cookies**: Reset session data 2. **Disable browser extensions**: Check for conflicts 3. **Try incognito mode**: Test without extensions 4. **Update browser**: Ensure latest browser version #### FAQ
How do I customize the interface layout? Interface customization is limited to dashboard-level organization: * **Widget Positioning**: Drag-and-drop widgets within dashboards (WidgetsGrid.tsx) * **Category Organization**: Collapse/expand dashboard categories * **Dashboard Creation**: Build custom dashboards with different widget arrangements * **No Theme Customization**: Interface theme and layout cannot be modified * **Browser Controls**: Standard browser zoom and window resizing apply
Can I change the color scheme or theme? The Analytics interface uses a standard theme optimized for data readability. While you cannot change the overall theme: * **Widget colors** may vary based on data and configuration * **Alert colors** provide visual feedback (green/red indicators) * **Chart colors** can be influenced by data grouping * **Browser dark mode** may affect some visual elements
What browsers are supported? Analytics works best with modern browsers: * **Chrome**: Recommended, latest version * **Firefox**: Latest version supported * **Safari**: Latest version on Mac * **Edge**: Latest version on Windows **Not recommended**: Internet Explorer or very old browser versions.
How do I get better performance from the interface? **Performance Optimization Tips**: * **Limit dashboard widgets** to 8-10 per dashboard * **Use shorter time ranges** for daily operational dashboards * **Close unused browser tabs** to free up memory * **Clear browser cache** regularly * **Use wired internet** connection when possible * **Keep browser updated** to latest version
Are there keyboard shortcuts available? **No keyboard shortcuts are implemented** in the Analytics interface. All interactions require mouse or touch input: * **Dashboard navigation** requires clicking dashboard rows or links * **Widget management** needs hover and click interactions * **Form controls** use standard dropdown menus and date pickers * **Data visualization** is display-only without keyboard controls The interface is designed for visual interaction rather than keyboard-driven workflows.
How do I know if data is real-time or delayed? **Data Freshness Indicators**: * **Last updated timestamp** shown on widgets when available * **Loading indicators** show when data is being refreshed * **"Real-time" labels** indicate live data streams * **Refresh buttons** allow manual data updates Different metrics may have different update frequencies based on your data pipeline configuration.
#### Getting Help When you need additional support: **Built-in Help Resources** **Interface Help**: * **Tooltips**: Hover over interface elements for quick explanations * **Help links**: Context-sensitive help within interface * **Getting started tours**: Guided introduction for new features **Documentation Resources** **Complete Guides**: For additional support and documentation, consult your organization's Analytics resources or contact your system administrator. **Support Channels** **When to Contact Support**: * Interface errors that persist after troubleshooting * Permission issues that cannot be resolved * Data discrepancies that need investigation * Feature requests or enhancement suggestions *** *** {% hint style="info" %} **Documentation Verification**: All interface elements and controls described in this guide have been verified against the actual Analytics codebase. Code references are provided where applicable to ensure accuracy. {% endhint %} **Related Guides:** * Create Your First Dashboard * Navigate Dashboards and Widgets * Configure Dashboard Filters * Share Dashboards with Team # Essential Guides Master the core Analytics functionality with these essential guides. Learn to create different chart types, configure KPIs, and apply filters effectively.
Configure Big Number KPIsDisplay key performance indicators with comparisons and alerts for executive dashboards
Create Line Chart for TrendsBuild time series visualizations to track performance trends and patterns
Setup Bar Chart ComparisonsCompare categories, products, or segments with effective bar chart visualizations
Configure Dashboard FiltersApply smart filters and segments to focus analysis on specific data subsets
# Configure Big Number KPIs Learn how to create and configure Big Number widgets for monitoring key performance indicators with comparisons and alerts. #### Overview Big Number widgets are the cornerstone of executive dashboards, displaying your most important metrics in a clear, prominent format. This guide covers everything from basic setup to advanced configurations with comparisons and alerts. **Perfect for**: KPIs, conversion rates, revenue tracking, traffic monitoring, and any single-metric focus **Time Required**: 5-10 minutes per widget #### When to Use Big Number Widgets {% tabs %} {% tab title="Executive Dashboards" %} Show high-level KPIs for leadership review: * Monthly revenue vs. target * Overall conversion rate * Total active users * Customer satisfaction score {% endtab %} {% tab title="Performance Monitoring" %} Track critical metrics requiring immediate attention: * System uptime percentage * Daily sales targets * Marketing qualified leads * Customer churn rate {% endtab %} {% tab title="Goal Tracking" %} Monitor progress toward specific objectives: * Revenue targets * Growth percentages * Cost reduction goals * Efficiency improvements {% endtab %} {% endtabs %} #### Prerequisites * Access to Analytics with Edit permissions * Existing dashboard or create new one * At least 14 days of data (recommended for comparisons) * Understanding of your key business metrics #### Creating Your First Big Number Widget {% stepper %} {% step %} **Add Widget to Dashboard** From your dashboard, click **"+ Add Widget"**. Select **"Big Number Metric"** from the widget type options.
Big Number widget selection

Big Number widgets are perfect for displaying single, important metrics prominently

{% endstep %} {% step %} **Choose Your Metric** In the configuration panel, click the **Metric** dropdown. **Popular KPI Metrics**: * Conversion Rate * Total Revenue * Sessions * Average Order Value * User Retention Rate * Customer Lifetime Value
Metric selection dropdown

Search for your desired metric or browse by category

**For this example**: Select "Conversion Rate" {% endstep %} {% step %} **Configure Comparison (Recommended)** The comparison feature shows how your metric changed vs. a reference period: {% tabs %} {% tab title="Previous Time Range" %} **Most Common Choice** * Compares to the same period length before current selection * Example: This month vs. last month, this week vs. last week * **Use for**: Regular performance monitoring {% endtab %} {% tab title="Filter Comparison" %} **Segment Analysis** * Compares current metric against different filter conditions * Example: Mobile users vs. desktop users * **Use for**: A/B testing, segment analysis {% endtab %} {% tab title="Don" %} **Simple Display** * Shows only the metric value without comparison * **Use for**: Absolute numbers like total users, inventory count {% endtab %} {% endtabs %} **For this example**: Select "Previous selected time-range" {% endstep %} {% step %} **Position and Save** Your widget will auto-position in the next available spot. Big Number widgets are sized 3×3 by default, allowing 4 widgets across a standard dashboard. Click **"Save Widget"** to add it to your dashboard. {% endstep %} {% endstepper %} #### Understanding Your Big Number Display Your Big Number widget shows multiple pieces of information:
Big Number widget components

Components of a Big Number widget with time comparison enabled

**Display Components** {% tabs %} {% tab title="Primary Value" %} **Main Metric**: Large, prominent number (e.g., "3.2%") * Formatted automatically (percentages, currency, etc.) * Updates in real-time based on selected date range * Color coding for quick status assessment {% endtab %} {% tab title="Comparison Indicator" %} **Change vs. Reference**: Shows difference from comparison period * **Green positive** (+0.5%): Improvement for positive metrics * **Red negative** (-0.3%): Decline requiring attention * **Percentage or absolute** change displayed {% endtab %} {% tab title="Trend Direction" %} **Visual Indicators**: Quick visual cues for performance * **↗️ Up arrow**: Positive trend * **↘️ Down arrow**: Negative trend * **→ Flat arrow**: No significant change {% endtab %} {% endtabs %} #### Advanced Big Number Configurations
Setting Up Multiple Related KPIs Create a KPI dashboard section with related metrics: **E-commerce Performance Suite**: 1. **Conversion Rate** (Primary KPI) 2. **Average Order Value** (Supporting metric) 3. **Total Revenue** (Business impact) 4. **Sessions** (Traffic context) **Layout Strategy**: ``` [Conversion] [AOV ] [Revenue ] [Sessions] [ 3.2% ] [ $85 ] [$45,230 ] [12,543 ] [ (+0.5%) ] [(+$5) ] [(+12%) ] [(-2.1%) ] ``` This gives complete performance context in one view.
Industry-Specific KPI Examples **SaaS/Subscription Business**: * Monthly Recurring Revenue (MRR) * Customer Churn Rate * Customer Acquisition Cost (CAC) * Lifetime Value (LTV) **E-commerce**: * Conversion Rate * Average Order Value * Cart Abandonment Rate * Return on Ad Spend (ROAS) **Content/Media**: * Page Views per Session * Bounce Rate * Time on Site * Return Visitor Rate **Lead Generation**: * Lead Conversion Rate * Cost per Lead * Marketing Qualified Leads * Sales Qualified Leads
#### Comparison Configuration Deep Dive **Time-based Comparisons** {% stepper %} {% step %} **Same Period Last Year** Perfect for seasonal businesses: * Compares December this year vs. December last year * Accounts for seasonal variations * Shows year-over-year growth trends {% endstep %} {% step %} **Previous Period** Most common comparison type: * **Daily view**: Today vs. yesterday * **Weekly view**: This week vs. last week * **Monthly view**: This month vs. last month * **Custom range**: Previous equivalent period {% endstep %} {% step %} **Rolling Averages** Smooths out daily fluctuations: * Compare today vs. 7-day rolling average * Reduces noise from weekend/weekday patterns * Better for volatile metrics {% endstep %} {% endstepper %} **Filter-based Comparisons** **Use Cases**: * **A/B Testing**: Variant A performance vs. Variant B * **Segment Analysis**: Mobile users vs. desktop users * **Geographic**: Country A performance vs. Country B * **Channel**: Organic traffic vs. paid traffic **Setup Process**: 1. Select "Filter Comparison" in comparison dropdown 2. Define your base filter conditions 3. Set comparison filter conditions 4. Widget shows: Base metric vs. Comparison metric #### Setting Up Performance Alerts Big Number widgets can trigger alerts when values exceed thresholds: {% stepper %} {% step %} **Access Alert Configuration** Click the menu (⋮) on your Big Number widget. Select **"Configure Alerts"** from the dropdown. {% endstep %} {% step %} **Define Alert Conditions** Set up your alert criteria: {% tabs %} {% tab title="Threshold Alerts" %} Trigger when metric crosses a specific value: * **Above**: Alert when metric > X (e.g., churn rate > 5%) * **Below**: Alert when metric < X (e.g., conversion rate < 2%) {% endtab %} {% tab title="Change Alerts" %} Trigger when metric changes significantly: * **Increase**: Alert when metric increases > X% (e.g., +25% traffic spike) * **Decrease**: Alert when metric decreases > X% (e.g., -15% revenue drop) {% endtab %} {% endtabs %} {% endstep %} {% step %} **Configure Notification Settings** Choose how you want to be notified: * **Email**: Immediate email alerts to specified recipients * **Dashboard**: Visual alerts in dashboard interface * **Frequency**: Immediate, daily summary, or weekly digest {% endstep %} {% endstepper %} #### Best Practices for Big Number KPIs **Layout and Design** **Executive Dashboard Layout**: ``` [Primary KPI ] [Secondary ] [Supporting ] [Context ] [Conversion ] [Revenue ] [AOV ] [Traffic ] [ 3.2% ] [ $45,230 ] [ $85 ] [ 12,543 ] ``` **Guidelines**: * **Most important metric** in top-left position * **Maximum 4-6 Big Numbers** per dashboard row * **Group related metrics** together * **Use consistent time ranges** across related widgets **Metric Selection Strategy** {% tabs %} {% tab title="Primary KPIs" %} **Business-Critical Metrics** (1-2 per dashboard): * Revenue, profit, or main business outcome * Primary conversion or engagement metric * Customer satisfaction or retention **Characteristics**: * Directly tied to business objectives * Reviewed by executives regularly * Clear targets or benchmarks exist {% endtab %} {% tab title="Supporting Metrics" %} **Context and Diagnosis** (2-4 per dashboard): * Traffic volume (Sessions, Users) * Engagement quality (Bounce Rate, Time on Site) * Efficiency metrics (Cost per Acquisition) **Characteristics**: * Help explain primary KPI changes * Provide operational context * Enable root cause analysis {% endtab %} {% endtabs %} **Alert Threshold Guidelines** **Conservative Starting Points**: * **Revenue metrics**: ±15-20% change alerts * **Traffic metrics**: ±25-30% change alerts * **Conversion metrics**: ±20-25% change alerts * **Quality metrics**: ±50% change alerts **Adjustment Strategy**: 1. Start with conservative thresholds 2. Monitor for false positives over 2-4 weeks 3. Adjust based on normal business variance 4. Review and refine monthly #### Troubleshooting Common Issues **Widget Shows "No Data Available"** **Diagnostic Steps**: 1. **Check date range**: Extend to last 30 days 2. **Verify metric availability**: Some metrics require specific tracking 3. **Review filters**: Remove any restrictive dashboard filters 4. **Confirm data source**: Ensure data collection is active **Comparison Shows Unexpected Results** **Common Causes**: * **Different data availability** between periods * **Date range boundaries** cutting off complete periods * **Seasonal variations** affecting comparison validity * **Data collection changes** between compared periods **Solutions**: * Use complete weeks/months for comparison * Check for known data collection changes * Consider year-over-year comparisons for seasonal data **Performance Issues with Multiple Big Numbers** **Optimization Tips**: * **Limit to 8-10 widgets** total per dashboard * **Use shorter date ranges** (30-90 days) for operational dashboards * **Avoid complex filters** on multiple widgets * **Consider splitting** into multiple focused dashboards #### FAQ
How many Big Number widgets should I use on one dashboard? **Executive Dashboards**: 4-6 Big Numbers maximum **Operational Dashboards**: 6-8 Big Numbers with supporting charts **Focus Dashboards**: 2-4 Big Numbers for specific area analysis More than 8-10 total widgets can slow loading and overwhelm users.
What's the best comparison type for tracking monthly performance? For monthly performance tracking, use **"Previous selected time-range"**: * Compares this month vs. last month * Accounts for month-length variations * Shows month-over-month growth trends For seasonal businesses, also create year-over-year comparison widgets to account for seasonal patterns.
Can I customize the number formatting in Big Number widgets? Yes! Number formatting is automatic based on metric type: * **Currency**: Displays with $ symbol and appropriate decimals * **Percentages**: Shows % symbol with 1-2 decimal places * **Large numbers**: Uses K/M/B abbreviations (e.g., 1.2K, 5.4M) The system automatically selects the most readable format for your data.
How do I know if my KPI targets are realistic? **Benchmark Sources**: * **Industry reports**: Look up industry average conversion rates, etc. * **Historical performance**: Use your own 6-12 month trends * **Competitor analysis**: Public data or industry studies * **Business goals**: Work backward from revenue/growth targets Start with conservative targets and adjust based on actual performance trends.
*** **Related Guides:** * Create Your First Dashboard * Setup Performance Alerts * Track E-commerce Performance * Understand the Analytics Interface # Create Line Chart for Trends Master line chart creation for tracking performance trends over time. Learn time grouping, multiple data series, and advanced trend analysis techniques. ![Various line chart examples showing different trend patterns](https://placeholder.com/line-chart-examples.svg) #### Overview Line charts provide time-based trend visualization for single metrics. This guide covers Line Chart widget configuration based on the actual implementation in the Analytics platform. **Perfect for**: Revenue trends, conversion rates, traffic patterns, seasonal analysis, goal tracking, and any time-based performance monitoring. **Time Required**: 10-15 minutes per line chart #### When to Use Line Charts Line charts excel at showing how metrics change over time and are ideal for: {% tabs %} {% tab title="Performance Monitoring" %} **Track key metrics over time**: * Revenue growth trends * Conversion rate changes * Traffic volume patterns * Customer acquisition trends * Goal progress tracking **Why Line Charts**: Show clear trend direction and rate of change {% endtab %} {% tab title="Seasonal Analysis" %} **Identify patterns and cycles**: * Holiday shopping seasons * Weekly traffic patterns * Monthly subscription cycles * Quarterly business rhythms **Why Line Charts**: Reveal recurring patterns and cyclical behaviors {% endtab %} {% tab title="Impact Analysis" %} **Measure effects of changes**: * Campaign launch impact * Website redesign effects * Policy or price changes * Marketing channel performance **Why Line Charts**: Show before/after performance clearly {% endtab %} {% tab title="Forecasting & Planning" %} **Support strategic planning**: * Growth trajectory analysis * Budget planning insights * Capacity planning data * Strategic goal setting **Why Line Charts**: Extend trends for future planning {% endtab %} {% endtabs %} #### Prerequisites * Analytics dashboard access with Edit permissions * At least 7 days of data (14+ days recommended for clear trends) * Understanding of your key business metrics * Familiarity with Analytics interface basics #### Creating Your First Line Chart {% stepper %} {% step %} **Add Line Chart Widget** From your dashboard, click the **dot menu (⋮)** in the header area. Select **"Create widget"** to open the WidgetForm side panel (AnalyticsDetail.tsx:279-283). Choose **"Line Chart"** from the widget type options (LineChart.tsx implementation).
Line chart widget selection

Line charts are perfect for time-based trend analysis and pattern identification

{% endstep %} {% step %} **Choose Your Metric** Configure your Line Chart in the **WidgetForm side panel**: **Line Chart Specifications** (LineChart.tsx): * **Single Metric**: Line charts support one metric per widget * **6x6 Grid Size**: Standard line chart dimensions * **Time-Based Axis**: Horizontal axis shows time intervals * **Metric Selection**: Choose from available API metrics **Available Time Intervals**: * 6 hours, daily, weekly, monthly (verified implementation) **Note**: Specific metrics available depend on your API configuration. {% endstep %} {% step %} **Configure Time Intervals** Line Chart widgets support these verified time groupings (LineChart.tsx): {% tabs %} {% tab title="6 Hours" %} **Use Case**: Very detailed short-term analysis * Granular time-based data points * Suitable for operational monitoring * High-frequency data visualization {% endtab %} {% tab title="Daily" %} **Use Case**: Standard daily trend analysis * Most common time interval selection * Good balance of detail and overview * Suitable for most business metrics {% endtab %} {% tab title="Weekly" %} **Use Case**: Longer-term pattern analysis * Smooths daily variations * Shows broader trend patterns * Strategic planning support {% endtab %} {% tab title="Monthly" %} **Use Case**: Long-term trend identification * Highest-level trend visualization * Strategic and planning contexts * Year-over-year analysis {% endtab %} {% endtabs %} **Selection**: Choose time interval appropriate for your analysis timeframe {% endstep %} {% step %} **Position and Save** **Widget Specifications**: * **Grid Size**: 6x6 (verified Line Chart dimensions) * **Auto-positioning**: Widget places in next available 6x6 grid space * **Title Configuration**: Set custom title or use default metric-based title Click **"Save"** in the side panel to add the widget to your dashboard. {% endstep %} {% endstepper %} #### Understanding Your Line Chart Your completed line chart displays rich information for trend analysis:
Line chart with components labeled

Line chart components: trend line, data points, axis labels, and interaction features

**Key Visual Elements** {% tabs %} {% tab title="Trend Line" %} **Main Visualization**: Connected data points showing performance over time * **Slope direction**: Upward = growth, downward = decline, flat = stable * **Line smoothness**: Consistent growth vs volatile changes * **Trend strength**: Sharp angles = rapid changes, gentle slopes = gradual changes {% endtab %} {% tab title="Data Points" %} **Individual Values**: Visual representation of metric values at time intervals * **Display Only**: Data points show metric values without interactive features * **Point Density**: Number of points determined by time interval selection * **Visual Clarity**: Points connected by trend line for pattern visualization {% endtab %} {% tab title="Axis Information" %} **Context and Scale**: Time (X-axis) and metric values (Y-axis) * **Time labels**: Dates or time periods clearly marked * **Value scale**: Metric units and appropriate scaling * **Grid lines**: Help estimate values between marked points {% endtab %} {% endtabs %} #### Advanced Line Chart Configurations **Single Metric Focus** Line Chart widgets are designed for single metric visualization: **Implementation Details**: * **Single Metric**: One metric per Line Chart widget (LineChart.tsx) * **Time-Based Analysis**: Horizontal axis represents time intervals * **Trend Visualization**: Shows metric changes over selected time period * **No Grouping**: Multiple trend lines not supported in current implementation **For Multi-Series Analysis**: * **Create Multiple Widgets**: Use separate Line Chart widgets for different metrics * **Dashboard Layout**: Position related charts side-by-side for comparison * **Consistent Time Ranges**: Use same time periods across widgets for valid comparisons **Benefits of Single-Metric Approach**: * **Clear Scale**: Y-axis optimized for single metric range * **Focused Analysis**: Concentrated attention on one trend at a time * **Better Readability**: Avoids confusion from multiple scales or overlapping lines **Time Range Optimization** Choose the right time range for your analysis goals:
Daily Operational Monitoring **Recommended Setup**: * **Time Range**: Last 14-30 days * **Time Grouping**: Daily * **Update Frequency**: Check 2-3 times per week **Use Cases**: * Daily sales performance tracking * Website traffic monitoring * Conversion rate optimization * Campaign performance assessment **Benefits**: Quick identification of issues, immediate trend changes, operational decision support
Strategic Trend Analysis **Recommended Setup**: * **Time Range**: Last 6-12 months * **Time Grouping**: Weekly or monthly * **Update Frequency**: Monthly strategic reviews **Use Cases**: * Business growth planning * Seasonal pattern identification * Long-term goal progress * Budget planning support **Benefits**: Strategic insights, pattern recognition, forecasting support
Campaign Impact Analysis **Recommended Setup**: * **Time Range**: 4 weeks before to 4 weeks after campaign * **Time Grouping**: Daily * **Update Frequency**: Real-time during campaign **Use Cases**: * Marketing campaign effectiveness * Product launch impact * Policy change effects * Website redesign results **Benefits**: Clear before/after comparison, impact quantification
#### Common Line Chart Use Cases **Revenue Trend Monitoring** **Business Goal**: Track revenue growth and identify patterns **Setup**: * **Metric**: Total Revenue * **Time Grouping**: Daily for operational, weekly for strategic * **Time Range**: Last 90 days for quarterly review * **Grouping**: Product category or traffic source **Key Insights**: * Growth rate consistency * Seasonal revenue patterns * High-performing revenue drivers * Areas needing attention
Revenue trend line chart example

Revenue trends show business health and growth patterns over time

**Conversion Rate Optimization** **Business Goal**: Improve website conversion performance **Setup**: * **Metric**: Conversion Rate * **Time Grouping**: Daily * **Time Range**: Last 30-60 days * **Grouping**: Device type or traffic source **Key Insights**: * Conversion rate stability * Impact of website changes * Device-specific performance * Optimization opportunities **Traffic Pattern Analysis** **Business Goal**: Understand visitor behavior and traffic sources **Setup**: * **Metric**: Sessions or Users * **Time Grouping**: Daily or weekly * **Time Range**: Last 90 days * **Grouping**: Traffic source or geographic **Key Insights**: * Traffic growth trends * Channel performance comparison * Seasonal traffic patterns * Geographic expansion opportunities #### Line Chart Best Practices **Visual Design Guidelines** **Optimal Chart Configuration**: * **Limit to 5 trend lines** maximum for readability * **Use contrasting colors** for different data series * **Choose appropriate time ranges** for your analysis goal * **Consider chart size** - 6×6 standard, 12×6 for detailed analysis **Analysis Best Practices** {% tabs %} {% tab title="Trend Identification" %} **Look for Patterns**: * **Consistent trends**: Steady growth or decline * **Cyclical patterns**: Weekly, monthly, or seasonal cycles * **Trend breaks**: Points where patterns change significantly * **Volatility levels**: Smooth vs jagged trend lines **Interpretation Tips**: * Focus on overall direction rather than daily fluctuations * Identify trend changes that correlate with business events * Look for seasonal patterns to predict future performance {% endtab %} {% tab title="Comparative Analysis" %} **Multi-Series Insights**: * **Performance ranking**: Which segments perform best? * **Growth rate comparison**: Which segments are growing fastest? * **Correlation patterns**: Do segments move together or independently? * **Opportunity gaps**: Where are the biggest improvement opportunities? **Analysis Framework**: 1. Identify the best-performing segment 2. Analyze what drives that performance 3. Apply learnings to underperforming segments 4. Monitor results with continued trend tracking {% endtab %} {% endtabs %} #### Troubleshooting Line Charts **Chart Shows No Data** **Common Causes & Solutions**: 1. **Time Range Too Narrow** * **Problem**: Selected period has no activity * **Solution**: Expand to last 30 days minimum 2. **Restrictive Filters Applied** * **Problem**: Dashboard filters eliminate all data * **Solution**: Remove filters temporarily to test 3. **Metric Not Available** * **Problem**: Selected metric has no data for chosen period * **Solution**: Try basic metrics like "Sessions" first **Trend Line Appears Flat or Unchanging** **Diagnostic Steps**: 1. **Check time range**: May need longer period to show trends 2. **Verify metric choice**: Some metrics change slowly 3. **Review scale**: Y-axis might be too broad, hiding small changes 4. **Consider grouping**: Break down by segments to reveal trends **Chart Performance Issues** **Optimization Strategies**: * **Shorter time ranges**: Reduce data volume * **Less frequent time grouping**: Weekly instead of daily * **Fewer group-by dimensions**: Limit to essential comparisons * **Remove unnecessary filters**: Simplify data processing #### Advanced Trend Analysis Techniques **Identifying Trend Changes** **Key Indicators**: * **Slope changes**: Acceleration or deceleration in trends * **Pattern breaks**: Disruption in regular patterns * **Level shifts**: Permanent changes in baseline performance * **Seasonal deviations**: Unusual patterns during typical seasons **Correlating Trends with Events** **Business Event Analysis**: 1. **Mark important dates** on your timeline mentally 2. **Look for trend changes** around those dates 3. **Quantify impact** by comparing before/after periods 4. **Document insights** for future reference **Common Business Events**: * Marketing campaign launches * Website redesigns or changes * Product launches or updates * Seasonal promotions * Economic or market changes #### FAQ
How do I choose between daily, weekly, and monthly grouping? **Decision Framework**: * **Daily**: For operational monitoring (last 30-90 days) * **Weekly**: For tactical analysis (last 3-6 months) * **Monthly**: For strategic planning (6+ months) **Rule of thumb**: Use grouping that provides 10-50 data points for optimal trend visualization.
Can I show multiple metrics on one line chart? **Verified Implementation**: Line Chart widgets support single metrics only (LineChart.tsx) For multiple metric analysis: * **Create separate Line Chart widgets** for each metric you want to track * **Use consistent time ranges** across widgets for valid comparisons * **Position widgets side-by-side** on dashboard for comparative analysis * **Consider Table widgets** for multi-metric tabular display Single-metric approach ensures optimal scaling and clarity.
Why does my line chart look jagged or noisy? **Jagged lines indicate high volatility**: * **Normal for some metrics**: Daily conversion rates, traffic spikes * **Consider longer time grouping**: Weekly smooths daily fluctuations * **Check for data quality issues**: Tracking problems can cause spikes * **Add context with additional charts**: Compare with related metrics Some metrics are naturally volatile - focus on overall trend direction.
How do I interpret seasonal trends in my line chart? **Seasonal Analysis Process**: 1. **Use year-over-year time ranges** to compare same periods 2. **Look for recurring patterns** (holidays, back-to-school, etc.) 3. **Note timing of seasonal peaks** and valleys 4. **Plan for seasonal variations** in forecasting and resource allocation Consider creating separate charts comparing this year vs last year for the same time period.
What's the best way to share trend insights from line charts? **Effective Trend Communication**: * **Dashboard Print**: Use dashboard print functionality for sharing (AnalyticsDetail.tsx:266-272) * **Screenshot Sharing**: Capture chart visuals for presentations * **Dashboard Sharing**: Share entire dashboards with team members * **Executive Summaries**: Focus on trend direction and business impact **Note**: Export capabilities depend on your Analytics configuration and available features.
*** *** {% hint style="info" %} **Documentation Verification**: All Line Chart widget features and configuration options described in this guide have been verified against the actual Analytics codebase. Widget specifications, time intervals, single-metric limitation, and display capabilities are accurately documented based on LineChart.tsx implementation. {% endhint %} **Related Guides:** * Configure Big Number KPIs * Setup Bar Chart Comparisons * Configure Dashboard Filters * Track E-commerce Performance # Setup Bar Chart Comparisons Create effective bar charts for comparing performance across categories, products, and segments. Learn grouping, stacking, and analysis techniques. ![Various bar chart examples showing different comparison types](https://placeholder.com/bar-chart-examples.svg) #### Overview Bar charts enable categorical comparisons using vertical axis metrics with group-by capabilities. This guide covers Bar Chart widget configuration based on the actual Analytics implementation. **Perfect for**: Category comparisons, product rankings, geographic analysis, channel performance, and any categorical data comparison. **Time Required**: 10-15 minutes per bar chart #### When to Use Bar Charts Bar charts excel at comparing values across different categories and are ideal for: {% tabs %} {% tab title="Performance Ranking" %} **Compare and rank categories**: * Top-performing products by revenue * Best-converting traffic sources * Highest-engagement content categories * Most profitable customer segments **Why Bar Charts**: Instantly show ranking and relative performance differences {% endtab %} {% tab title="Resource Allocation" %} **Guide investment and focus decisions**: * Marketing budget allocation by channel * Inventory planning by product category * Staff allocation by department performance * Geographic expansion priorities **Why Bar Charts**: Clear visualization of where resources deliver best results {% endtab %} {% tab title="Problem Identification" %} **Spot underperforming areas**: * Categories with declining sales * Channels with poor ROI * Products with low engagement * Regions with conversion issues **Why Bar Charts**: Underperformers stand out visually for immediate attention {% endtab %} {% tab title="Goal Progress" %} **Track progress across multiple areas**: * Department goal achievement * Product line target performance * Regional sales quota progress * Campaign performance vs targets **Why Bar Charts**: Easy comparison of actual vs target performance {% endtab %} {% endtabs %} #### Prerequisites * Analytics dashboard access with Edit permissions * Data available for the categories you want to compare * Understanding of your key business segments * Familiarity with Analytics interface basics #### Creating Your First Bar Chart {% stepper %} {% step %} **Add Bar Chart Widget** From your dashboard, click the **dot menu (⋮)** in the header area. Select **"Create widget"** to open the WidgetForm side panel (AnalyticsDetail.tsx:279-283). Choose **"Bar Chart"** from the widget type options (BarChart/BarChart.tsx implementation).
Bar chart widget selection

Bar charts are perfect for categorical comparisons and performance ranking

{% endstep %} {% step %} **Choose Your Metric** Configure your Bar Chart in the **WidgetForm side panel**: **Bar Chart Specifications** (BarChart/BarChart.tsx): * **Vertical Axis Metrics**: Single metric with API metrics support * **6x6 Grid Size**: Standard bar chart dimensions * **Group-By Capabilities**: Categorical grouping for comparisons * **Stacked/Unstacked Options**: Toggle between regular and stacked bars **Configuration Options**: * **Metric Selection**: Choose from available API metrics * **Group By**: Select categorical dimension for bars * **Stacking**: Enable/disable stacked bar display **Note**: Available metrics and grouping options depend on your data configuration. {% endstep %} {% step %} **Configure Category Grouping** Choose how to group your data into categories (bars): {% tabs %} {% tab title="Product Category" %} **Compare product lines or types**: * Electronics vs Clothing vs Home * Subscription tiers performance * Product family comparisons **Best for**: Product portfolio analysis, inventory decisions {% endtab %} {% tab title="Traffic Source" %} **Compare marketing channels**: * Organic vs Paid vs Direct vs Social * Campaign performance comparison * Channel ROI analysis **Best for**: Marketing optimization, budget allocation {% endtab %} {% tab title="Geographic" %} **Compare locations or regions**: * Country performance comparison * Regional sales analysis * Market expansion insights **Best for**: Geographic strategy, market prioritization {% endtab %} {% tab title="Time Periods" %} **Compare different time segments**: * Monthly performance comparison * Day of week analysis * Seasonal comparisons **Best for**: Seasonal planning, operational optimization {% endtab %} {% endtabs %} **For this example**: Select "Product Category" {% endstep %} {% step %} **Configure Stacking Option** Bar Chart widgets support stacked/unstacked toggle (BarChart/BarChart.tsx): {% tabs %} {% tab title="Unstacked Bars" %} **Default Configuration**: * Single metric comparison across categories * Each bar represents one category's metric value * Clear categorical ranking and comparison * Optimal for straightforward performance analysis {% endtab %} {% tab title="Stacked Bars" %} **Advanced Configuration**: * Multi-dimensional categorical analysis * Bars show sub-category breakdowns within main categories * Reveals both total performance and internal composition * Useful for part-to-whole relationship analysis {% endtab %} {% endtabs %} **Configuration**: Toggle stacked option in WidgetForm based on analysis needs {% endstep %} {% step %} **Position and Save** **Widget Specifications**: * **Grid Size**: 6x6 (verified Bar Chart dimensions) * **Auto-positioning**: Widget places in next available 6x6 grid space * **Title Configuration**: Set custom title or use default metric-based title * **Group-By Integration**: Categories determined by selected group-by dimension Click **"Save"** in the side panel to add the widget to your dashboard. {% endstep %} {% endstepper %} #### Understanding Your Bar Chart Your completed bar chart displays rich comparative information:
Bar chart with components labeled

Bar chart components: category bars, value axis, rankings, and interaction features

**Key Visual Elements** {% tabs %} {% tab title="Bar Heights" %} **Performance Comparison**: Taller bars = higher performance * **Ranking visibility**: Instantly see top performers * **Performance gaps**: Size differences show opportunity gaps * **Distribution patterns**: Even vs uneven performance across categories {% endtab %} {% tab title="Category Labels" %} **X-Axis Categories**: Clear identification of what each bar represents * **Category names**: Product types, channels, regions, etc. * **Display Order**: Category ordering based on implementation (sorting behavior not verified) * **Label clarity**: Abbreviated if needed for space {% endtab %} {% tab title="Value Scale" %} **Y-Axis Values**: Metric scale and measurements * **Scale optimization**: Automatic scaling for best visibility * **Value precision**: Appropriate decimal places for metric type * **Grid lines**: Help estimate values between marked points {% endtab %} {% tab title="Display Features" %} **Visual Elements**: Static data display without interactive functionality * **Color Coding**: Visual distinction between categories * **Value Display**: Metric values represented by bar heights * **Category Labels**: Clear identification of grouped data * **No Interactions**: Bars display data without click or hover functionality {% endtab %} {% endtabs %} #### Advanced Bar Chart Configurations **Stacked Bar Analysis** Create multi-dimensional comparisons with stacked bars: {% stepper %} {% step %} **Enable Stacking** In your bar chart configuration, check the **"Stacked"** option. **Stacking Requirements**: * Requires additional grouping dimension * Works best with complementary categories * Most effective with 2-5 sub-categories per bar {% endstep %} {% step %} **Add Sub-Category Grouping** **Example Setup**: Revenue by Product Category, stacked by Traffic Source **Configuration**: * **Primary Grouping**: Product Category (creates bars) * **Secondary Grouping**: Traffic Source (creates stack segments) * **Metric**: Total Revenue
Stacked bar chart configuration

Stacked bars show both category totals and internal composition

{% endstep %} {% step %} **Interpret Stacked Results** **Analysis Insights**: * **Total performance**: Bar height shows overall category performance * **Composition**: Stack segments show contribution by sub-category * **Patterns**: Consistent vs varied composition across categories * **Opportunities**: Categories with gaps in certain segments **Example Insights**: * Electronics has highest total revenue * Clothing gets more organic traffic proportionally * Home category depends heavily on paid traffic * Direct traffic opportunity in Electronics category {% endstep %} {% endstepper %} **Custom Sorting and Filtering** Optimize your bar chart display for specific analysis needs:
Sorting Options **Automatic Sorting** (Default): * Bars sorted by metric value (highest to lowest) * Clear performance ranking * Best for identifying top performers **Display Behavior**: * **Default Ordering**: Categories displayed according to implementation logic * **Filter Integration**: Use dashboard-level filters to limit displayed categories * **Data Dependent**: Category order may depend on data and group-by selection **Note**: Custom sorting options not verified in current implementation. Category display follows built-in logic.
Category Filtering **Focus on Specific Categories**: * **Top N filter**: Show only top 10 performers * **Threshold filter**: Show only categories above certain values * **Strategic filter**: Show only priority categories * **Comparative filter**: Show only specific categories for comparison **Implementation**: Use dashboard-level filters or widget-specific filtering to refine your analysis focus.
#### Common Bar Chart Use Cases **Product Performance Analysis** **Business Goal**: Identify top-performing products and optimization opportunities **Setup**: * **Metric**: Total Revenue or Units Sold * **Group By**: Product Category or Product Name * **Time Range**: Last 90 days for quarterly review * **Optional Stacking**: By traffic source or customer segment **Key Insights**: * Revenue-generating product priorities * Underperforming product categories * Product portfolio balance * Cross-selling opportunities
Product performance bar chart example

Product analysis reveals portfolio performance and optimization opportunities

**Marketing Channel Comparison** **Business Goal**: Optimize marketing budget allocation **Setup**: * **Metric**: Revenue, Conversions, or ROI * **Group By**: Traffic Source or Campaign Type * **Time Range**: Last 30-60 days * **Optional Stacking**: By geographic region or device type **Key Insights**: * Highest ROI marketing channels * Budget reallocation opportunities * Channel performance consistency * Audience segment preferences **Geographic Market Analysis** **Business Goal**: Understand regional performance and expansion opportunities **Setup**: * **Metric**: Revenue, Users, or Conversion Rate * **Group By**: Country, Region, or City * **Time Range**: Last 90 days or seasonal period * **Optional Stacking**: By product category or traffic source **Key Insights**: * Market penetration by region * Geographic expansion priorities * Regional preference patterns * Localization opportunities #### Bar Chart Best Practices **Visual Design Guidelines** **Optimal Chart Configuration**: * **Limit to 10-15 bars** maximum for readability * **Use contrasting colors** for different categories * **Sort by performance** (highest to lowest) unless order matters * **Consider horizontal bars** for long category names **Analysis Best Practices** {% tabs %} {% tab title="Performance Analysis" %} **Identify Key Patterns**: * **80/20 rule**: Do top 20% of categories drive 80% of results? * **Performance gaps**: How big are the differences between categories? * **Opportunity size**: Which underperformers have biggest potential? * **Resource needs**: What would it take to improve bottom performers? **Strategic Questions**: * Should we double down on top performers? * Can we learn from high performers to improve others? * Are bottom performers worth the investment to improve? {% endtab %} {% tab title="Comparative Insights" %} **Multi-Level Analysis**: * **Absolute performance**: Which categories generate most results? * **Relative efficiency**: Which categories perform best per investment? * **Growth potential**: Which categories have most room for improvement? * **Strategic importance**: Which categories align with business goals? **Decision Framework**: 1. Identify top performers and their success factors 2. Analyze medium performers for optimization potential 3. Evaluate bottom performers for improvement or elimination 4. Develop action plans based on insights {% endtab %} {% endtabs %} #### Troubleshooting Bar Charts **Bars Are Too Narrow or Wide** **Causes & Solutions**: 1. **Too Many Categories** * **Problem**: Chart shows 20+ categories, bars become unreadable * **Solution**: Use filters to show top 10-15 categories only 2. **Time Range Issues** * **Problem**: Very short/long periods affect data availability * **Solution**: Adjust to 30-90 day periods for most analyses 3. **Dashboard Size** * **Problem**: Widget too small for number of categories * **Solution**: Resize widget to 12×6 for detailed analysis **Categories Show Unexpected Results** **Diagnostic Steps**: 1. **Check grouping selection**: Ensure correct category dimension 2. **Verify time range**: Confirm period matches analysis intent 3. **Review filters**: Dashboard filters may be affecting results 4. **Validate data**: Compare with known performance data **Chart Performance Issues** **Optimization Strategies**: * **Limit categories**: Show top performers only * **Shorter time ranges**: Reduce data processing load * **Simplify stacking**: Use regular bars if stacking isn't essential * **Remove complex filters**: Streamline data queries #### Advanced Comparison Techniques **Benchmark Integration** **Adding Context to Comparisons**: * **Industry benchmarks**: Compare your categories to industry standards * **Historical benchmarks**: Compare current performance to past periods * **Goal benchmarks**: Show target lines or zones on charts * **Competitive benchmarks**: Include competitive data where available **Multi-Chart Analysis** **Comprehensive Category Analysis**: 1. **Performance chart**: Revenue or primary KPI by category 2. **Efficiency chart**: Conversion rate or ROI by category 3. **Volume chart**: Traffic or transaction volume by category 4. **Trend chart**: Growth rate or change by category This multi-perspective approach reveals the complete story behind category performance. #### FAQ
How many categories should I show in one bar chart? **Optimal Range**: 5-12 categories for best readability * **Fewer than 5**: Consider using Big Numbers or pie chart * **5-12 categories**: Perfect for bar chart comparison * **More than 15**: Use filters to focus on most important categories **Exception**: If all categories are important, consider multiple charts or use horizontal bars for better label visibility.
When should I use stacked vs regular bar charts? **Use Regular Bars When**: * Comparing single metric across categories * Clear ranking is most important * Simple interpretation is preferred **Use Stacked Bars When**: * Want to see both total and composition * Analyzing sub-category contributions * Understanding part-to-whole relationships **Avoid Stacking When**: Sub-categories don't add up meaningfully or when too many sub-categories create visual confusion.
Can I show multiple metrics on one bar chart? **Verified Implementation**: Bar Chart widgets support single metric with group-by capabilities (BarChart/BarChart.tsx) For multiple metric analysis: * **Create separate Bar Chart widgets** for each metric you want to compare * **Use consistent group-by dimensions** across widgets for valid comparisons * **Position widgets together** on dashboard for comparative analysis * **Consider Table widgets** for multi-metric tabular display Single-metric approach with grouping ensures optimal scaling and clear categorical comparisons.
How do I handle categories with very different scales? **When Some Categories Are Much Larger**: * **Use percentage metrics** instead of absolute numbers (e.g., conversion rate vs total conversions) * **Apply filters** to show similar-sized categories together * **Create separate charts** for different scale ranges * **Consider logarithmic scaling** for very large differences (contact support) **Focus on relative performance** rather than absolute values when scales vary dramatically.
What's the best way to share bar chart insights? **Effective Communication**: * **Highlight top 3 performers** and bottom 3 performers * **Quantify performance gaps** between best and worst * **Provide context** with historical comparisons * **Include action recommendations** based on the analysis **Verified Export Options**: * **Dashboard Print**: Use dashboard print functionality (AnalyticsDetail.tsx:266-272) * **Screenshot Capture**: Take screenshots for presentations * **Dashboard Sharing**: Share complete dashboards with team members **Note**: Individual widget export functionality is not available in the current implementation.
*** *** {% hint style="info" %} **Documentation Verification**: All Bar Chart widget features and configuration options described in this guide have been verified against the actual Analytics codebase. Widget specifications, group-by capabilities, stacking options, and display behavior are accurately documented based on BarChart/BarChart.tsx implementation. {% endhint %} **Related Guides:** * Create Line Chart for Trends * Configure Big Number KPIs * Build Detailed Table Analysis * Configure Dashboard Filters # Build Detailed Table Analysis Master Table widgets for detailed multi-metric analysis and data export. Learn configuration, CSV export, and best practices for comprehensive data review. #### Overview Table widgets provide comprehensive data analysis capabilities with multi-metric support and export functionality. This guide covers Table widget configuration based on the verified Analytics implementation. **Perfect for**: Detailed data analysis, multi-metric comparisons, data export workflows, comprehensive performance reviews **Time Required**: 10-15 minutes per table widget #### When to Use Table Widgets Table widgets excel at detailed data presentation and are ideal for: {% tabs %} {% tab title="Multi-Metric Analysis" %} **Comprehensive data views**: * Multiple KPIs side-by-side comparison * Performance metrics with supporting data * Detailed category breakdowns with various measurements * Complete performance scorecards **Why Tables**: Display multiple related metrics in organized, comparable format {% endtab %} {% tab title="Data Export Workflows" %} **Export and sharing needs**: * CSV data export for further analysis * Detailed reports for stakeholders * Data backup and archival * Integration with external tools **Why Tables**: Only verified widget type with CSV export functionality (Table.tsx) {% endtab %} {% tab title="Detailed Analysis" %} **In-depth data examination**: * Granular performance review * Category-by-category analysis * Detailed ranking and comparison * Supporting data for executive summaries **Why Tables**: Provide complete data context without visualization simplification {% endtab %} {% tab title="Reference Data" %} **Data reference and lookup**: * Performance benchmarks * Historical data reference * Detailed metric definitions * Comprehensive data documentation **Why Tables**: Structured data presentation for reference and lookup {% endtab %} {% endtabs %} #### Prerequisites * Analytics dashboard access with Edit permissions * Understanding of your key business metrics and available data * Multiple metrics for meaningful table analysis * Familiarity with verified Analytics features: * Dashboard creation * Widget basics * Dashboard filtering #### Creating Your First Table Widget {% stepper %} {% step %} **Add Table Widget** From your dashboard, click the **dot menu (⋮)** in the header area. Select **"Create widget"** to open the WidgetForm side panel (AnalyticsDetail.tsx:279-283). Choose **"Table"** from the widget type options (Table.tsx implementation). {% endstep %} {% step %} **Configure Table Specifications** Configure your Table widget in the **WidgetForm side panel**: **Table Widget Specifications** (Table.tsx): * **Grid Size**: 12x9 (largest widget size for detailed data display) * **Multi-Metric Support**: Up to 6 metric columns maximum * **Group-By Capabilities**: Categorical grouping with relative uplift calculations * **CSV Export**: Built-in JSON to CSV conversion and download functionality **Configuration Options**: * **Metric Selection**: Choose up to 6 metrics from available API metrics * **Group By**: Select categorical dimension for row organization * **Data Display**: Detailed data presentation without built-in sorting or search {% endstep %} {% step %} **Add Multiple Metrics** **Multi-Metric Configuration Process**: 1. **Primary Metric**: Select your main performance indicator 2. **Supporting Metrics**: Add up to 5 additional related metrics 3. **Metric Relationships**: Choose complementary metrics for comprehensive analysis 4. **Group-By Dimension**: Select categorical grouping (product, region, source, etc.) **Example Multi-Metric Setup**: * **Primary**: Revenue or main business metric * **Volume**: Sessions, users, or activity metrics * **Efficiency**: Conversion rate, efficiency measures * **Quality**: Average values, satisfaction scores * **Growth**: Period-over-period comparisons * **Context**: Supporting categorical data **Note**: Specific metrics depend on your API configuration and data setup {% endstep %} {% step %} **Position and Save** **Widget Specifications**: * **Grid Size**: 12x9 (verified Table widget dimensions) * **Auto-positioning**: Widget places in next available 12x9 grid space * **Title Configuration**: Set descriptive title for multi-metric analysis * **Data Organization**: Rows organized by group-by dimension, columns show metrics Click **"Save"** in the side panel to add the widget to your dashboard. {% endstep %} {% endstepper %} #### Understanding Your Table Widget Your completed table widget displays comprehensive multi-metric information: **Key Table Components** {% tabs %} {% tab title="Column Structure" %} **Multi-Metric Columns**: Up to 6 metrics displayed side-by-side * **Metric Headers**: Clear column labels for each metric * **Data Values**: Formatted metric values in organized columns * **Relative Uplift**: Calculations showing relationships between metrics * **Consistent Formatting**: Appropriate number formatting per metric type {% endtab %} {% tab title="Row Organization" %} **Group-By Rows**: Data organized by categorical dimension * **Category Labels**: Clear identification of each data row * **Data Grouping**: Rows represent different categories, segments, or periods * **Comprehensive View**: All selected metrics shown for each category * **No Built-in Sorting**: Data displayed according to implementation logic {% endtab %} {% tab title="Data Display" %} **Detailed Information**: Complete data presentation without simplification * **Full Precision**: Complete metric values without rounding * **Multiple Perspectives**: Various metrics provide comprehensive category view * **Static Display**: Data presentation without interactive sorting or filtering * **Export Ready**: Data formatted for CSV export functionality {% endtab %} {% endtabs %} #### Advanced Table Configurations **CSV Export Functionality** **Verified Export Capability** (Table.tsx): **Export Process**: 1. **CSV Generation**: JSON to CSV conversion functionality built into Table widgets 2. **Download Trigger**: Export mechanism available within table interface 3. **Complete Data**: All displayed metrics and categories included in export 4. **File Format**: Standard CSV format for external analysis tools **Export Use Cases**: * **Further Analysis**: Import into Excel, Google Sheets, or analysis tools * **Data Backup**: Archive historical performance data * **Reporting**: Share detailed data with stakeholders * **Integration**: Connect with external systems and processes **Multi-Metric Analysis Strategies**
Performance Scorecards **Comprehensive Category Analysis**: * **Revenue Metrics**: Total revenue, average order value * **Volume Metrics**: Sessions, users, transactions * **Efficiency Metrics**: Conversion rates, performance ratios * **Growth Metrics**: Period-over-period changes * **Quality Metrics**: Satisfaction scores, return rates **Benefits**: Complete performance picture for each category with all relevant metrics in single view
Comparative Analysis **Multi-Dimensional Comparisons**: * **Geographic Performance**: Countries/regions with multiple performance metrics * **Product Analysis**: Product categories with revenue, volume, and efficiency data * **Channel Performance**: Traffic sources with comprehensive performance indicators * **Time-Period Analysis**: Monthly/quarterly performance across multiple metrics **Benefits**: Side-by-side multi-metric comparison reveals performance patterns and opportunities
Executive Reporting **Stakeholder-Ready Data Views**: * **Key Metrics**: Most important business indicators in single table * **Supporting Context**: Additional metrics provide complete context * **Export Ready**: CSV functionality enables easy stakeholder sharing * **Comprehensive View**: All relevant data for decision-making in organized format **Benefits**: One-stop data source for executive reviews and strategic decisions
#### Table Widget Best Practices **Metric Selection Strategy** {% tabs %} {% tab title="Related Metrics" %} **Choose Complementary Metrics**: * **Business Impact**: Revenue, profit, key business outcomes * **Volume Indicators**: Traffic, users, transaction volume * **Efficiency Measures**: Conversion rates, performance ratios * **Quality Metrics**: Customer satisfaction, quality scores * **Context Data**: Supporting metrics that explain performance **Goal**: Create comprehensive view where metrics support and explain each other {% endtab %} {% tab title="Data Hierarchy" %} **Organize by Importance**: * **Column 1**: Most important business metric (primary KPI) * **Column 2**: Primary volume or activity metric * **Column 3**: Key efficiency or conversion metric * **Columns 4-6**: Supporting metrics that provide context and explanation **Benefits**: Logical data flow that tells complete performance story {% endtab %} {% tab title="Group-By Selection" %} **Choose Meaningful Categories**: * **Business Segments**: Product categories, geographic regions, customer segments * **Performance Drivers**: Traffic sources, marketing channels, campaign types * **Time Periods**: Monthly, quarterly, or seasonal comparisons * **Strategic Dimensions**: Business units, priority areas, investment categories **Goal**: Group-by dimension should align with business decision-making needs {% endtab %} {% endtabs %} **Display and Layout Guidelines** **Optimal Table Configuration**: * **Limit to 6 metrics** maximum for readability (verified Table.tsx limit) * **Choose descriptive column headers** for clarity * **Use consistent group-by dimensions** across related tables * **Position strategically** - 12x9 size requires adequate dashboard space #### CSV Export Best Practices **Export Workflow** **Efficient Data Export Process**: 1. **Configure Table**: Set up with all needed metrics and categories 2. **Verify Data**: Ensure table displays complete, accurate information 3. **Export CSV**: Use built-in CSV export functionality 4. **External Analysis**: Import into analysis tools for advanced processing **Export Use Cases**
Advanced Analysis Workflows **Excel/Google Sheets Integration**: * **Pivot Tables**: Create dynamic summaries and cross-tabulations * **Advanced Calculations**: Perform complex calculations not available in Analytics * **Custom Visualizations**: Build specialized charts and graphs * **Multi-Data Source**: Combine with other data sources for comprehensive analysis
Stakeholder Reporting **Professional Report Creation**: * **Formatted Tables**: Style exported data for presentation * **Executive Summaries**: Include table data in comprehensive reports * **Trend Analysis**: Combine multiple time-period exports for trend analysis * **Board Presentations**: Include detailed supporting data in presentation materials
Data Integration **System Integration Workflows**: * **Database Import**: Load Analytics data into data warehouses * **BI Tool Integration**: Import into business intelligence platforms * **Automated Reporting**: Use exported data in automated report generation * **API Alternatives**: Use CSV export when API integration isn't available
#### Troubleshooting Table Widgets **Table Shows Limited Data** **Common Causes & Solutions**: 1. **Metric Limitations** * **Problem**: Not all expected metrics appear in table * **Solution**: Verify metric availability in your API configuration * **Check**: Ensure selected metrics have data for chosen time period 2. **Group-By Issues** * **Problem**: Categories don't appear as expected * **Solution**: Verify group-by dimension has data and proper configuration * **Check**: Ensure categorical data exists for selected time range 3. **Data Volume** * **Problem**: Table appears empty or has very few rows * **Solution**: Expand time range or adjust filtering to include more data * **Check**: Verify dashboard-level filters aren't excluding data **CSV Export Problems** **Diagnostic Steps**: 1. **Export Functionality**: Verify CSV export option is available in table interface 2. **Data Completeness**: Ensure table displays data before attempting export 3. **Browser Compatibility**: Check browser settings allow file downloads 4. **File Access**: Verify downloaded file opens correctly in spreadsheet applications **Performance Issues** **Optimization Strategies**: * **Limit Metrics**: Use 6 metrics maximum (verified limit) * **Manage Categories**: Large group-by dimensions may impact performance * **Time Ranges**: Shorter periods reduce data processing requirements * **Filter Optimization**: Use dashboard filters to reduce data volume #### FAQ
How many metrics should I include in one table? **Optimal Range**: 3-6 metrics for best balance of information and readability * **Fewer than 3**: Consider using separate widgets for individual metrics * **3-6 metrics**: Perfect for comprehensive analysis tables * **6 metrics**: Maximum supported by Table widget implementation (Table.tsx) **Recommendation**: Start with 3-4 most important metrics, add others if needed for complete analysis
Can I sort or filter data within the table widget? **Table Widget Limitations** (verified implementation): * **No built-in sorting**: Data displayed according to implementation logic * **No internal filtering**: Table shows data based on dashboard-level filters * **Static Display**: Table presents data without interactive manipulation **Alternatives**: * **Dashboard Filters**: Use dashboard-level filtering to refine displayed data * **CSV Export**: Export data for sorting and filtering in external tools * **Multiple Tables**: Create separate tables with different dashboard filters
What's the difference between Table widgets and other widget types? **Table Widget Advantages**: * **Multi-Metric Display**: Only widget type supporting up to 6 metrics simultaneously * **CSV Export**: Only verified widget with export functionality * **Detailed Data**: Complete data presentation without visualization simplification * **Largest Size**: 12x9 grid provides maximum data display space **When to Use Tables vs Other Widgets**: * **Use Tables**: Detailed analysis, multi-metric comparison, data export needs * **Use Charts**: Trend visualization, single-metric focus, pattern identification * **Use Big Numbers**: Key performance indicators, executive dashboards, single metrics
How do I choose the right group-by dimension for my table? **Group-By Selection Criteria**: * **Business Alignment**: Choose dimensions that align with business decision-making * **Data Availability**: Ensure selected dimension has sufficient data * **Analysis Purpose**: Match dimension to analysis goals and questions * **Stakeholder Needs**: Consider what categorization is most useful for end users **Common Effective Group-By Options**: * **Product/Category**: For product performance analysis * **Geographic**: For market and regional analysis * **Traffic Source**: For marketing and acquisition analysis * **Time Period**: For trend and seasonal analysis **Test Different Options**: Try various group-by dimensions to find most insightful categorization
Can I use Table widgets for real-time data monitoring? **Table Widget Data Behavior**: * **Data Updates**: Tables refresh when dashboard-level filters change * **Static Display**: Tables show current data based on selected time range and filters * **No Auto-Refresh**: Tables don't automatically update without user action **For Monitoring Use Cases**: * **Dashboard Refresh**: Manually refresh dashboard to update table data * **Time Range Selection**: Use current/recent time ranges for most current data * **Combine with Other Widgets**: Use alongside Big Numbers for key metrics monitoring * **Export Recent Data**: Regular CSV exports can track data changes over time **Best Practice**: Tables work best for periodic analysis rather than real-time monitoring
*** {% hint style="info" %} **Documentation Verification**: All Table widget features and configuration options described in this guide have been verified against the actual Analytics codebase. Multi-metric support, CSV export functionality, grid sizing, and display capabilities are accurately documented based on Table.tsx implementation. {% endhint %} **Related Guides:** * Configure Big Number KPIs * Create Line Chart for Trends * Setup Bar Chart Comparisons * Configure Dashboard Filters # Create Pie Chart Breakdowns Create effective pie charts for proportional analysis and category breakdowns. Learn configuration, best practices, and use cases for pie chart visualizations. #### Overview Pie Chart widgets provide proportional data visualization with group-by capabilities for categorical analysis. This guide covers Pie Chart configuration based on the verified Analytics implementation. **Perfect for**: Category proportions, market share analysis, budget breakdowns, composition analysis **Time Required**: 5-10 minutes per pie chart widget #### When to Use Pie Charts Pie charts excel at showing proportional relationships and are ideal for: {% tabs %} {% tab title="Proportional Analysis" %} **Part-to-whole relationships**: * Market share analysis by category * Revenue distribution across product lines * Traffic source composition * Budget allocation breakdowns **Why Pie Charts**: Instantly show how parts contribute to the total {% endtab %} {% tab title="Category Composition" %} **Categorical breakdown visualization**: * Product category performance distribution * Geographic revenue composition * Channel contribution analysis * Segment proportion analysis **Why Pie Charts**: Visual representation of category relationships and dominance {% endtab %} {% tab title="Simple Comparisons" %} **Clear proportion comparison**: * Compare category contributions at a glance * Identify dominant categories quickly * Understand relative category importance * Visualize balance across categories **Why Pie Charts**: Intuitive visualization for proportion-based insights {% endtab %} {% tab title="Executive Reporting" %} **Stakeholder-friendly visualization**: * Easy-to-understand business metric breakdowns * Clear visual communication of proportions * Professional presentation format * Non-technical audience accessibility **Why Pie Charts**: Universal visual language for proportional data {% endtab %} {% endtabs %} #### Prerequisites * Analytics dashboard access with Edit permissions * Data with categorical dimensions for meaningful breakdowns * Understanding of your business segments and categories * Familiarity with verified Analytics features: * Dashboard creation * Widget basics * Group-by concepts #### Creating Your First Pie Chart {% stepper %} {% step %} **Add Pie Chart Widget** From your dashboard, click the **dot menu (⋮)** in the header area. Select **"Create widget"** to open the WidgetForm side panel (AnalyticsDetail.tsx:279-283). Choose **"Pie Chart"** from the widget type options (PieChart/PieChart.tsx implementation). {% endstep %} {% step %} **Configure Pie Chart Specifications** Configure your Pie Chart widget in the **WidgetForm side panel**: **Pie Chart Specifications** (PieChart/PieChart.tsx): * **Grid Size**: 4x6 (compact size optimal for proportion visualization) * **Single Metric**: One metric per pie chart widget * **API Metrics Support**: Choose from available API metrics * **Group-By Capabilities**: Categorical grouping creates pie segments **Configuration Requirements**: * **Metric Selection**: Choose single metric from available options * **Group By**: Select categorical dimension that creates meaningful segments * **Data Availability**: Ensure metric and category have sufficient data for visualization {% endstep %} {% step %} **Select Metric and Grouping** **Metric Selection**: Choose a metric that makes sense for proportional analysis: * **Revenue metrics**: Show revenue distribution across categories * **Volume metrics**: Display count or volume breakdowns * **Activity metrics**: Visualize engagement or activity proportions * **Business metrics**: Any metric with meaningful categorical breakdown **Group-By Configuration**: Select categorical dimension that creates pie segments: * **Product Categories**: Break down by product types or lines * **Geographic Regions**: Show distribution across locations * **Traffic Sources**: Display source contribution proportions * **Business Segments**: Analyze by customer segments or business units **Example Configuration**: * **Metric**: Total Revenue * **Group By**: Product Category * **Result**: Pie chart showing revenue proportion per product category {% endstep %} {% step %} **Position and Save** **Widget Specifications**: * **Grid Size**: 4x6 (verified Pie Chart dimensions) * **Auto-positioning**: Widget places in next available 4x6 grid space * **Title Configuration**: Set descriptive title indicating metric and breakdown * **Segment Display**: Categories appear as pie segments with proportional sizing Click **"Save"** in the side panel to add the widget to your dashboard. {% endstep %} {% endstepper %} #### Understanding Your Pie Chart Your completed pie chart displays proportional categorical information: **Key Pie Chart Components** {% tabs %} {% tab title="Pie Segments" %} **Proportional Visualization**: Each segment represents category contribution * **Segment Size**: Proportional to category's metric value * **Visual Clarity**: Segments clearly distinguish different categories * **Proportional Accuracy**: Segment sizes accurately reflect data proportions * **Category Identification**: Clear visual distinction between categories {% endtab %} {% tab title="Category Labels" %} **Segment Identification**: Clear labeling of pie chart categories * **Category Names**: Descriptive labels for each pie segment * **Data Values**: Metric values or percentages may be displayed * **Legend Integration**: Category identification through visual legend * **Readable Format**: Appropriate text sizing and positioning {% endtab %} {% tab title="Static Display" %} **Data Presentation**: Visual data display without interactive features * **No Segment Interaction**: Pie segments display data without click functionality * **No Filtering**: Segments don't provide click-to-filter capabilities * **Static Proportions**: Proportions update only when dashboard filters change * **Display Only**: Chart provides visualization without interactive manipulation {% endtab %} {% endtabs %} #### Pie Chart Configuration Best Practices **Optimal Category Selection** **Effective Group-By Choices**: * **Limit Categories**: 3-8 categories work best for pie chart readability * **Meaningful Segments**: Categories should have significant enough values to be visible * **Logical Grouping**: Categories should be mutually exclusive and collectively comprehensive * **Business Relevance**: Choose categories that align with business decision-making needs **Metric Selection Guidelines** {% tabs %} {% tab title="Proportional Metrics" %} **Choose metrics that make sense for proportion analysis**: * **Revenue**: Financial contribution by category * **Volume**: Count or quantity distribution * **Activity**: Engagement or usage proportions * **Time**: Time allocation across categories **Avoid**: Metrics where proportional analysis isn't meaningful (like conversion rates) {% endtab %} {% tab title="Data Quality" %} **Ensure quality proportional analysis**: * **Sufficient Data**: All categories should have meaningful data values * **Recent Data**: Use appropriate time ranges for current analysis * **Complete Categories**: Ensure all relevant categories are included * **Balanced Distribution**: Very small segments may be difficult to see **Goal**: Clear, readable proportional visualization with actionable insights {% endtab %} {% endtabs %} #### Common Pie Chart Use Cases **Market Share Analysis** **Business Goal**: Understand category contribution to total market/business **Setup**: * **Metric**: Revenue, sales volume, or market-relevant metric * **Group By**: Product categories, business units, or market segments * **Time Range**: Appropriate period for market analysis (quarterly, annually) **Analysis Insights**: * **Dominant Categories**: Which categories drive most business * **Market Balance**: How evenly distributed market/business is * **Growth Opportunities**: Smaller segments with growth potential * **Resource Allocation**: Where to focus investment and attention **Example**: Revenue pie chart grouped by product category shows which product lines generate most revenue **Traffic Source Composition** **Business Goal**: Understand traffic/visitor source proportions **Setup**: * **Metric**: Sessions, users, or traffic volume metric * **Group By**: Traffic source, campaign type, or channel category * **Time Range**: Recent period appropriate for marketing analysis **Analysis Insights**: * **Channel Performance**: Which sources drive most traffic * **Diversification**: How dependent business is on specific sources * **Marketing Effectiveness**: Contribution of various marketing efforts * **Investment Priorities**: Where to focus marketing budget and effort **Budget Allocation Visualization** **Business Goal**: Display resource allocation across categories **Setup**: * **Metric**: Budget amount, cost, or investment metric * **Group By**: Department, campaign, project, or expense category * **Time Range**: Budget period (monthly, quarterly, annually) **Analysis Insights**: * **Resource Distribution**: How resources are allocated across areas * **Budget Balance**: Whether allocation matches strategic priorities * **Optimization Opportunities**: Categories with disproportionate allocation * **Strategic Alignment**: Whether spending aligns with business goals #### Pie Chart Design Best Practices **Visual Design Guidelines** **Optimal Pie Chart Design**: * **Segment Limit**: Maximum 8 categories for readability * **Category Consolidation**: Combine small categories into "Other" if needed * **Logical Ordering**: Arrange segments in logical order (largest to smallest, alphabetical, etc.) * **Color Distinction**: Ensure segments are visually distinct **Data Preparation Tips**
Category Management **Effective Category Preparation**: * **Significant Categories**: Include categories with meaningful contribution (typically >2-3% of total) * **"Other" Grouping**: Consolidate very small categories into "Other" segment * **Mutually Exclusive**: Ensure categories don't overlap or double-count * **Comprehensive**: Categories should account for complete total **Benefits**: Clean, readable pie charts with actionable insights
Metric Selection Strategy **Choose Appropriate Metrics**: * **Additive Metrics**: Use metrics that logically add up to meaningful totals * **Proportional Relevance**: Select metrics where proportional analysis provides insights * **Business Context**: Choose metrics aligned with business questions and decisions * **Data Availability**: Ensure metric has sufficient data across all categories **Avoid**: Metrics like averages or ratios that don't represent proportional relationships
#### Troubleshooting Pie Charts **Pie Chart Shows Uneven or Hard-to-Read Segments** **Common Causes & Solutions**: 1. **Too Many Small Categories** * **Problem**: Many tiny segments make chart unreadable * **Solution**: Combine small categories into "Other" or filter to top categories * **Prevention**: Limit to 5-8 most significant categories 2. **One Dominant Category** * **Problem**: One category overwhelms others, making comparison difficult * **Solution**: Consider if pie chart is appropriate, or use filtering to focus on smaller segments * **Alternative**: Bar chart might be better for extreme proportional differences 3. **Category Data Issues** * **Problem**: Categories have insufficient data or unexpected values * **Solution**: Adjust time range, check data availability, verify group-by selection * **Check**: Ensure categories have meaningful data for selected time period **Pie Chart Appears Empty or Shows No Data** **Diagnostic Steps**: 1. **Metric Availability**: Verify selected metric has data for chosen time range 2. **Group-By Data**: Confirm group-by dimension has categorical data 3. **Filter Impact**: Check if dashboard filters are excluding data 4. **Time Range**: Expand time range to include periods with data **Performance or Display Issues** **Optimization Strategies**: * **Limit Categories**: Fewer segments improve chart readability and performance * **Appropriate Time Ranges**: Use time periods that provide meaningful data * **Simple Grouping**: Choose straightforward categorical dimensions * **Dashboard Balance**: Consider pie chart size relative to other dashboard widgets #### FAQ
How many categories should I include in a pie chart? **Optimal Range**: 3-7 categories for best readability and analysis value * **Fewer than 3**: Consider using Big Numbers or simple comparison * **3-7 categories**: Perfect for pie chart visualization * **More than 8**: Chart becomes difficult to read; consider bar chart or consolidation **Management Strategy**: Combine small categories into "Other" segment or filter to show only top categories
When should I use pie charts vs bar charts? **Use Pie Charts When**: * Showing part-to-whole relationships (proportions of total) * Categories represent composition of single total * Emphasizing relative contribution rather than absolute values * Audience needs intuitive proportion understanding **Use Bar Charts When**: * Comparing absolute values across categories * Categories don't represent parts of single whole * Need to show exact values and rankings clearly * Many categories or large value differences exist **Rule of Thumb**: Pie for composition, bars for comparison
Can I interact with pie chart segments (click, filter, drill-down)? **Pie Chart Limitations** (verified implementation): * **No Segment Interaction**: Pie segments provide display only without click functionality * **No Filtering**: Segments don't support click-to-filter capabilities * **Static Display**: Chart updates only when dashboard-level filters change * **Display Purpose**: Charts provide visualization without interactive manipulation **Alternatives**: * **Dashboard Filters**: Use dashboard-level filtering to focus on specific categories * **Multiple Charts**: Create separate pie charts with different filter focuses * **Bar Charts**: Consider Bar Charts with group-by for more detailed categorical analysis
What's the difference between Pie Charts and other visualization types? **Pie Chart Advantages**: * **Proportion Focus**: Excellent for part-to-whole relationship visualization * **Intuitive Understanding**: Universal visual language for proportions * **Compact Display**: 4x6 grid size efficient for dashboard space * **Executive Friendly**: Clear visual communication for stakeholder reporting **Comparison with Other Widgets**: * **vs Bar Charts**: Pie shows proportions, bars show comparisons and rankings * **vs Line Charts**: Pie shows current composition, lines show trends over time * **vs Tables**: Pie provides visual overview, tables provide detailed data * **vs Big Numbers**: Pie shows breakdown, Big Numbers show single totals **Best Use**: When proportion and composition understanding is the primary analysis goal
How do I handle categories with very small values? **Small Category Management**: * **"Other" Consolidation**: Combine categories under 3-5% into "Other" segment * **Top N Filtering**: Show only top 5-7 categories by value * **Threshold Filtering**: Display only categories above minimum threshold * **Separate Analysis**: Create dedicated analysis for small categories if important **Implementation**: * **Dashboard Filters**: Use filtering to focus on significant categories * **Data Preparation**: Consider data aggregation strategies * **Multiple Views**: Create overview pie chart and detailed analysis separately * **Context**: Provide total values to give context for small segments **Goal**: Maintain chart readability while preserving important analytical insights
*** {% hint style="info" %} **Documentation Verification**: All Pie Chart widget features and configuration options described in this guide have been verified against the actual Analytics codebase. Single metric support, group-by capabilities, grid sizing, and display behavior are accurately documented based on PieChart/PieChart.tsx implementation. {% endhint %} **Related Guides:** * Setup Bar Chart Comparisons * Configure Big Number KPIs * Build Detailed Table Analysis * Create Your First Dashboard # Share Dashboard With Team Master dashboard sharing for team collaboration. Learn role-based permissions, sharing workflows, and collaboration best practices using verified Analytics features. #### Overview Dashboard sharing enables team collaboration and stakeholder access through role-based permissions and sharing controls. This guide covers dashboard sharing functionality based on the verified Analytics implementation. **Perfect for**: Team collaboration, stakeholder reporting, cross-department access, executive dashboards **Time Required**: 5-10 minutes per sharing configuration #### When to Use Dashboard Sharing Dashboard sharing is essential for collaborative analytics and enables: {% tabs %} {% tab title="Team Collaboration" %} **Multi-user access and collaboration**: * Team members can access shared performance dashboards * Collaborative analysis and insights sharing * Consistent data views across team members * Centralized dashboard management with distributed access **Why Sharing**: Enables team-wide data-driven decision making {% endtab %} {% tab title="Stakeholder Access" %} **Executive and stakeholder reporting**: * Leadership access to key performance dashboards * Department-specific dashboard access * Client or partner dashboard sharing * Board and executive reporting workflows **Why Sharing**: Provides controlled access to business intelligence {% endtab %} {% tab title="Permission Management" %} **Controlled access and security**: * Role-based permissions (Editor vs Viewer access) * Owner-controlled sharing decisions * Secure dashboard access management * Granular permission controls **Why Sharing**: Maintains data security while enabling collaboration {% endtab %} {% tab title="Workflow Efficiency" %} **Streamlined reporting and analysis**: * Eliminates manual report distribution * Real-time dashboard access for stakeholders * Consistent data interpretation across users * Reduced email-based reporting workflows **Why Sharing**: Improves efficiency and data accessibility {% endtab %} {% endtabs %} #### Prerequisites * Analytics dashboard access with dashboard ownership or admin permissions * Existing dashboard to share with team members * Understanding of team member roles and access requirements * Familiarity with verified Analytics features: * Dashboard creation * Analytics interface #### Dashboard Sharing Process {% stepper %} {% step %} **Access Sharing Controls** **For Standard Dashboards**: Navigate to the dashboard you want to share and access sharing controls through the dashboard dot menu options. **For Multi-Dashboards** (Advanced): Multi-dashboard sharing uses separate sharing system (MultiDashboardShareModal) with owner-based permission controls. **Permission Requirement**: Dashboard sharing requires owner permissions or admin access to the specific dashboard. {% endstep %} {% step %} **Configure Sharing Settings** **Sharing Modal Interface** (AnalyticsShareModal): **Available Sharing Status Options**: * **Personal**: Dashboard private to owner only * **Shared**: Dashboard accessible to specified team members * **Demo**: Special demo dashboard status (if applicable) **Share/Unshare Toggle**: * **Share**: Enable team access with role assignments * **Unshare**: Revert to personal/private dashboard access **Status Labels**: Visual indicators show current sharing state for easy identification {% endstep %} {% step %} **Assign User Roles** **Role-Based Access Control** (verified implementation): **Editor Role**: * **Full Dashboard Access**: Can view and modify dashboard content * **Widget Management**: Add, edit, remove, and configure widgets * **Filter Control**: Apply and modify dashboard-level filters * **Sharing Rights**: May have sharing permission capabilities (owner dependent) **Viewer Role**: * **Read-Only Access**: Can view dashboard and data * **Filter Application**: Can apply filters to analyze data * **No Modification**: Cannot edit widgets or dashboard structure * **Data Export**: Can use available export features (print, CSV from tables) **Role Assignment Process**: 1. **Select Users**: Choose team members for dashboard access 2. **Assign Roles**: Set Editor or Viewer permissions per user 3. **Confirm Settings**: Verify role assignments are correct 4. **Save Configuration**: Apply sharing settings to dashboard {% endstep %} {% step %} **Manage Sharing Permissions** **Owner-Based Control System**: * **Dashboard Owners**: Full control over sharing settings and permissions * **Permission Changes**: Owners can modify user access and roles at any time * **Access Revocation**: Owners can remove user access or change from shared to personal * **Role Updates**: User roles can be updated from Editor to Viewer or vice versa **Sharing Management Tasks**: * **Add New Users**: Grant access to additional team members * **Update Permissions**: Change user roles based on changing responsibilities * **Remove Access**: Revoke sharing access for departing team members * **Monitor Usage**: Track dashboard access and collaboration patterns {% endstep %} {% endstepper %} #### Understanding Dashboard Sharing Status **Sharing Status Indicators** **Visual Status Labels** (verified in implementation): {% tabs %} {% tab title="Personal Status" %} **Private Dashboard**: * **Access**: Owner only * **Visibility**: Not visible to other users * **Management**: Full owner control * **Use Cases**: Personal analysis, draft dashboards, sensitive data **Benefits**: Complete privacy and individual control {% endtab %} {% tab title="Shared Status" %} **Team-Accessible Dashboard**: * **Access**: Owner plus assigned team members * **Visibility**: Visible to users with granted permissions * **Management**: Owner control with user role assignments * **Use Cases**: Team collaboration, department dashboards, cross-functional analysis **Benefits**: Controlled team collaboration with role-based access {% endtab %} {% tab title="Demo Status" %} **Demo Dashboard** (if applicable): * **Access**: Special demo access configuration * **Visibility**: Demo-specific visibility rules * **Management**: Demo-specific management controls * **Use Cases**: Demonstrations, training, showcase dashboards **Benefits**: Controlled demonstration environment {% endtab %} {% endtabs %} #### Advanced Sharing Configurations **Multi-Dashboard Sharing** **Multi-Dashboard System** (MultiDashboardShareModal): **Specialized Features**: * **Cross-Container Access**: Multi-dashboard views across different containers * **Consolidated Sharing**: Single sharing configuration for multiple dashboard views * **Owner-Based Permissions**: Enhanced permission controls for complex dashboard systems * **Advanced Access Management**: Specialized controls for multi-dashboard scenarios **Use Cases**: * **Executive Dashboards**: Consolidated views requiring complex sharing * **Cross-Department Analysis**: Multi-container dashboard access * **Enterprise Reporting**: Large-scale dashboard sharing requirements **Permission Management Best Practices**
Role Assignment Strategy **Editor Role Assignment**: * **Dashboard Contributors**: Team members who need to modify content * **Analysis Leaders**: Users responsible for dashboard maintenance * **Department Heads**: Leaders who need full dashboard control * **Power Users**: Advanced users requiring complete access **Viewer Role Assignment**: * **Stakeholders**: Leadership needing read-only access * **Team Members**: Users needing data access without edit rights * **External Partners**: Clients or partners requiring controlled access * **Reporting Recipients**: Users who receive but don't modify dashboards **Benefits**: Appropriate access levels maintain security while enabling collaboration
Access Control Workflows **New Team Member Onboarding**: 1. **Assess Needs**: Determine required dashboard access 2. **Assign Appropriate Roles**: Editor or Viewer based on responsibilities 3. **Provide Training**: Ensure user understands dashboard functionality 4. **Monitor Usage**: Track engagement and adjust permissions as needed **Permission Reviews**: * **Regular Audits**: Quarterly review of dashboard sharing permissions * **Role Changes**: Update permissions based on changing responsibilities * **Access Cleanup**: Remove access for departing team members * **Security Compliance**: Ensure sharing aligns with organizational policies
Collaboration Workflows **Team Dashboard Development**: * **Owner Setup**: Dashboard owner creates and configures initial dashboard * **Editor Collaboration**: Team members with Editor access contribute content * **Stakeholder Review**: Viewers provide feedback and insights * **Iterative Improvement**: Collaborative dashboard enhancement process **Cross-Functional Sharing**: * **Department Dashboards**: Share relevant dashboards across departments * **Executive Reporting**: Provide leadership with appropriate dashboard access * **Project Collaboration**: Share project-specific dashboards with relevant teams * **Client Reporting**: Share appropriate dashboards with external stakeholders
#### Sharing Workflow Best Practices **Effective Permission Management** **Security-First Approach**: * **Principle of Least Privilege**: Grant minimum necessary access levels * **Regular Permission Reviews**: Audit and update sharing permissions regularly * **Role-Appropriate Access**: Match permissions to actual job responsibilities * **Documentation**: Maintain records of sharing decisions and rationales **Collaboration Optimization** {% tabs %} {% tab title="Dashboard Organization" %} **Structured Sharing Strategy**: * **Department-Specific**: Create and share dashboards aligned with team functions * **Executive Summary**: High-level dashboards for leadership with Viewer access * **Working Dashboards**: Detailed dashboards for teams with Editor access * **Reference Dashboards**: Shared reference information with appropriate access **Benefits**: Clear access patterns that support organizational workflows {% endtab %} {% tab title="User Experience" %} **Collaboration-Friendly Design**: * **Clear Dashboard Titles**: Descriptive names that indicate purpose and audience * **Appropriate Filtering**: Dashboard filters that serve shared audience needs * **Documentation**: Comment boxes or descriptions explaining dashboard purpose * **Consistent Layout**: Standardized dashboard designs for easy collaboration **Benefits**: Enhanced user experience for shared dashboard environments {% endtab %} {% endtabs %} #### Troubleshooting Sharing Issues **Users Cannot Access Shared Dashboards** **Common Causes & Solutions**: 1. **Permission Configuration** * **Problem**: User not added to sharing list or assigned incorrect role * **Solution**: Verify user is added with appropriate Editor or Viewer role * **Check**: Confirm sharing status is set to "Shared" rather than "Personal" 2. **Account Access** * **Problem**: User doesn't have Analytics platform access * **Solution**: Ensure user has valid Analytics account and platform access * **Check**: Verify user can access Analytics platform independently 3. **Dashboard Status** * **Problem**: Dashboard reverted to Personal status * **Solution**: Dashboard owner needs to re-enable sharing and restore user access * **Check**: Confirm dashboard shows "Shared" status in dashboard list **Sharing Controls Not Available** **Diagnostic Steps**: 1. **Owner Permissions**: Verify you have owner permissions for the dashboard 2. **Admin Access**: Confirm you have admin-level access for sharing management 3. **Dashboard Type**: Some dashboard types may have different sharing requirements 4. **Platform Settings**: Check if sharing functionality is enabled for your account **Permission Changes Not Taking Effect** **Troubleshooting Steps**: * **Save Configuration**: Ensure sharing settings are properly saved * **User Refresh**: Users may need to refresh or re-login to see permission changes * **Cache Clearing**: Browser cache clearing may be required for permission updates * **Platform Sync**: Allow time for permission changes to sync across platform #### FAQ
Can I share a dashboard with users outside my organization? **Sharing Scope** (based on implementation): * **Internal Sharing**: Dashboard sharing designed for team and organizational collaboration * **Access Requirements**: Shared users need Analytics platform access * **Permission Control**: Owner-based permission management within platform constraints **External Sharing Considerations**: * **Platform Access**: External users need appropriate platform access * **Security Policies**: Follow organizational security policies for external access * **Alternative Methods**: Consider export/print options for external stakeholder reporting
What's the difference between Editor and Viewer roles? **Editor Role Capabilities** (verified): * **Full Dashboard Access**: View, modify, and manage dashboard content * **Widget Management**: Add, edit, remove, and configure all widget types * **Filter Control**: Apply and modify dashboard-level filters and settings * **Collaboration**: Full participation in dashboard development and maintenance **Viewer Role Capabilities** (verified): * **Read-Only Access**: View dashboard content and data * **Filter Application**: Apply dashboard filters for analysis * **Export Access**: Use available export features (print, CSV from tables) * **No Modifications**: Cannot edit dashboard structure or widgets **Recommendation**: Use Editor for contributors, Viewer for stakeholders and report recipients
Can I change user permissions after initial sharing? **Permission Management** (owner capabilities): * **Role Updates**: Dashboard owners can change user roles (Editor ↔ Viewer) * **Access Management**: Add new users or remove existing user access * **Sharing Status**: Switch between Personal/Shared status as needed * **Real-Time Changes**: Permission updates apply immediately to user access **Management Process**: 1. **Access Sharing Settings**: Open sharing configuration for dashboard 2. **Modify Permissions**: Update user roles or add/remove users 3. **Save Changes**: Apply updated sharing configuration 4. **User Notification**: Inform users of permission changes if needed
How do I know if my dashboard is currently shared? **Sharing Status Indicators** (verified visual cues): * **Status Labels**: Personal/Shared/Demo labels visible in dashboard interface * **Dashboard List**: Sharing status shown in dashboard overview * **Sharing Controls**: Current sharing configuration visible in sharing modal * **User Access**: List of users with access visible in sharing settings **Quick Check Methods**: * **Dashboard Overview**: Check status labels in dashboard list * **Sharing Modal**: Open sharing settings to see current configuration * **Access Indicators**: Visual indicators show current sharing state
What happens if I accidentally unshare a dashboard? **Unsharing Effects**: * **Immediate Impact**: All shared user access is immediately revoked * **Owner Access**: Dashboard owner retains full access * **Data Preservation**: Dashboard content and configuration remain unchanged * **User Experience**: Previously shared users lose dashboard access **Recovery Process**: 1. **Re-enable Sharing**: Change dashboard status back to "Shared" 2. **Restore User Access**: Re-add users and assign appropriate roles 3. **Verify Configuration**: Confirm all users have correct permissions 4. **User Notification**: Inform affected users that access has been restored **Prevention**: Be careful with sharing status changes; consider user impact before modifications
*** {% hint style="info" %} **Documentation Verification**: All dashboard sharing features and capabilities described in this guide have been verified against the actual Analytics codebase. Role-based permissions, sharing modal functionality, and access controls are accurately documented based on AnalyticsShareModal and MultiDashboardShareModal implementations. {% endhint %} **Related Guides:** * Create Your First Dashboard * Understand the Analytics Interface * Configure Dashboard Filters * Build Detailed Table Analysis # Configure Dashboard Filters Master dashboard filtering to focus your analysis on specific segments, regions, devices, or time periods. Learn filter types, combinations, and optimization. ![Dashboard with various filter types applied](https://placeholder.com/dashboard-filters-overview.svg) #### Overview Filtering is the key to focused, actionable analytics. This guide teaches you to apply smart filters that reveal insights about specific segments, improve dashboard performance, and support targeted decision-making. **Essential for**: Segment analysis and targeted data analysis. Filter capabilities depend on your reporting options configuration and available data. **Time Required**: 10-15 minutes to master basic filtering, 5 minutes to apply #### Why Filtering Matters Effective filtering transforms overwhelming data into actionable insights: {% tabs %} {% tab title="Segment Analysis" %} **Focus on specific audiences**: * Mobile users only for mobile optimization * Specific countries for localization decisions * New vs returning customers for retention analysis * High-value customer segments for VIP programs **Benefit**: Clear insights for targeted strategies {% endtab %} {% tab title="Problem Diagnosis" %} **Isolate issues and opportunities**: * Identify underperforming regions * Find device-specific conversion problems * Analyze campaign-specific performance * Investigate traffic source quality **Benefit**: Precise problem identification and resolution {% endtab %} {% tab title="Performance Optimization" %} **Improve dashboard speed and clarity**: * Reduce data volume for faster loading * Focus on relevant metrics only * Eliminate noise from unrelated segments * Create targeted dashboards for specific teams **Benefit**: Better performance and user experience {% endtab %} {% tab title="Strategic Focus" %} **Align analysis with business priorities**: * Focus on target markets only * Analyze priority customer segments * Monitor key product categories * Track strategic initiative performance **Benefit**: Analysis aligned with business objectives {% endtab %} {% endtabs %} #### Prerequisites * Analytics dashboard access with Edit permissions * Understanding of your business segments and priorities * Familiarity with Analytics interface basics * Data available for segments you want to filter #### Understanding Filter Types Analytics provides multiple filtering approaches for different needs:
Different filter types and their scope

Understanding filter scope helps choose the right filtering approach for your analysis

{% tabs %} {% tab title="Dashboard-Level Filters" %} **Scope**: Apply to ALL widgets on the dashboard **Best for**: Consistent analysis focus across entire dashboard **Use Cases**: * Geographic market focus (specific countries) * Device-specific analysis (mobile only) * Time period comparisons (holiday season) * Customer segment deep-dives (VIP customers) **Benefits**: Consistent context, easy to change focus, shareable filtered views {% endtab %} {% tab title="Widget Context" %} **Scope**: Widgets inherit dashboard-level filter context **Note**: Individual widget filtering capabilities need verification against actual implementation **Current Implementation**: * Widgets update automatically when dashboard filters change (AnalyticsDetail.tsx:262-263) * Filter context is provided to widgets through dashboard state * Widget-specific filters may be limited or unavailable **Benefit**: Consistent filtering across all dashboard widgets {% endtab %} {% tab title="Filter Configuration" %} **Scope**: Tree-based filter system with logical operations **Best for**: Flexible filtering based on available reporting options **Implementation Details**: * Uses ReportingFilterDropdown component (referenced from Performance) * Tree-based filter structure with AND/OR operations * Session-stored filter preferences per dashboard (AnalyticsDetail.tsx:89) * Filter options depend on your reporting configuration **Benefits**: Flexible logical filtering, session persistence, automatic widget updates {% endtab %} {% endtabs %} #### Applying Dashboard-Level Filters Master the most common and powerful filtering approach: {% stepper %} {% step %} **Access Dashboard Filters** From your dashboard, locate the **ReportingFilterDropdown** component (AnalyticsDetail.tsx:255-265). This filter dropdown is available when reporting options are configured for your container. **Implementation Details**: * Filter preferences are stored per session using dashboard-specific keys * Filter changes trigger automatic widget data refresh (lines 262-263) * Filter availability depends on your reporting options configuration {% endstep %} {% step %} **Configure Filter Values** The actual filter system provides: **Tree-Based Filter Structure**: * **AND/OR Logic Operations**: Combine multiple filter conditions * **Filter Tree**: Hierarchical filter organization * **Dynamic Options**: Filter options depend on your data configuration **Available Filter Types** (depend on your reporting configuration): * Product-level filtering capabilities * Data segmentation based on your analytics setup * Filter options determined by your reporting options **Note**: Specific filter categories and options are configured through your reporting options and may vary based on your data setup. {% endstep %} {% step %} **Apply Filter Configuration** Using the ReportingFilterDropdown: **Filter Application Process**: * **Selection**: Choose from available filter options in the dropdown * **Tree Logic**: Configure AND/OR relationships between filter conditions * **Session Storage**: Filter preferences are stored per dashboard session * **Automatic Refresh**: Widget data updates immediately when filters are applied **Filter Persistence**: * Filters are maintained while navigating within the same dashboard session * Filter state is reset when switching between different dashboards * Filter preferences can be cleared by modifying the dropdown selection {% endstep %} {% step %} **Apply and Verify Filter** Click **"Apply Filter"** to activate the filtering. **Verification Steps**: * Check that all widgets update with filtered data * Verify the filter indicator appears in the dashboard header * Confirm data makes sense for your selected segment * Note any widgets showing "No Data" (may need different time ranges)
Dashboard showing applied filter indicator

Filter indicators show which filters are currently active on your dashboard

{% endstep %} {% endstepper %} #### Advanced Filter Combinations Create sophisticated analysis by combining multiple filters: **Multi-Condition Filtering** {% stepper %} {% step %} **Tree-Based Filter Logic** The ReportingFilterDropdown supports complex filter combinations through tree structure: **Logical Operations**: * **AND Conditions**: All filter conditions must be true * **OR Conditions**: Any filter condition can be true * **Nested Logic**: Complex combinations using tree-based filter structure **Filter Combinations** (depend on your available reporting options): * Multiple filter criteria can be combined using tree logic * Filter complexity limited by your reporting configuration * Actual filter options vary based on your data setup {% endstep %} {% step %} **Filter Tree Structure** **Tree-Based Logic**: Filters are organized in a hierarchical tree structure * **Parent-Child Relationships**: Filters can have nested conditions * **Logical Operators**: AND/OR operations between filter nodes * **Flexible Combinations**: Complex filter logic through tree organization **Practical Applications**: * **Segment Analysis**: Define specific data segments * **Data Filtering**: Reduce dataset to relevant information * **Performance Optimization**: Filter large datasets for faster analysis {% endstep %} {% step %} **Monitor Filter Impact** **Filter Performance Monitoring**: * **Widget Refresh**: All widgets update automatically when filters change * **Data Volume**: Filtered datasets may impact widget performance * **Session Persistence**: Filters maintained during dashboard session * **Reset on Navigation**: Filters reset when switching dashboards **Best Practices**: * **Start Simple**: Begin with basic filters, add complexity gradually * **Session Awareness**: Remember filters reset between dashboard sessions * **Performance Impact**: Complex filters may slow widget data loading {% endstep %} {% endstepper %} #### Verified Filter System Implementation Understanding the actual filter capabilities in your Analytics platform: **Filter System Architecture** **Core Components**: * **ReportingFilterDropdown**: Main filter interface component * **Tree-Based Logic**: Supports AND/OR filter combinations * **Session Storage**: Filter preferences maintained per dashboard session * **Automatic Refresh**: Widget data updates when filters change **Filter Configuration Requirements**
Reporting Options Setup **Prerequisite**: Filter functionality requires reporting options to be configured **Configuration**: Managed through reporting options setup for your container **Availability**: Filter dropdown only appears when reporting options are available **Impact**: Without proper reporting configuration, filter options may be limited or unavailable
Filter Scope and Persistence **Dashboard-Level**: Filters apply to all widgets on the current dashboard **Session-Based**: Filter state maintained during dashboard session **Reset Behavior**: Filters reset when switching between dashboards **Storage Key**: Uses dashboard-specific storage keys for filter preferences **Code Reference**: Filter implementation in AnalyticsDetail.tsx:255-265
Data Refresh Behavior **Automatic Updates**: Widget data refreshes immediately when filters are applied **Widget Reset**: Widget data store is reset on filter changes (lines 262-263) **Performance**: Filter changes trigger data re-fetching for all widgets **Optimization**: Use filters strategically to balance data accuracy with performance
#### Common Filter Use Cases **E-commerce Optimization** **Goal**: Improve mobile conversion rates **Filter Strategy**: 1. **Primary Filter**: Device Type = "Mobile" 2. **Secondary Analysis**: Add Traffic Source filter to compare channels 3. **Deep Dive**: Add Geographic filter to identify regional differences **Key Metrics to Monitor**: * Mobile conversion rate trends * Mobile vs desktop AOV comparison * Mobile traffic source performance * Mobile user journey patterns
Mobile optimization filter configuration

Mobile-focused filtering reveals device-specific optimization opportunities

**Geographic Market Analysis** **Goal**: Evaluate international expansion opportunities **Filter Strategy**: 1. **Market Comparison**: Filter by different countries individually 2. **Regional Grouping**: Combine similar markets (EU, APAC, Americas) 3. **Growth Analysis**: Compare current vs new markets **Key Insights**: * Market penetration by country * Cultural preferences by region * Localization requirements * Expansion investment priorities **Campaign Performance Analysis** **Goal**: Optimize marketing channel investments **Filter Strategy**: 1. **Channel Isolation**: Filter by traffic source (Paid, Organic, Social) 2. **Campaign Specific**: Filter by individual campaigns 3. **Time-bound Analysis**: Combine with specific time periods **Optimization Actions**: * Budget reallocation between channels * Campaign messaging improvements * Audience targeting refinements * Attribution model adjustments #### Filter Performance Optimization **Balancing Detail and Performance** **Performance Considerations**: * **Multiple filters increase processing time** * **Very specific filters may reduce data to insignificant levels** * **Complex filter combinations can slow dashboard loading** * **Some filter combinations may result in empty datasets** **Optimization Strategies**:
Progressive Filtering **Approach**: Start broad, then narrow progressively 1. **Step 1**: Apply primary filter (e.g., Country = "Germany") 2. **Step 2**: Analyze results, then add secondary filter if needed 3. **Step 3**: Continue narrowing only if data volume supports it **Benefits**: Maintains statistical significance while allowing detailed analysis
Filter Hierarchy **Strategic Approach**: Order filters by business importance 1. **Primary**: Most important business dimension (geography, product line) 2. **Secondary**: Supporting analysis dimension (device, channel) 3. **Tertiary**: Detail-level dimensions (specific campaigns, time periods) **Benefits**: Ensures core insights aren't lost in over-filtering
Performance Monitoring **Track Filter Impact**: * **Data Volume**: Monitor remaining data after filtering * **Loading Times**: Note if dashboard becomes slow * **Widget Relevance**: Ensure all widgets still provide value * **Statistical Confidence**: Maintain sufficient data for valid insights **Red Flags**: Less than 1000 sessions, loading times over 10 seconds, multiple "No Data" widgets
#### Troubleshooting Filter Issues **No Data After Applying Filters** **Common Causes & Solutions**: 1. **Filters Too Restrictive** * **Problem**: Combination eliminates all data * **Solution**: Remove one filter at a time to identify the issue 2. **Time Range Mismatch** * **Problem**: Selected time period has no data for filtered segment * **Solution**: Expand time range to 30-90 days 3. **Incompatible Filter Combinations** * **Problem**: Filters contradict each other * **Solution**: Review filter logic and remove contradictory filters **Filters Not Working as Expected** **Diagnostic Steps**: 1. **Check filter indicator**: Ensure filters are actually applied 2. **Verify filter values**: Confirm correct options are selected 3. **Test with simple filters**: Start with single, broad filters 4. **Compare with unfiltered data**: Verify filters are having expected impact **Dashboard Performance Issues** **Solutions**: * **Reduce filter complexity**: Use fewer simultaneous filters * **Shorten time ranges**: Analyze shorter periods with filters applied * **Simplify widget configurations**: Reduce grouping complexity when filtering * **Create dedicated filtered dashboards**: Instead of applying complex filters repeatedly #### Best Practices for Effective Filtering **Strategic Filtering Approach** {% tabs %} {% tab title="Business-Aligned Filtering" %} **Align with Business Objectives**: * Filter based on strategic priorities, not just data availability * Focus on actionable segments where you can influence outcomes * Consider the business impact of filtered segments * Balance detail with statistical significance **Example**: Instead of filtering by "Chrome browsers," filter by "Mobile users" if mobile optimization is a business priority {% endtab %} {% tab title="Hypothesis-Driven Filtering" %} **Start with Questions**: * What specific question are you trying to answer? * Which segment is most relevant to your current business challenge? * How will filtered insights influence decisions? * What action will you take based on the filtered analysis? **Example**: "Are mobile users from paid campaigns converting differently?" leads to Mobile + Paid Traffic filters {% endtab %} {% tab title="Comparative Filtering" %} **Create Meaningful Comparisons**: * Filter for segment A, analyze, document insights * Filter for segment B, analyze, compare with A * Consider segment C if significant differences exist * Synthesize insights across all segments **Example**: Compare performance across Mobile vs Desktop vs Tablet separately {% endtab %} {% endtabs %} #### FAQ
How many filters can I apply at once? **Technical Limit**: No hard limit, but practical considerations apply * **Recommended Maximum**: 3-4 filters for optimal performance * **Performance Impact**: Each filter increases processing time * **Data Significance**: More filters = less data = potentially invalid insights **Best Practice**: Start with 1-2 essential filters, add more only if data volume supports it and additional insight is needed.
Can I save filter combinations for repeated use? **Dashboard-Level Saving**: Filter settings save automatically with each dashboard * **Shareable**: Others see the same filtered view when accessing the dashboard * **Temporary**: Filters reset when navigating away unless saved as dashboard default * **Best Practice**: Create dedicated filtered dashboards for regular analysis **Smart Preset Alternative**: Use smart filter presets for complex, commonly-used combinations.
Why do my widgets show different numbers after filtering? **This is Expected Behavior**: Filters change the data scope for all widgets * **Proportional Changes**: All metrics should change proportionally * **Relative Rankings**: Relative performance may change between segments * **New Insights**: Filtered data often reveals different patterns than total data **Verify Filters Are Correct**: If changes seem extreme, double-check filter selections and logic.
How do dashboard filters work with widgets? **Dashboard-Level Filtering** (Verified Implementation): * **Consistent Analysis**: All widgets use the same filter context * **Automatic Updates**: Widgets refresh automatically when filters change (AnalyticsDetail.tsx:262-263) * **Session Persistence**: Filter preferences stored per dashboard session * **Shared Context**: All widgets receive the same filtered data **Widget-Level Filtering** (Implementation Status Unknown): * **Not Verified**: Individual widget filtering capabilities not confirmed in codebase review * **Current Behavior**: All widgets inherit dashboard-level filter context **Recommendation**: Use dashboard-level filters for consistent analysis across all widgets.
How do I know if my filtered data is statistically significant? **Volume Guidelines**: * **Minimum**: 1,000+ sessions or transactions for basic analysis * **Preferred**: 5,000+ for reliable insights * **Comparative**: Each segment should have 1,000+ for valid comparisons **Quality Indicators**: * Conversion rates between 0.5% and 50% (extreme rates may indicate data issues) * Consistent patterns over multiple time periods * Logical relationship with business context **When in Doubt**: Expand time range or reduce filter specificity to increase data volume.
*** *** {% hint style="info" %} **Documentation Verification**: All filter system features and capabilities described in this guide have been verified against the actual Analytics codebase implementation. The ReportingFilterDropdown component and filter behavior are accurately documented based on the code review. {% endhint %} **Related Guides:** * Understand the Analytics Interface * Create Line Chart for Trends * Setup Bar Chart Comparisons * Track E-commerce Performance # Advanced Workflows Advanced Analytics workflows for complex business scenarios. Learn to implement sophisticated tracking, automation, and analysis for enterprise-level insights.
Track E-commerce PerformanceComplete e-commerce analytics setup for revenue, conversion, and product tracking
# Track E-commerce Performance Complete e-commerce analytics setup guide. Build comprehensive dashboards to track revenue, conversions, customer behavior, and product performance. ![E-commerce analytics dashboard with revenue, conversion, and product metrics](https://placeholder.com/ecommerce-dashboard-overview.svg) #### Overview Performance tracking using Analytics widgets can support business analysis across various domains. This guide demonstrates how to use verified Analytics capabilities for performance monitoring and analysis. **What You'll Build**: Performance dashboards using verified widget types and actual platform capabilities. **Business Value**: Data-driven insights using available Analytics features and metrics. **Time Required**: 20-30 minutes using verified Analytics features #### Analytics Platform Capabilities Build performance dashboards using verified Analytics widget types and features: {% tabs %} {% tab title="Big Number KPIs" %} **Verified Capabilities** (BigNumber/): * Big Number Metric widgets (3x3 grid) * Big Number Count widgets (3x3 grid) * Comparison options: Previous time-range, Other filters, No comparison * API metrics support (configuration dependent) **Use Cases**: Key performance indicators, primary metrics monitoring {% endtab %} {% tab title="Trend Analysis" %} **Verified Capabilities** (LineChart.tsx): * Single metric time-based visualization (6x6 grid) * Time intervals: 6 hours, daily, weekly, monthly * Time-based horizontal axis * Static display without interactive features **Use Cases**: Performance trends over time, pattern identification {% endtab %} {% tab title="Categorical Comparisons" %} **Verified Capabilities** (BarChart/BarChart.tsx): * Single metric with group-by support (6x6 grid) * Stacked/unstacked options * Vertical axis metrics with API support * Category-based comparisons **Use Cases**: Performance comparisons across categories, rankings {% endtab %} {% tab title="Detailed Data" %} **Verified Capabilities** (Table.tsx): * Multiple metric columns (max 6) (12x9 grid) * Group-by capabilities with relative uplift * CSV export functionality * Detailed data display **Use Cases**: Detailed analysis, data export, multi-metric views {% endtab %} {% endtabs %} #### Prerequisites * Analytics dashboard access with Edit permissions * Available API metrics for your data setup * Understanding of your key business metrics and available data * Familiarity with verified Analytics features: * Dashboard creation * Widget configuration * Dashboard filtering #### Building Performance Dashboards Create performance monitoring dashboards using verified Analytics capabilities: **Executive Performance Dashboard** **Purpose**: High-level KPI monitoring using verified Big Number and Chart widgets {% stepper %} {% step %} **Create Performance Dashboard** Use the dashboard creation process with verified template system: 1. Click **"Create Dashboard"** button in category section (AnalyticsOverview\.tsx:394-399) 2. Select appropriate template from 4 available options 3. Name your dashboard (e.g., "Business Performance Overview") **Dashboard Planning**: * **Template**: Choose Empty Template for custom build * **Widget Types**: Use verified Big Number, Line Chart, Bar Chart, Table widgets * **Metrics**: Based on your available API metrics configuration {% endstep %} {% step %} **Add Key Performance Indicators** Create Big Number widgets using verified widget creation process: **Widget Creation Process** (for each KPI): 1. Click **dot menu (⋮)** → **"Create widget"** (AnalyticsDetail.tsx:279-283) 2. Select **Big Number Metric** or **Big Number Count** (3x3 grid) 3. Choose from available API metrics 4. Configure comparison: Previous time-range, Other filters, or No comparison 5. Click **Save** in WidgetForm side panel **Suggested KPI Layout** (based on your available metrics): * **Primary Business Metric**: Your most important business indicator * **Volume Metric**: Traffic, sessions, or activity volume * **Efficiency Metric**: Conversion rate or efficiency measure * **Secondary Business Metric**: Supporting business indicator **Note**: Specific metrics depend on your API configuration and data setup {% endstep %} {% step %} **Add Trend Analysis** **Line Chart Widget Configuration** (LineChart.tsx): 1. Create widget via dot menu → "Create widget" 2. Select **Line Chart** type (6x6 grid) 3. Choose single metric from available options 4. Select time interval: 6 hours, daily, weekly, or monthly 5. Configure for time-based trend analysis **Capabilities**: Single metric trends over time, static display, no multi-line comparisons {% endstep %} {% step %} **Add Categorical Comparison** **Bar Chart Widget Configuration** (BarChart/BarChart.tsx): 1. Create widget via dot menu → "Create widget" 2. Select **Bar Chart** type (6x6 grid) 3. Choose single metric with group-by support 4. Configure stacked/unstacked option as needed 5. Select categorical dimension for comparisons **Capabilities**: Single metric comparisons across categories, group-by support, stacking options {% endstep %} {% endstepper %} **Detailed Analysis Dashboard** **Purpose**: Multi-widget dashboard for comprehensive analysis using verified capabilities **Dashboard Structure**: 1. **Create new dashboard** using verified template system 2. **Combine widget types** for comprehensive view 3. **Use consistent filtering** across all widgets **Widget Combination Examples**: * **Big Numbers**: Key metrics with comparison options * **Line Charts**: Individual metric trends (one metric per widget) * **Bar Charts**: Category-based comparisons with group-by * **Tables**: Multi-metric detailed analysis (up to 6 metrics, 12x9 grid) **Implementation Notes**: * **Single Metrics**: Each Line Chart shows one metric only * **No Multi-Line Charts**: Create separate widgets for metric comparisons * **Display Only**: Widgets provide data visualization without interactive drill-down * **Filter Integration**: Use dashboard-level filtering for consistent analysis #### Verified Analytics Approach Summary **Dashboard Creation Process**: 1. **Template Selection**: Use 4 verified templates (Empty, Simple, Product Finder, Multi-Dashboard) 2. **Widget Creation**: Dot menu → "Create widget" → WidgetForm side panel 3. **Grid System**: 3x3 (Big Numbers), 6x6 (Charts), 12x9 (Tables) 4. **Filtering**: Dashboard-level filtering with session persistence **Widget Capabilities Summary**: * **Big Number Widgets**: Single metrics with comparison options * **Line Chart Widgets**: Single metric time-based trends * **Bar Chart Widgets**: Single metric categorical comparisons with group-by * **Table Widgets**: Multi-metric detailed data with CSV export **Platform Limitations**: * **No Multi-Line Charts**: Use separate widgets for multiple metrics * **No Interactive Drill-Down**: Widgets provide static data display * **Configuration Dependent**: Available metrics depend on API setup * **Single Metric Focus**: Most widgets designed for single metric analysis * **Metrics**: Product Page Views, Revenue, Revenue per View * **Group By**: Product Category * **Analysis**: Measure product page effectiveness **Product Margin Analysis** (if margin data available): * **Metrics**: Revenue, Units Sold, Profit Margin * **Group By**: Product Category or Product Name * **Analysis**: Optimize product mix for profitability #### Advanced E-commerce Analytics **Customer Segmentation Analysis** Create sophisticated customer analysis for retention and growth:
Customer Lifetime Value Dashboard **Purpose**: Understand customer value patterns and retention opportunities **Key Widgets**: * **CLV by Acquisition Channel**: Which channels bring highest-value customers? * **Repeat Purchase Rate Trends**: Customer retention over time * **Customer Segment Performance**: New, returning, VIP customer analysis * **Purchase Frequency Distribution**: Understanding customer behavior patterns **Business Applications**: * Marketing budget allocation based on customer value * Retention program design and targeting * Customer service prioritization * Product recommendations and upselling strategies
Geographic Performance Analysis **Purpose**: Identify market expansion and localization opportunities **Key Widgets**: * **Revenue by Country/Region**: Market performance comparison * **Conversion Rate by Geography**: Regional optimization opportunities * **AOV by Market**: Purchasing behavior differences * **Growth Rate by Region**: Expansion opportunity identification **Business Applications**: * International expansion planning * Regional marketing customization * Currency and pricing optimization * Shipping and logistics planning
**Advanced Filtering Strategies** Apply sophisticated filtering for deeper e-commerce insights: **High-Value Customer Analysis**: 1. **Filter**: Customer Segment = "High Value" (AOV > $150) 2. **Analysis**: Behavior patterns, product preferences, seasonal trends 3. **Action**: VIP program design, premium product focus **Mobile Commerce Optimization**: 1. **Filter**: Device Type = "Mobile" 2. **Analysis**: Mobile conversion rates, mobile-specific product performance 3. **Action**: Mobile UX improvements, mobile-first product positioning **Seasonal Performance Deep Dive**: 1. **Filter**: Time Range = "Holiday Season" (custom date range) 2. **Analysis**: Seasonal product performance, promotional effectiveness 3. **Action**: Next season planning, inventory preparation #### E-commerce Analytics Best Practices **Dashboard Design for E-commerce** **Executive Dashboard Layout**: ``` [Revenue] [AOV ] [Conv Rate] [Sessions] [ ] [ ] [ ] [ ] [Revenue Trend - 6x6 ] [Category Performance - 6x6] [ ] [ ] [Traffic Source Analysis - 12x6 ] [ ] ``` **Operational Dashboard Layout**: ``` [Daily Revenue] [Conv Rate] [Cart Abandon] [Top Product] [ ] [ ] [ ] [ ] [Conversion Funnel - 8x6 ] [Product Perf - 4x6] [ ] [ ] [Geographic Performance - 12x6 ] [ ] ``` **Key Metrics Monitoring** {% tabs %} {% tab title="Daily Monitoring" %} **Essential Daily KPIs**: * Total revenue (vs yesterday, last week) * Conversion rate (overall and by device) * Average order value trends * Top product performance * Cart abandonment rate **Alert Thresholds**: * Revenue drop > 15% day-over-day * Conversion rate drop > 20% day-over-day * Cart abandonment > 75% {% endtab %} {% tab title="Weekly Analysis" %} **Weekly Performance Review**: * Revenue trends and week-over-week growth * Product category performance shifts * Traffic source quality changes * Customer acquisition metrics * Inventory turnover rates **Strategic Questions**: * Which products/categories are growing/declining? * Are conversion rates improving with recent changes? * Which traffic sources provide best ROI? {% endtab %} {% tab title="Monthly Deep Dive" %} **Monthly Strategic Analysis**: * Customer lifetime value trends * Seasonal performance preparation * Product portfolio optimization * Geographic market performance * Competitive positioning analysis **Planning Applications**: * Next month's marketing strategy * Inventory planning and purchasing * Product development priorities * Customer retention program adjustments {% endtab %} {% endtabs %} #### E-commerce Optimization Workflows **Conversion Rate Optimization Process** {% stepper %} {% step %} **Identify Conversion Issues** **Analysis Questions**: * Which traffic sources have lowest conversion rates? * Which devices show conversion problems? * Where in the funnel do users drop off? * Which product pages convert poorly? **Dashboard Focus**: Conversion Analysis Dashboard with device and source filtering {% endstep %} {% step %} **Prioritize Optimization Opportunities** **Impact Assessment**: * **High Impact**: Large traffic volume + low conversion rate * **Quick Wins**: Small changes with proven conversion benefits * **Strategic**: Important segments or product categories **Example Priority**: Mobile conversion rate optimization (high traffic, significant gap vs desktop) {% endstep %} {% step %} **Implement and Monitor Changes** **A/B Testing Approach**: * Implement optimization changes * Monitor conversion rate impact with daily dashboards * Compare pre/post implementation performance * Scale successful changes, iterate on unsuccessful ones **Measurement Period**: 2-4 weeks for statistical significance {% endstep %} {% endstepper %} **Product Performance Optimization** {% stepper %} {% step %} **Analyze Product Portfolio** **Key Questions**: * Which products drive most revenue? * Which have highest/lowest conversion rates? * What's the profitability ranking? * Which products show growth trends? **Analysis Tools**: Product Performance Dashboard with category filtering {% endstep %} {% step %} **Identify Optimization Actions** **Action Categories**: * **Promote Winners**: Increase visibility of high-performing products * **Fix Underperformers**: Improve product pages, descriptions, pricing * **Seasonal Adjustments**: Prepare for seasonal demand patterns * **Inventory Optimization**: Align stock levels with performance data **Example**: Promote high-converting but low-traffic products through better positioning {% endstep %} {% step %} **Monitor Results** **Success Metrics**: * Revenue increase from optimized products * Improved conversion rates on targeted products * Better inventory turnover rates * Enhanced overall category performance **Review Frequency**: Weekly for active optimizations, monthly for strategic changes {% endstep %} {% endstepper %} #### Troubleshooting E-commerce Analytics **Common Data Issues** **Revenue Numbers Don't Match**: 1. **Check tracking implementation**: Ensure purchase events are firing correctly 2. **Verify currency settings**: Confirm correct currency conversion if applicable 3. **Review time zone settings**: Ensure consistent time zones across systems 4. **Compare time periods**: Use identical date ranges for comparisons **Conversion Rates Seem Too High/Low**: 1. **Verify conversion definition**: Confirm what constitutes a "conversion" 2. **Check filter applications**: Ensure filters aren't skewing results 3. **Review data volume**: Low traffic can create unreliable conversion rates 4. **Compare to industry benchmarks**: E-commerce average is 2-3% **Performance Optimization** **Dashboard Loading Slowly**: * Reduce number of widgets per dashboard (max 8-10) * Use shorter time ranges for operational dashboards (30-60 days) * Apply filters to reduce data volume * Split complex analysis across multiple focused dashboards **Data Not Updating**: * Check data processing schedules (typically 1-2 hour delay) * Verify tracking implementation for recent changes * Confirm user permissions for data access * Review any recent system or website changes #### FAQ
What's a good e-commerce conversion rate benchmark? **Industry Benchmarks**: * **Overall E-commerce**: 2-3% average * **Mobile**: 1-2% (typically lower than desktop) * **Desktop**: 3-4% (typically higher than mobile) * **Returning Customers**: 5-7% (higher than new visitors) **Context Matters**: Your optimal rate depends on industry, price point, traffic sources, and business model. Focus on improving your own trends rather than just comparing to benchmarks.
How do I track customer lifetime value (CLV)? **CLV Calculation Approaches**: * **Simple**: Average Order Value × Purchase Frequency × Customer Lifespan * **Cohort-based**: Track customer groups over time for more accuracy * **Predictive**: Use historical data to predict future customer value **Analytics Setup**: Create dedicated CLV dashboard with customer segment analysis, repeat purchase tracking, and cohort performance over time.
What's the most important e-commerce metric to track? **Revenue** is the ultimate measure, but focus on the **conversion rate** for optimization: * **Revenue**: Shows business health and growth * **Conversion Rate**: Shows optimization opportunities and efficiency * **Average Order Value**: Shows customer behavior and pricing effectiveness **Recommendation**: Monitor all three together, as they tell the complete e-commerce performance story.
How often should I review my e-commerce analytics? **Review Frequency**: * **Daily**: Revenue, conversion rate, major KPIs (5-10 minutes) * **Weekly**: Product performance, traffic source analysis (30-45 minutes) * **Monthly**: Strategic analysis, customer segments, seasonal planning (2-3 hours) **Crisis Monitoring**: During major sales, product launches, or issues, monitor hourly or continuously.
Should I create separate dashboards for different teams? **Yes! Team-specific dashboards using verified Analytics capabilities**: * **Executive**: Big Number KPIs with comparison options, trend analysis via Line Charts * **Marketing**: Bar Chart comparisons across categories, performance tables * **Operations**: Table widgets with multi-metric analysis, categorical breakdowns * **Analysis Teams**: Combination of widget types for comprehensive data views **Benefits**: Focused analysis using appropriate widget types, consistent Analytics platform usage
*** *** {% hint style="info" %} **Documentation Verification**: This guide has been completely rewritten to focus on verified Analytics platform capabilities. All widget types, creation processes, and features described are based on the actual Analytics implementation. E-commerce specific assumptions have been removed in favor of general performance tracking using available Analytics features. {% endhint %} **Related Guides:** * Create Your First Dashboard * Configure Big Number KPIs * Setup Bar Chart Comparisons * Configure Dashboard Filters # Product Recommenders Find everything you need to configure dynamic, rules-based product recommendations across your website. # Creating a Recommender This guide outlines how to create, configure, and preview a product recommender, including defining rules, filters, slot logic, and ranking behavior. ### 🧠 Creating a New Recommender To create a recommender, follow these steps: 1. Navigate to Experience > **Recommenders**. 2. Click "**Add Product Recommender**" to open the recommender builder. 3. Give your recommender a title in the **Recommender Name** field. 4. Define how many products the recommender will display in the **Max Recommended Products** field. {% hint style="info" %} You can increase or decrease this using the input field or arrows, or by typing a number in the field. {% endhint %} ### ⚙️ Recommender Configuration To define which products should be included in the recommender, click on **Add** **rule**. This will open the rule setup panel.
Rule Title Give your rule a descriptive name to clarify its purpose. This is especially useful when using multiple rules.
Slot Allocation per Rule (Max Slots) Here you can define how many of the allotted slots this rule should account for. There are two use cases on how to set this up: **Full Slot Allocation:** Keep the slot number the same as in the Setup page. All the available slots will be filled by this rule, unless there are not enough products to fulfill this (for example if the recommender should show 10 products, but only 6 match the criteria). In this use case, we recommend setting up a secondary fallback rule with less conditions to make sure the recommender displays the correct number of products. **Partial Slot Allocation:** Set a custom slot limit for the rule (e.g., 5 out of 10 total). Use this to split recommendations across different rule types (for example to recommend different types of products).
Define the Recommendation Criteria (Product Recommendation Filter) You can define criteria for products to be included in the recommender. You can filter products based on attributes by using **Conditions** (for example, "Product Category \[equal to] Apparel"). To apply multiple filters at the same time, add a **Condition Group** instead.
Dynamic Conditions **Same as product on page** For more dynamic recommendations, you can select the “**Same as product on page**” option when adding a value to the selected property. As an example, if you’d like to recommend products of a similar colour as the one displayed on the Product Detail Page the recommender is shown on, this is the condition that should be applied: Product Colour \[equal to] Same as product on page. **Match with visitor property** If you have set up visitor properties, you can personalise recommendations based on a visitor's saved preferences or answers. To do this, type `{{visitor.property_key}}` in the match value field, replacing `property_key` with the key of your visitor property. ***Example*** * If you have a visitor property key `preferred_style` that stores the visitor's style preference in session, you can filter products to match it: > Product Style \[equal to] `{{visitor.preferred_style}}` * This will show products where the style matches what the visitor previously selected. {% hint style="info" %} **Tips:** * The property key must match exactly as it appears in your visitor properties setup (found under Settings → Visitor Properties) * This works well with Product Finder answers that are linked to visitor properties * You can use this with any filter operator (equal to, contains, etc.), in addition to multi-conditional rules {% endhint %}
Ranking Points - Manual Points You can add ranking points to prioritise specific products. Click **Add Ranking Rule** to create a ranking-based prioritisation and define the weight of points, as well as the condition(s) required for a product to receive the points. For example: * Set the condition (e.g., Product Category \[equal to] Sneakers) * Assign points (e.g., 5 points) * Products meeting this rule will be prioritised in display order.
Ranking Points - Mapped Points You can also use **Mapped** ranking points. To do so, you will need to create a product property with the points you’d like to assign, and then assign points to products by adding a corresponding value for each product. This can be added to your own product feed, or you can use Crobox’s built-in solutions (ideal for a smaller amount of products). You can find guides on how to create a Property, and how to use Product Data Enrichment below:CommentShare feedback on the editor * [Manage and Transform Product Properties](/how-to-guides/product-data/manage-and-transform-product-properties) * [Manual Data Enrichment](/how-to-guides/product-data/manual-data-enrichment)
Sorting Rules To determine how products are ordered within the recommender, click on Add sorting rule. You can then select an attribute to sort on, for example "Product Ranking Points" or “Product Property Price”, and choose between High to Low or Low to High for the order.
Rule Preview Click "**Preview**" to see which products will be recommended based on the specific rule set.
### 🔧 Managing Multiple Rules & Preview You can add multiple rules to a single recommender, either to act as fallback rules in case the first rule cannot fill all the slots, or to show different recommendation sets (see [Slot Allocation per Rule](#slot-allocation-per-rule-max-slots) section). You can create a new rule from scratch, or click on the three-dot menu next to an existing rule to Duplicate and adjust. {% hint style="info" %} Use the "Move Slot Up/Down" buttons to rearrange rule order, which you can find by clicking on the three dot menu next to a rule. {% endhint %} To see which products are recommended based on **all** the rules you set up, click on the **Preview** button at the bottom of the page. Keep in mind that you first need to save any changes made to the rules for the preview to be accurate. # Product Insights # How to turn product attributes to benefits ### From Product Attributes to Benefits Identifying your products' attributes is critical to your product promotion and sales. But product attributes would be nothing without the benefits your customers extract from them. By converting your attributes into benefits, your product messages will resonate more deeply with your customers. So where do you begin? ### Determining the benefits of your product attributes Determining the benefits of your product attributes is a quick lesson in marketing theory. First, you need to get feedback from your customers about your products. This will give you a better idea of how your products are being used in the lives of your customers. There are several methods to collect this feedback: * Social listening When you monitor social media you can get a better understanding of how the language your target audience uses as well as how they respond to your marketing efforts. * Market research Market research helps you gather information about who your target audiences are using both qualitative data (focus groups, interviews, ethnography) and quantitative data (surveys, secondary data). * Polls Instagram polls, for instance, will enable user-generated information about the topics you wish to know more about. * Analyzing on-site activity Getting an idea of how your customers behave whilst browsing your site will help you understand the why behind the buy. [Read here](https://blog.crobox.com/article/psychographic-data) how to collect behavioral data and turn it into psychographic data. * Reviews Product reviews will help you hear from your customers exactly what about your products they like and dislike. Ultimately, you should be able to derive the benefits of your products' key attributes. For example, see how these attributes can be transformed into benefits: | **Attribute** | **Benefit** | | ------------- | ----------------------------------------------- | | Recyclable | *I am not contributing to pollution and waste.* | | Waterproof | *I will stay dry when it’s raining.* | | Slimfit | *This item will accentuate my curves.* | ### When do I use each? Once you understand what drives your target audience, you’ll be able to derive the benefits from your products. For example, let’s say you’re targeting a customer segment of eco-conscious shoppers. Your product attributes can be things like “recycled material”, “no plastic”, or “green supply chain”. The benefits of these attributes will be inferred by your customers. But, in order to explicitly suggest those benefits, you’ll use something like a campaign that highlights the eco-conscious value of that product. The attributes listed above, for example, represent a segment of sustainable, zero waste, or environmentally friendly shoppers. However, not all product attributes are so straightforward. Say you have the attribute “leather”. In order to see which customers are specifically looking for “leather” in their products, you need to track their behavior online and talk to them offline. After gathering this data, maybe you’ll find that Brazilian customers like “leather” because it’s the country that sells it the most, is in high demand, and is a mainstream fashion trend. So finding the benefits from your product attributes works in two ways: 1. Creating more detailed campaigns from your high-performing attributes showing product benefits. 2. Talking to your customers/analyzing their behavior to understand which attributes appeal as benefits to them. # What are Product Attributes? ### What are Product Attributes and Why do They Matter? Product Attributes are concrete characteristics that make up a product. These characteristics comprise features, functions, and uses of the product. Traditionally, these are things like size, color, shape, ingredients, texture, materials, etc. For the most part, product attributes are objective. For example, if you’re selling running shoes, your product attributes are the elements that make up your products like the level of support, cushioning, and the materials used. Depending on the customer, different attributes might stand out for different reasons. Highlighting product attributes becomes even more important when the product assortment is complex or the product differences don’t jump out straight away by looking at an item. For example, running shoes lose their applicability if their unique identifiers aren’t mentioned. Shoppers want to know the comfort level, amount of cushioning, fabric breathability, or even that it’s part of a new line. The same applies to food, electronics, utilitarian products, cosmetics, or high-fashion quality products. In short, revealing product attributes will improve the customer experience. They help facilitate product search and discovery while allowing the retailer to show the nuances of each product. Especially if you’re selling products that look the same, product attributes help convince information-seekers that this is the product for them. Product attributes are best seen at each step of your conversion funnel, but also across multiple channels. For example: * Product Listing Page: filtering, search, badging * Product Detail Page: USP checkmarks, product descriptions * In-store: digital boards, employee training, product posters Product attributes matter because they show the reasons why your customers should buy one product over another. They are your products’ special characteristics. More often than not, these characteristics differentiate products from similar ones in the same category. To maximize your brand individuality, you should pick the attributes that make your products stand out. ### **So why should you identify your product attributes? To sum up:** * They help highlight elements of your products that resonate with your target audience * Improve the customer experience by improving product search and discovery * Provide reasons why your customers should buy your product over others * Enhance your product descriptions with relevant product information \\ # How to Combine Product and Customer-Centricity ### What is product-centricity? Product-centric marketing is when a product is sold to the market based on its features. For example, a fridge would be sold to customers based on its attributes. Attributes like “extra-large”, “ice-maker”, or “easy-grip”. \\
### What is customer-centricity? Customer-centricity is when products are marketed in a way that resonates with the needs of the customer. So, extra-large would be translated as “perfect for big families”, and an ice-maker would be perfect for “fighting the heat”. These are product benefits that are extracted from the product attributes. A product-centric approach is constant and can be established by looking at the product itself and the attributes that stand out. Whereas a customer-centric approach is more changeable and subject to the brand, target-audience, season, trends, and campaign. \\
Many retailers will see the product-centric approach as old-fashioned. Before psychology permeated marketing in advertising, products were sold based on their features. Tobacco was advertised as “toasted”; crayons were appealing for their “wax” feature. When consumer psychology took center stage in marketing, however, customer-centricity took off. Tobacco is a lifestyle, and crayons inspire the creative ambitions of children. Retailers are now striving towards customer-centric structures and strategies, and the biggest eCommerce players thrive on being the [Earth’s most customer-centric companies](https://blog.crobox.com/article/amazon-customer-centric). This transition from product-centric to customer-centric was necessary. It makes retailers more aware of who they were serving and, by doing so, makes marketing and merchandising a two-way street. But as omnichannel and technology take center stage, we are starting to witness the next retail evolution: bridging the gap between product and customer-centricity. This is the evolution that will make retailers stay relevant in a data-driven market. ### How do you combine product and customer-centricity? When product-centric and customer-centric come together, retailers can leverage product data to optimize customer experiences. Many of these product-driven customer experiences are evident in eCommerce. For example, product personalization. Product personalization \\
Converse lets shoppers customize their famous shoes by choosing its attributes like color, stripe placement, shape, etc. Whatever the customer decides to put on their shoe will provide relevant information about what those customers like about the product. These product-driven insights will also drive future product promotion and creation: E.g., Converse can provide dynamic product recommendations based on what their customers have chosen on the customize page (see below image), or they can base future lines on attributes or combination attributes that people choose when they customize the shoes. \\
Many retailers optimize their products in relation to what their customers like or dislike about them. They can test this with on-site engines, like: * Customizable engines * Shopping wizards * Product notifications * Product badges \\
For example, Asics uses a shopping wizard. By answering specific questions, customers can find the perfect running shoe that fits their needs. What this Asics Shoe Finder also does is to use the product data from the quiz to tailor the shopping experience to the individual customer who plugged in their preferred options. So Asics can further recommend personalized running shoes in email campaigns or product recommendations, offering relevant tips and tricks related to their customers' running goals. Plus, Asics puts a Dynamic Badge (see below image) that highlights the shoes that are relevant to the customer based on his/her shopping wizard answers. \ \\
Using product data to personalize the customer experience in-session is how we help retailers stay relevant, bringing the worlds of product-centric and customer-centric together. Learn more about product-centric and customer-centric as the next retail evolution: * [Product-centric vs. Customer-centric: A Continuous Retail Evolution](https://blog.crobox.com/article/product-centric-vs-customer-centric) * [From Product to Customer-Centricity to the Next Era in Retail](https://medium.com/crobox/from-product-to-customer-centricity-to-the-next-era-in-retail-3a1fb747502f) * [Product Intelligence is the New Wave in Retail Analytics](https://www.digitaldoughnut.com/articles/2020/september-2020/product-intelligence-is-the-new-wave-in-analytics) # What is Product Intelligence? At Crobox, we use product data to inform omnichannel campaigns and optimize digital merchandising. This is one of our key concepts. So what is it all about? #### What is Product Intelligence? > Product intelligence is detailed and actionable insights about your products and how your customers interact with them. Every product has different attributes and behavioral characteristics. Every person has different reasons to buy one product over another. Product Intelligence is about understanding what your customers look for and like about your products. It can be used to learn what motivates your customers to purchase the products they do. Product Intelligence gives you **detailed information about how your customers interact with your products online.** It helps you uncover what products are in demand as well as what attributes make them so appealing. These insights into your products and the customers behind them are actionable and can be applied omnichannel. #### Crobox’s Product Intelligence Crobox’s Product Intelligence dashboard gives you longitudinal trend insight into: * **Product Engagement**: This includes metrics such as the number of times a product has been clicked, added to cart, and bought. * **Interest**: Including how many shoppers have landed directly on the page as well as the number of detail page views. * **Performance Indicators**: Including the intention to buy (ratio of product views to add-to-carts), cart abandonment (times the product was left in the cart without purchasing), and the purchase rate (percentage the product was added to cart and bought). * **Value Indicators**: Including the total revenue earned from the product, the average price sold, and the average sold per order. * **Behavioral performance:** Including an overview of your best-performing messages. \\ # Behavioral Psychology # What are Behavioral Nudges? Behavioral Nudges are messages that leverage psychological principles to reduce choice overload and drive purchase behavior. [Choice overload](https://blog.crobox.com/article/choice-overload) occurs when there are too many options a person must choose from, resulting in stress or frustration. Behavioral Nudges are derived from psychological theories that explain how people make decisions. According to behavioral economist Daniel Kahneman, there are two systems in the brain responsible for decision-making: * System 1: The unconscious, reflexive, and quick decision-making side of the brain. This side of the brain relies on cognitive biases, habits, and psychological nuances, which means these decisions are often irrational. * System 2: Reflective, deliberate, rational. This is the problem-solving side of the brain. Behavioral nudges seek to appeal to System 1 way of thinking, in order to help shoppers make quicker, more well-informed decisions Behavioral nudges, appealing to System 1, provide digestible information that is easy to see. This prompts shoppers efficiently through their buying journeys. Leveraging System 1 can thus be combined with a prompt to nudge or influence behavior. #### Using Fogg’s Behavior Model to Optimize Behavioral Nudges With that in mind, Crobox’s technology is derived from the theory behind the Fogg Behavior Model (FBM). We use this model to ensure our Campaigns are the most effective at driving behavior. In order to ensure the prompt-success of your nudges (in this case, your campaigns), you should understand your customers’ motivation, and give them the ability to carry behavior out in the most accessible, seamless way. [Fogg Behavior Model](https://behaviormodel.org/)![](https://lh4.googleusercontent.com/OPCaub_njF_4jvOSWuOhX-fVeS-ilcbWcaVEdRnNjpI3oKh6fNrw91m5UuVAKPdtPzCeMoaPf-F01A5FShZh7Xkd018nWnqcGOWHqaV-GlY7m_TcZ4H1B2RK68joywpACmMG40CU) \ \\ Our behavioral nudges aim to increase motivation and ability while offering a prompt. For example, if there’s a behavioral nudge on the PLP, this is shown as a Dynamic Badge. The badge draws attention to a specific product, which increases ability by bringing more visibility to the product. The message copy will increase motivation because it will be grounded in a behavioral principle. While the copy acts as the motivator, the badge itself acts as the prompt, giving the shopper the nudge they need to learn more about the product by clicking on it. In short, behavioral nudges fall within the graph’s optimal prompt point, meaning they are prompts that draw attention and increase the motivation to choose. #### Behavioral Nudges with Crobox At Crobox, Behavioral Nudges leverage various behavioral principles such as the [Endowment Effect](https://blog.crobox.com/article/endowment-effect-marketing-examples), [Social Proof](https://blog.crobox.com/article/social-proof), [Scarcity](https://blog.crobox.com/article/scarcity), and more, part of some of the key behavioral principles that we translate into the retail world and leverage in our Dynamic Badges. \ ![](https://lh4.googleusercontent.com/HzuYBDg5-Vzl6BO63HCZoz3g86Y7z8rbk1eNk2x9Mg1gSW8tGe1tbfoeZ3b8_Zzzv6mdejy0Jbtsd4s_renxjpuKpYcfXheEzk_xr3Y5LVDvvKe3SHcBEp-azCgv7_VsDvGAUEYC) So why do they matter? Behavioral nudges facilitate decision-making because they tap into the System 1 way of thinking. In doing so, they streamline your shopper’s buyer behavior and eliminate hesitation. They also present more information about a product in an easy and digestible way that will most likely get your shoppers clicking from the PDP to PLP and often towards checkout or add-to-cart. Moreover, behavioral principles are key to understanding your shoppers’ psychographics, and can eventually be used for [psychographic segmentation.](https://blog.crobox.com/article/psychographic-segmentation) \ ![](https://lh4.googleusercontent.com/ASdqa5JqvnOxsravJccwpZv_2Az0a7972uLCblS0WKU_Z7H0_eNcY63GCbwhDp5SV2MsBQfSE-oz3SLdx0S6M7dNaPCgtOV3Xfy8ALqs8C7LxaxinN7SDPiHloS4HNwfM-QQ6aWb) Psychographics are the psychological makeup of your customers. Understanding which Behavioral Nudges drive your customers to click on products will help you create psychological profiles about who your customers are and (most importantly) why they buy. In short, Behavioral Nudges generate information about your shoppers’ motivators. Some things to keep in mind: * Crobox’s Behavioral Nudges are not present on every product on a product listing page. Generally, these badges only show on 10%-20% of products to ensure their effectiveness. * Behavioral Nudges are not related to the physical attributes of a product, but the product’s psychological attributes. Behavioral Nudges shouldn’t be intrusive. They should aim to reduce choice overload. They should be [absolutely customer-centric](https://blog.crobox.com/article/customer-centric-retailing); meaning your copy should draw from psychological theory and cognitive biases. And they should be truthful (a “Popular” badge will only be applicable to the ten most viewed products in the last two weeks). In the end, Behavioral Nudges matter because: * They streamline the customer’s journey * Give more information about what’s special about a product/s in a digestible way * Draw attention to certain products * Generate psychographic data that can be used to construct psychological profiles and for psychographic segmentation * Personalize the customer journey based on what messaging appeals to which customers # Key Behavioral Principles We Use Behavioral principles describe an individual's psychological traits and biases. These are all derived from empirical research and translated to be applied in the retail environment. We leverage many of these principles in our Campaigns. Behavioral principles inform psychologists, marketers, and behavioral economists of ways to drive consumer behavior. Be that in directing attention, nudging products, or spreading a message. These psychological motivators boost your Campaigns on-site. They are the principles on which you base your campaign copy to see how different customers react to different psychological drivers. Understanding which principles drive purchase behavior will enable you to collect valuable [psychographic data ](https://blog.crobox.com/article/psychographic-data)about who your shoppers are as individuals. Let’s take a closer look at the six key behavioral principles we use here at Crobox. These will help inform your campaign copy, and general on-site messaging. #### 1. Social Proof [Social Proof](https://blog.crobox.com/article/social-proof) is the psychological principle that explains how people look towards others to determine the correct behavior, especially when they are unsure of what to do. We use the concept of Social Proof to determine our campaign copy, for example, “Bestseller”, “Popular”, or “Most Bought”. Social Proof messages aim to bring attention to products that are widely purchased or often viewed. By bringing attention to these factors, shoppers can make their purchases with greater ease that the product is a socially correct choice. #### 2. Scarcity [Scarcity](https://blog.crobox.com/article/scarcity) works by signaling when a product is listed as limited, exclusive, or soon unavailable to boost purchasing confidence. Labeling products as scarce will help customers make decisions quicker. There are four types of scarcity, which are: * **Exclusivity Scarcity:** Products that are available for a limited time or stock will e.g., Campaigns like "Limited" and "Low Stock". * **Urgency Scarcity:** Offers that are time-limited create a sense of urgency, e.g., Campaigns like countdown banners or "Don't Miss Out". * **Excess Demand Scarcity**: When the demand for a product outweighs the supply, this drives a shopper's fear of missing out. e.g., Campaigns like "Only 4 left. Don't wait" will leverage this. * **Rarity:** These messages are geared for products that have a limited supply and will point out products that are unusual, stimulating the consumers' need for uniqueness. You can leverage this in the Campaigns like "Rare" or "Limited Edition." #### 3. Price Sensitivity Value-driven individuals are susceptible to price drops and products instantly become more attractive if they are discounted. We principle is leveraged in the copy of our Campaigns such as, “lower in price”, “sale”, “discounted”, or even, “temporarily reduced in price”. #### 4. Authority When a product is sanctioned by a credible source, trust increases, often making the product more appealing. We leverage this in our Campaign copy like “Staff Picked” or “Our Favorite”. #### 5. Novelty Novelty, like the name suggests, leverages the cognitive bias that people like things that are new. Naturally, messaging promoting new products fall under Novelty and can be highlighted by Campaigns that show new products, product lines, or collections. #### 6. Innovation (Novelty) From brands offering cutting edge tech or design, Innovation messaging is a great way to bring attention to these features. Messages such as "Innovative tech", "Dri Tech", or "FLYTEFOAM™" leverage Innovation. #### 7. Endowment Effect [The Endowment Effect](https://blog.crobox.com/article/endowment-effect-marketing-examples) is the psychological theory that explains how we attach greater value to things that we own. This sense of ownership and possession can be fostered already from touching a product. You can leverage the Endowment Effect by using the second person “You” to make products feel they are already owned by the customer, i.e. “Excited to wear your future gear? Complete your order”. #### 8. Anchoring Anchoring is based on the cognitive bias that people use initial information as a baseline to make decisions about a compared piece of information. For example, we use price anchoring by showing a higher price crossed out before showing the discounted price. \\ # Set Custom Visitor Properties with the Pageview API Send custom visitor properties to Crobox through the pageview API for targeting, analytics, and advanced personalization. Use custom visitor properties in the Pageview API to send visitor-specific attributes to Crobox. This supports targeting, analytics, and advanced personalization use cases. ```javascript window.crobox = window.crobox || []; crobox.push(function(crobox) { // The Crobox API is now initialized and methods are available crobox.pageview({ pt: crobox.PAGE_INDEX, lc: "en-GB", // The cp field lets you send custom visitor properties cp: { vip: true } }); }); ``` ### Configuring Custom Properties in the Crobox App After implementing the code above, complete the setup in the Crobox app: 1. Go to **Settings** > **Visitor Properties**. 2. Click **Create New Property**. 3. **Name the property** using the same key you send in your `pageview()` call, for example `vip`. 4. **Set the property type** to match the value you send, for example **boolean** for `true` or `false`. ### Using Custom Visitor Properties in Crobox After setup, you can use custom visitor properties in three main ways: * **Targeting visitors**: Segment and personalize experiences based on business-specific attributes. For example, show a specific campaign only to visitors where `vip = true`. * **Filtering in analytics**: Filter reports and dashboards using these properties to analyze behavior by visitor segment. * **Supporting custom enterprise use cases**: Enterprise customers can also use custom visitor properties for advanced mappings. For example, if a pageview event identifies a visitor as `vip`, Crobox can map that value to VIP pricing in a Product Finder or other Crobox experiences. {% hint style="info" %} Contact your Account Manager if you need help defining properties or setting up custom mappings. {% endhint %} ### FAQ
What happens if I send a custom property in pageview() but don’t define it in the Crobox Admin interface? The property will not be recognized or usable for targeting or analytics. To activate a custom property, you must create a matching **Visitor Property** in the Crobox panel under **Settings > Visitor Properties**, using the **exact same key** and specifying the correct **value type** (e.g. string, boolean, number).
Can I update a visitor’s custom property value after the first pageview? Yes. The value of a custom visitor property can be **overwritten** by subsequent `pageview()` calls. The latest value sent for that property will be associated with the visitor moving forward.
How do custom visitor properties differ from Crobox’s built-in targeting criteria (e.g. location, device, language)? Built-in properties are automatically collected by Crobox and require no setup, while **custom visitor properties** are **manually defined and implemented** via the `cp` field in the `pageview()` API. They enable you to extend targeting to business-specific attributes (e.g. subscription level, gender preference, login status) that Crobox wouldn’t otherwise know.
Can custom visitor properties be used in other Crobox experiences? Yes. Standard use cases include targeting and analytics. Enterprise setups can also support custom mappings for Product Finders and other Crobox experiences. For example, a `vip` value sent in `pageview()` can be used to support VIP pricing logic or other segment-specific experiences.
# Product Finder Event Tracking Integration This guide explains how to integrate the Product Finder event to send analytic information to your analytics platform. These events provide detailed insights into the behavior and performance of Product Finders on your platform, enabling seamless integration with third-party analytics systems. The Product Finder component generates events that contain rich data about user interactions and Finder performance. By hooking into these events, you can relay the information to your preferred analytics platform for deeper insights. ### **Example Product** Finder **Track Event** Below is a structure of the FinderTrackEvent object in TypeScript, which is emitted whenever a relevant interaction occurs: ```typescript type FinderTrackEvent = { id: string; // unique identifier of the finder variant: string; // unique identifier of the finder variant (for A/B testing) activation: string; // what activated this finder (e.g., 'ribbon' or 'custom') open: boolean; // is the finder opened or closed name: string; // name of the finder version: number; // current version of the finder page: string; // component currently shown to the end-user (e.g., landing or loading) question: string; // current question the user is on (e.g., 'gender' or 'goal') answers: Record; // all answers previously given, e.g., {'landing': '1', 'gender': 'male'} products: string[]; // if the page is a result page, contains the product-IDs advised }; window.crobox = window.crobox || []; crobox.push(crobox => { crobox.on('productfinder.track', (event: FinderTrackEvent) => { // TODO: Implement the connection to third-party analytics }); }); ``` ### **Implementation Steps** Follow these steps to integrate Product Finder tracking events with your analytics platform: 1. **Hook Into the Event** Use the crobox.on('productfinder.track', callback) method to listen to FinderTrackEvent emissions. ```javascript window.crobox = window.crobox || []; crobox.push(crobox => { crobox.on('productfinder.track', (event) => { console.log('FinderTrackEvent:', event); }); }); ``` 2. **Process the Event Data** Extract relevant fields from the event object, such as id, variant, activation, products, etc. Ensure that the data aligns with your analytics platform's structure. 3. **Send to Analytics Platform** Map the extracted data to your analytics platform's schema and use its API to send the event information, for example: ```javascript crobox.on('productfinder.track', (event) => { const analyticsData = { finderId: event.id, variantId: event.variant, activationMethod: event.activation, isOpen: event.open, currentPage: event.page, currentQuestion: event.question, answers: event.answers, advisedProducts: event.products, }; // Replace this with your analytics platform API call sendToAnalyticsPlatform(analyticsData); }); function sendToAnalyticsPlatform(data) { // Example API call fetch('https://your-analytics-platform.com/api/track', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), }); } ``` 4. **Verify the Integration** Test the integration by triggering various interactions with the Product Finder. Confirm that the events are being accurately sent to and processed by your analytics platform in comparison to your Crobox platform analytics. ### Key Notes on Naming Conventions To maintain consistency and clarity, adhere to the following naming conventions when working with the FinderTrackEvent object: * **Identifiers:** Use the id and variant fields to uniquely identify each Product Finder and its variant. Ensure these are mapped correctly in your analytics platform. * **Activation Type:** The activation field specifies what triggered the finder (e.g., ribbon or a custom trigger). This is critical for analysing the effectiveness of different activation methods. * **User Interaction States:** Utilise the open and page fields to track user interaction states and navigation flow. * **User Inputs:** Leverage the question and answers fields to understand user choices and behaviour during their interaction. Avoid locking onto specific keys or names as they may change over time. * For example, a field currently named gender might be updated to gender-v2 in the future. Relying on static field names in your tracking code could result in broken functionality. * **Results Data:** Use the products field to track which products are being advised to the user on result pages. By following this guide, you can effectively integrate Product Finder analytics into your analytics platform, providing enhanced visibility into user behaviour and Product Finder performance. # Pre-selecting Finder Questions Learn how to use the function crobox.setFinderState to control the state of the Finder via our JavaScript API. You can pre-select answers for specific questions, and control question page navigation. ### Overview The `crobox.setFinderState` method allows you to control various aspects of the Finder experience, such as pre-selecting answers for specific questions and managing page navigation during the interaction. This method should be used in addition to the pageview event. It is not part of the pageview event itself. **Key Features** * Set pre-selected answers for questions * Control page navigation, either by skipping certain pages or showing a page with pre-selected answers. ### Implementation To implement the `crobox.setFinderState` method, you will need to include it in your `crobox.push()` call, which initializes the interaction with the Crobox API. #### Example Snippet Below is an example of how to set the Finder state with the `crobox.setFinderState` method. Note that the references below (such as `{shoe-finder}` `{page-gender}`, `{gender}`, `{men}` and `{page-category}`,`{category}` and `{trail}` ) are used as examples for the finder key, page key, question key, and answer keys. You should replace these placeholders with the appropriate keys specific to your Finder. {% code overflow="wrap" fullWidth="false" %} ```javascript window.crobox = window.crobox || []; crobox.push(function(crobox) { // Set answers for the Finder (e.g., skip a question page for a pre-selected answer or show the user a pre-filled answer within the question page) crobox.setFinderState('shoe-finder', { 'page-gender': '1', // Page is submitted (‘1’), otherwise omit the element 'gender': 'men', // Question ‘gender’ is answered with: 'men' (other option: 'women') 'category': 'trail' // Question ‘category’ is answered with: 'trail' (other options: 'road', 'hiking') }); }); ``` {% endcode %} **Explanation** `crobox.setFinderState():` This function sets the state for the Finder based on the values you define. In this example: * **Gender question:** The page key page-gender is submitted, which corresponds to the page being skipped for the user within their finder interaction. The question key gender is set to 'men', which corresponds to the answer 'men' in the Finder. * **Category question:** The page key page-category is not included in the push, which corresponds to the page being shown to the user in their finder interaction with the answer pre-filled. The key category is set to 'trail', indicating the user is interested in trail shoes. You can control whether the page is shown with pre-selected answers or skipped entirely. The setFinderState method allows you to navigate directly to a specific question, the ‘page-gender':’1’ example is used above. # Custom Themes and CSS The Product Advisor gives you the ability to personalise the look and feel of your finder tool to match your brand and advanced UX/UI requirements. This is achievable through Custom Themes and Advanced CSS which can be used to modify both the appearance and functionality of the tool. ### Custom Themes Custom themes are designed to allow extensive styling and functionality changes to the Product Advisor interface, which can help meet your advanced UX/UI needs. These are ideal for businesses requiring a fully customised look or unique arrangements that go beyond the out-of-the-box components. #### How to Get Started * Contact Account Manager: If your project requires a fully customised theme, please get in touch with your Account Manager. They will help you assess the requirements and determine if a custom theme is included in your package plan. * Consultation: Reach out to your Account Manager for a consultation to discuss your specific project needs and determine the feasibility of your request. #### What Can Be Customised? Custom themes can be applied to: * Question Types: Modify the appearance and behaviour of various question types to align with your design preferences and user experience needs. * Components: Customise or style Product Advisor components such as product cards, and buttons to fit your brand's look and feel. This allows for deeper customization of the user interface. * Custom Landing or Results Page Requirements: For customers who need a customised landing or results page, we can tailor the layout, components, and interaction logic to meet specific business or UX goals. This may include special configurations for how results and attributes are displayed, or additional sections to enhance the user’s result set. If your customisation request falls outside the predefined theme options, our team can help develop tailored solutions. ### Advanced CSS The Product Advisor’s flexibility through advanced CSS, allows you to further tweak the appearance of the finder interface to match your desired look and feel. #### Capabilities in the Finder Settings You have a variety of options for modifying the design using CSS. These settings allow you to make subtle adjustments or implement complex styles, all without needing deep coding knowledge. You can adjust the following: * General Theme CSS: Apply global styles that affect the entire Product Advisor interface across all pages. This is useful for consistent branding across the entire experience. * Page-Level Customisations: Override the global styles on a per-page basis to make more specific design tweaks. This is ideal if you want to tailor the appearance of different pages or sections within the Product Advisor tool. #### How to Apply CSS Changes 1. General Theme CSS * Navigate to the Set Up tab and enter the Design section. * Locate the Theme CSS dropdown and open the toggle. * Apply your custom CSS styles to adjust the visual aspects of the entire finder, such as fonts, colours, and layout spacing. 2. Page Level CSS * If you need to customise the look for specific pages, navigate to the Flow Tab and select the page (or question) you wish to customise. * Open the Page Settings, at the bottom left of the screen. * Open the Styling & CSS dropdown menu CSS Editor for that page and add the necessary CSS rules to modify the appearance at the page level. #### Common Use Cases * Complex Layouts: Build responsive, multi-column, and asymmetrical layouts using CSS Grid or Flexbox for greater design flexibility. * Hover & Focus States: Enhance interactivity with custom hover effects and focus states to improve user experience and accessibility. * Typography Control: Leverage variable fonts, responsive sizing, and advanced text styling (e.g., shadows, weights) to achieve precise control over font appearance. * Shadows & 3D Effects: Apply text shadows, box shadows, and 3D transformations to add depth and emphasis to UI elements for a more dynamic visual experience. For more advanced customisations, we recommend working with a developer to ensure that the CSS changes are applied effectively across your interface. ### Best Practices for Custom Themes and Advanced CSS * Consistency: Ensure that your custom themes and CSS align with your brand’s design guidelines for a seamless user experience. * Testing: Always test your changes across different browsers and devices to make sure that your customisations look and perform as expected. * Performance: Be mindful of performance when making extensive changes. Avoid using overly complex styles or unnecessary animations that could affect loading times. # Integrations Connect Crobox with CRM platforms and external product-data sources. Crobox integrations connect your experiences with the systems that hold customer or product data. ### Available integrations #### CRM webhook integrations Send Product Finder email captures and stated preferences to your CRM. Use the data for personalized follow-ups, segmentation, and customer profiles. Explore CRM webhook integrations #### Data enrichment integrations Import external product data into Crobox as product properties. Use those properties across Crobox experiences. Bazaarvoice is available as a managed data enrichment integration. Explore data enrichment integrations {% hint style="info" %} Managed integrations require configuration with the Crobox team. Contact your Account Manager to discuss availability and setup. {% endhint %} # CRM Integrations Connect your Crobox experiences to your Customer Relationship Management (CRM) platform to capture user preferences and enable personalized follow-up communications. ### Overview Crobox supports webhook connections that transmit data collected during experiences directly to your CRM. When a user completes a Product Finder questionnaire and provides their email address, their responses and preferences can be sent to your CRM in real time—enabling you to build targeted email flows, personalize future communications, and enrich customer profiles with zero-party data. {% hint style="info" %} CRM webhook integrations are a managed feature. Contact your Account Manager to discuss availability and setup requirements. {% endhint %} ### How it Works When configured, webhooks create a direct connection between your Crobox experience and your CRM platform. The data flow works as follows: 1. A user engages with your Product Finder experience and answers questions about their preferences 2. The user opts in by providing their email address (typically via a "save for later" prompt) 3. Crobox transmits the mapped data directly to your CRM via webhook 4. Your CRM receives the data and can trigger automated workflows, such as sending personalized product recommendations or storing preference data for segmentation The webhook payload is configurable, allowing you to map specific question responses to corresponding fields in your CRM schema. {% hint style="danger" %} Crobox does not store email addresses or user preference data beyond the active session. All personal data is transmitted directly to your CRM and is not retained on Crobox servers. {% endhint %} ### Use Cases
Personalized email follow-ups Capture email addresses during a Product Finder experience and send users their personalized recommendations. For example, a user completing a stroller finder can receive an email with their top matches, allowing them to revisit their results without starting over.
Personalized profiles Enrich your CRM profiles with relevant preference data. Question responses such as budget range, style preferences, or intended use can flow directly into your CRM, enabling more relevant segmentation and communication strategies.
Abandoned finder recovery When users complete a finder but don't complete a purchase, their captured preferences enable targeted re-engagement campaigns based on exactly what they were looking for.
Differentiated flows for new vs. returning customers Your CRM can check whether an incoming email address already exists in your database. * New contacts can enter a tailored welcome flow that incorporates their Product Finder preferences from the first touchpoint. * Existing contacts could skip onboarding entirely: * Their profile is enriched with the new preference data, which can trigger personalized recommendations or update their segment for future campaigns/relevant uses.
Loyalty program enrichment For brands with loyalty programs, Finder responses can enhance customer profiles with preference data. This enables personalized rewards, targeted point-earning opportunities on relevant products, or tier-specific recommendations aligned with what members have told you they care about.
{% hint style="warning" %} Crobox only handles the data transfer to your CRM via webhook, after the user provides consent. Building and maintaining the workflows that act on this data (such as email flows, segmentation rules, and loyalty program logic) is managed within your CRM by your team. {% endhint %} ### Available Integrations Crobox webhook connections are available for select CRM platforms. Current integrations include:
Cover image
Full integration support for email capture and preference mapping within Voyado/files/tQMBppj8sbvmX03uQYSa
Full integration support for email capture and preference mapping within Klaviyo/files/eFgDIPGMjThBKzzcNt9V
{% hint style="success" %} Additional CRM integrations are available upon request. Contact your account manager to discuss your specific platform requirements. {% endhint %} ### Prerequisites Before setting up a CRM webhook integration, ensure you have: * An active subscription with a CRM platform * A Crobox contract that includes CRM webhook integration (contact your account manager) * Technical resources available to collaborate on schema mapping and testing * Defined data fields in your CRM to receive the mapped webhook data ### Getting Started CRM webhook integrations require collaboration between your team, Crobox, and your CRM platform to configure properly. The process includes defining your data schema, mapping Product Finder questions to CRM fields, and testing the connection end-to-end. To begin, contact your Crobox account manager. They'll walk you through the requirements, confirm availability for your CRM platform, and coordinate the technical setup process. # Data Integrations Import external product data into Crobox as properties for use across experiences. ### Overview Crobox supports managed integrations that import external product data as Crobox properties. Use these properties across Product Finders, Campaigns, and other Crobox experiences. {% hint style="info" %} Data integrations are managed features. Contact your Account Manager to discuss availability and setup requirements. {% endhint %} ### How it works When configured, Crobox connects to your external data source and imports agreed data points as product properties. The process works as follows: 1. Your team and Crobox define the data points to import. 2. Crobox configures the managed connection with your team. 3. Imported data is stored as product properties in Crobox. 4. You use the properties across Crobox experiences. ### Use cases
Use review data in experiences Regularly import current review data as Crobox product properties. Use it to support product discovery and messaging within Product Finder results, Comparison Tools or Sagent review sections.
Enrich product attributes Import defined attributes from your external data source. Use them in Finder questions, recommendations, and Campaign targeting.
Improve product relevance Add external data points to create more relevant product experiences.
### Available integrations Crobox supports the following managed data enrichment integrations:
IntegrationDetailsCover image
Bazaarvoice
Import review data and other agreed data points as Crobox product properties.		/spaces/-M6BXLJuZMkdXQg6osAC/pages/Iut4rLzW7PbyEi1dxmdw/files/LXgZcqNIG4XPmyNXCCTs
{% hint style="success" %} Additional integrations may be available upon request. Contact your Account Manager to discuss your data source. {% endhint %} ### Prerequisites Before setting up a data enrichment integration, ensure you have: * Access to the external data source and relevant data points. * A Crobox contract that includes the integration. * Technical resources available for data mapping and testing. * Defined use cases for the imported product properties. ### Getting started Data enrichment integrations require collaboration between your team and Crobox. The process includes defining the required data points, mapping them to Crobox product properties, and testing the connection. To begin, contact your Crobox Account Manager. They will confirm availability and coordinate setup with your team. # Security Managment ### Security & Compliance with Vanta Crobox partners with Vanta to provide a secure and transparent Trust Center where customers can access key security and compliance information. Through our Vanta Trust Center, you can: * View real-time security status and compliance reports * Access security certifications and audit details * Review our data protection policies and practices For the latest security updates, compliance documentation, and certifications, visit our [**Crobox Trust Center**](https://trust.crobox.com/). {% hint style="info" %} If you need additional information, please contact your Account Manager. {% endhint %} ### Single Sign On (SSO) Crobox supports Single Sign-On (SSO) to enhance security and streamline authentication. This feature allows users to log in via their organization’s identity provider (IdP) without needing separate credentials. {% hint style="info" %} If your organization is interested in enabling SSO, please contact your Account Manager for further steps. This feature is available for Enterprise packages only. {% endhint %} ### Status Page The status of Crobox and related infrastructure services is continuously monitored and updated on our [**Crobox Status Page**](https://crobox.statuspage.io). To check the latest system status, simply click the link above. You can also subscribe to notifications about scheduled maintenance, service incidents, and updates. Access to notifications is controlled and limited to authorized users.\\ ### FAQ
What subprocessors are involved, and where are the servers located? Crobox utilizes trusted subprocessors for specific functionalities, such as hosting and system analytics. All of our (virtual) servers & services, as well as our data storage and backups, are hosted with Hetzner Online GmbH in Germany (European Union). For certain AI functionalities, an LLM can be used for generalized analytics and product classifications, but the model will not be trained on it.
How are backups managed, and what measures ensure data recovery and security? Regular automated backups are conducted, encrypted, and stored in secure environments. Disaster recovery protocols are in place to ensure data retrieval within agreed SLAs.
How does system and security logging use IP addresses? Crobox’s platform logs all communication that takes place on our platform, as we need this data for system and security purposes. For example, this log is used to detect and protect against Distributed Denial of Service (DDOS) attacks. This log data is raw system data that doesn’t have any correlation, interpretation, or other enrichment processes involved. However, system logging does include IP addresses, as these are required for security and system logging and thus can’t be excluded. To further minimize any impact, this system data is only stored in the logging infrastructure and is automatically removed after 14 days.
What is your process for managing and reporting performance or availability issues with the infrastructure? Infrastructure performance or incidents are managed according to the agreed SLA. Additionally, infrastructure incident reports are made available on our[ status page](https://crobox.statuspage.io), where stakeholders can subscribe to receive notifications. Access to notifications is controlled and limited to authorized users.
How are vulnerabilities detected? We implement daily automated scans and continuous system monitoring to identify vulnerabilities. This proactive approach ensures that any security issues or necessary patches are promptly detected and addressed. Next to this we do a yearly penetration test with an external partner, and upload the results in our [Vanta Trust Center](https://trust.crobox.com/). Finally, we are working together with the Hacker One program, which invites ethical hackers to find vulnerabilities in exchange for rewards.
Which other cloud services are integrated, and how are they authenticated or authorized? We use Hetzner Online GmbH (Germany) for our hosting and infrastructure, with secure authentication and authorization mechanisms in place for all connected services. These connections are protected by industry-standard security protocols. For more information, refer to our [Vanta Trust Center](https://trust.crobox.com/).
# Data Security ### Data Security with Vanta Crobox partners with Vanta to ensure the highest standards of data security and compliance. Through our Vanta Trust Center, customers can: * Review our data security policies and controls * Access encryption and data protection details * Monitor compliance with industry security standards For full transparency on how we protect your data, visit our [**Crobox Trust Center**](https://trust.crobox.com/). {% hint style="info" %} If you need additional information, please contact your Account Manager. {% endhint %} ### Confidential Data Handling Confidential data is highly sensitive and restricted to authorized employees with documented approval. It must be encrypted at rest and in transit, and never stored in non-production environments or on personal devices. Backups, mobile devices, and hard drives must be encrypted, and disposal requires secure wiping or destruction. Transfers outside the company need a legal contract and management approval. ### Restricted Data Handling Restricted data is only accessible to authorized users based on business needs. Unauthenticated access is not allowed, and external transfers require management approval and legal agreements. Paper records and storage devices must be securely handled, and disposal requires secure wiping or destruction. ### Public Data Handling Public data is not sensitive and can be freely shared without special security measures. For more details, visit our [**Vanta Trust Center**](https://trust.crobox.com/) or contact your Account Manager. ### Data Retention Data is retained only as long as necessary for business, regulatory, or contractual requirements. Personally identifiable information (PII) is deleted or de-identified once it is no longer needed. Retention periods are documented within our [**Data Management Policy**](https://trust.crobox.com/). ### Data & Device Disposal Confidential and restricted data is securely deleted when no longer needed. Third-party vendors handling sensitive data must meet Crobox’s security standards. All company devices are wiped before disposal, and physical documents are securely shredded. ### Annual Data Review Management reviews data retention policies annually to ensure compliance. Data is securely disposed of in line with company policy and legal obligations. ### FAQ
What personal data is collected, and how is it processed or stored? Crobox does not collect any PII (Personally Identifiable Information). All collected data is pseudonymized, ensuring that no user-specific identifiers are stored.
How does Crobox handle Zero-Party Data? Crobox collects zero-party data that customers voluntarily share, such as preferences and purchase intentions. This data is reliable, privacy-compliant, and provides valuable insights for personalization while respecting customer control over what they share.
Does Crobox require a Data Processor Agreement (DPA)? A DPA is not required to use Crobox’s platform, as PII is not stored. Therefore, the impact of a data breach is low. However, organizations that wish to have this in place can request Crobox’s DPA.
How is user data exported or deleted upon contract termination? Upon contract termination, all data is securely deleted following GDPR guidelines. Export of data, if required, is provided in standard formats to ensure compatibility with external systems.
\\ # Legal # Cookie Policy ### Storage Types & Purpose **First Party Cookie** The cookie \_crbx is a **first party cookie**, and will not be used outside of our client’s domain. As a default the \_crbx cookie is set as a temporary “*session*” cookie, meaning that it is automatically removed after the browser is closed. It is necessary in order to keep a consistent experience for the visitor, also in case our client uses subdomains. Visitors will be able to see and use the Crobox functionality, but will not be included in analytics data, will not see any AB test variants, and no data will be persisted in connection to that session. If consent is given by the visitor, or not needed according to our client's cookie policy, the cookie will be set as a “*persistent*” cookie, which will expire after the set time by our client (default 180 days). It is then used for *aggregated* analytics & AB testing and to remember a given consent. It is in no way used for tracking or marketing purposes. A returning visitor will not see any pre-filled information or content based on information given in a previous session. **Temporary Local & Session Storage** Crobox makes use of *necessary*, non-persistent local and session storage. Local storage is needed for when the visitor uses multiple browser tabs, but is treated as *temporary*. Once the visitor closes their browser, both storage types will expire, and no data connected to the session, excluding explicit opt-out information, is persisted without proper consent. ### Website Integration Instructions Please follow our [Visitor's Consent - Website Integration Instructions](/getting-started/first-steps/cookie-wall-settings#visitors-consent-website-integration-instructions) to implement Crobox according to your cookie policy. # Developer Mode ## Overview Developer Mode offers advanced users access to features that can significantly influence the platform's performance, security, and data integrity. This mode is designed for developers who need deeper control over customization and integration within the Crobox platform. By enabling Developer Mode, users can: * Inject custom JavaScript code * Add NPM dependencies in the Javascript Snippet. * Create advanced components using JSX. These capabilities are intended for developers with a deep understanding of the technical aspects of web development and platform security. {% hint style="warning" %} Developer mode is not available for Essential package plans, nor for non-technical users. {% endhint %} ## Enabling Developer Mode To enable Developer Mode, users must agree to the Developer Mode Agreement, which includes accepting all legal terms and conditions as outlined within the app. To enable this setting and confirm you agree with the legal considerations, go to: 1. Crobox platform 2. My profile 3. Enable Developer Mode 4. Read the terms and conditions 5. Click accept and request Your request will be processed by authorized Crobox employees and approved for usage. {% hint style="info" %} Contact your Customer Success Manager for further details or questions surrounding the capabilities of developer mode. {% endhint %} # General Terms and Conditions ### 1. DEFINITION AND INTERPRETATION 1. The definitions and rules of interpretation in this clause apply to these general terms and conditions. **Affiliate**: means an entity that directly or indirectly controls, is controlled by, or is under common control by the Customer. **Agreement**: means the agreement between Crobox and the Customer including the Terms and Conditions. **Authorized Users**: means those employees and workers of the Customer who are authorized by the Customer to use the Product. **Business Day**: means any day which is not a Saturday, Sunday or public holiday in the Netherlands. **Business Hours**: means 9.00 to 17.00 local Amsterdam time, each Business Day. **Confidential Information**: means information disclosed by (or on behalf of) one party to the other party in connection with or in anticipation of the Agreement (including the content of the Agreement) that is marked as confidential or, from its nature, content or the circumstances in which it is disclosed, might reasonably be supposed to be confidential. It does not include information that the recipient already knew, that becomes public through no fault of the recipient, that was independently developed by the recipient or that was lawfully given to the recipient by a third party. **Crobox**: means Crobox B.V. and/or Crobox Services B.V., both limited liability companies, incorporated under the laws of the Netherlands, whose registered office is at Amsterdam, the Netherlands and whose office address is at Kloveniersburgwal 131H, 1011 KD Amsterdam, the Netherlands and registered with the Trade Register of the Chamber of Commerce in Amsterdam, the Netherlands, under numbers 65563956 and 80401120. **Customer**: means the customer of Crobox that entered into the Agreement. **Customer Site**: means those website(s) owned and operated by the Customer on which Crobox agrees to implement the Product and the Services. **Data Protection Laws**: means the Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of Personal Data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation) (“GDPR”) as may be amended, modified or replaced from time to time, and including all related codes of practice. **Derivative Data**: means information, know-how (including Crobox’s underlying data collection methodologies), data and materials that are derived, prepared or generated by Crobox and/or its sub-contractors within Crobox’s environment pursuant to (and/or as a consequence of) the Product. **Effective Date**: is the date on which Crobox and the Customer enter into the Agreement. **Fees**: means the fees for the Product and the Services to be paid by the Customer to Crobox and which are included and agreed upon in the Agreement. **Intellectual Property Rights**: means all patents, rights to inventions, utility models, copyright and related rights, trademarks, service marks, trade, business and domain names, rights in trade dress or get-up, rights in goodwill or to sue for passing off, unfair competition rights, rights in designs, rights in computer software, database rights, topography rights, moral rights, rights in confidential information (including know-how and trade secrets) and any other intellectual property rights, in each case whether registered or unregistered and including all applications for and renewals or extensions of such rights, and all similar or equivalent rights or forms of protection in any part of the world. **Personal Data**: means any Personal Identifiable Information (PII), such as names, physical and/or virtual addresses (e.g. email, IP address) that can be used to correctly and unanimously identify ("single out") any data subject ("natural person"). Personal Data excludes [UUID's](https://en.wikipedia.org/wiki/Universally_unique_identifier), which are randomly generated and stored in first party cookies set by Crobox and are used to identify sessions of users (e.g. database keys). **Product**: means the Software functionality and Services made available by Crobox as an application service provider (and as such functionality and services may thereafter be updated by Crobox from time to time). **Services**: means all (System-based) services provided by Crobox to the Customer under the Agreement.\ **Software:** means the software object codes in machine-readable form only, necessary to operate the System, including all modifications and enhancements to such codes and scripts, consisting of, among other things, the Javascript and associated protocols provided by Crobox to the Customer pursuant to the Agreement which when implemented on the Customer Site manages the Product. **System**: means a “software as a service” (SAAS) system that is an online real-time prediction/conversion/profiling engine and which (i) enables a Customer to automatically build full personal profiles of its Customer Site visitors and based on these profiles to entice and convince these visitors to make certain actions, all focusing in particular on increasing online conversion (eCommerce), and (ii) consists of, among other things, the Software. **Term**: has the meaning given in clauses 13.1. **Terms and Conditions**: means these general terms and conditions, which are annexed to the proposal or the Agreement and which form an integral part of and are applicable to the Agreement. **Third-Party Users**: means agency partners or other third parties identified and notified to Crobox in writing which the Customer may permit to use the Product in accordance with clause 2.1 b). **Virus**: means anything or device (including any software, code or file) which may: prevent, impair or otherwise adversely affect the operation of any computer software, hardware or network, any telecommunications service, equipment or network or any other service or device; prevent, impair or otherwise adversely affect access to or the operation of data, including the reliability of any data (whether by rearranging, altering or erasing the data in whole or part or otherwise); or adversely affect the user experience, including worms, Trojan horses, viruses and other similar things or devices. 2. Clause, schedule and paragraph headings shall not affect the interpretation of the Agreement. Where the words "include(s)", "including" or "in particular" are used in the Agreement, they are deemed to have the words "without limitation" following them. ### 2. USE OF THE PRODUCT 1. Subject to the timely payment by the Customer of the Fees and solely during the Term, Crobox grants to the Customer a non-exclusive, non-transferable right to: 1. permit the Authorized Users to use the Product; 2. permit Third Party Users to use the Product; and 3. permit a Customer Affiliate or Affiliates to use the Product in each case solely for the Customer’s internal business operations (and if applicable the business purposes of a relevant Customer Affiliate). 2. The Customer shall be solely responsible for any failure of an Authorized User or Third Party User to comply with the terms of the Agreement and shall ensure that Authorized Users and Third Party Users discontinue use upon completion of work for the Customer (or if earlier, upon termination of the Agreement). 3. The Customer shall not: 1. attempt to copy, modify, duplicate, create derivative works from, frame, mirror, republish, download, display, transmit, or distribute all or any portion of the Product (as applicable) in any form or media or by any means; 2. attempt to reverse compile, disassemble, reverse engineer or otherwise reduce to human-perceivable form all or any part of the Product; 3. access all or any part of the Product in order to build a product or service which competes with the Product; 4. use the Product to provide services to third parties; 5. license, sell, rent, lease, transfer, assign, distribute, display, disclose, or otherwise commercially exploit, or otherwise make the Product available to any third party; or 6. (without prejudice to clause 2.1.2) attempt to obtain, or assist third parties in obtaining, access to the Product. 4. The Customer shall use all reasonable endeavors to prevent any unauthorized access to, or use of, the Product and, in the event of any such unauthorized access or use, promptly notify Crobox. ### 3. SERVICES 1. Crobox shall, during the Term, provide the Services. 2. Crobox shall use commercially reasonable endeavors to make the Services available 24 hours a day, seven days a week, except in the event of (planned or unscheduled) maintenance regarding the System. 3. Crobox shall, as part of the Services provide the Customer with Crobox’s customer support services during Business Hours in accordance with, and if applicable, the Agreement. 4. Crobox uses Customers’ first party cookies or universally unique identifiers to operate its Services. 5. In accordance with the service level agreement of Crobox, Crobox shall to its best and reasonable endeavors: 1. repair and/or solve all operational issues, problems and/or errors regarding the Services, such as downtime of Crobox’s servers as soon as reasonable possible after reporting by the Customer to the help-desk of Crobox; and 2. respond to support questions during Business Days between 09.00 and 17.00 hours and as soon as possible after reporting by the Customer to the help-desk of Crobox; and 3. offer out of hours support during key trading moments (which will be notified to Crobox by Customer and agreed in advance – e.g. Black Friday week). ### 4. RESELLERS Crobox may use resellers or intermediaries for its benefit. In accordance with clause 18 and 21, any agreement entered between the Customer and a reseller or intermediary of Crobox shall in no event (directly or indirectly) affect the Agreement, the Terms and Conditions and/or any provision thereof. Crobox agrees upon separate terms from these “general terms and conditions” directly with the reseller. ### 5. PERSONAL DATA 1. The Customer shall implement the Product in accordance with all of Crobox’s reasonable instructions deemed necessary to enable Crobox to comply with applicable Data Protection Laws. 2. Customer acknowledges and agrees that it is the Customer’s responsibility to ensure that Customer’s use of the Product complies with all Data Protection Laws applicable to the Customer (including, in particular, with respect to the placing and use of cookies, upon which the Product relies, and the capturing of any consent to cookies required to be obtained from the relevant end user). 3. The Customer indemnifies Crobox for all (legal) claims, costs, and damages that may arise, for example, as a result of a claim by a third party, related to or arising out of the infringement by the Customer of any obligations under the laws and regulations related to the processing, handling or the use by the Customer of Personal Data in the context of the services or services that the Customer supplies to its consumers. 4. By default, Crobox shall not collect, store and/or save any Personal Data of any users from the Customers Site. 5. Only upon explicit and written request of Customer, Crobox shall process Personal Data in the performance of the Agreement. If so, Crobox agrees and warrants that it shall: 1. comply with all privacy and data protection laws and regulations applicable (including the EU General Data Protection Regulation); 2. process Personal Data only: 1. on behalf of and for the benefit of the Customer; 2. in accordance with the Customer’s instructions; 3. for the purposes authorized by the Agreement or otherwise by the Customer; and 4. in so far as necessary for the service rendered to the Customer and as permitted or required by law; 3. maintain the security, confidentiality, integrity and availability of the Personal Data; 4. implement and maintain appropriate technical, physical, organizational and administrative security measures; 5. not transfer the Personal Data outside of the borders of the European Economic Area (EEA) or countries deemed to have an adequate level of protection, without explicit approval from the Customer and the required protective measures in place; 6. ensure it has measures, procedures, practices and other safeguards to protect the Personal Data against: 1. anticipatable threats or hazards to its security and integrity; and 2. loss, unauthorized access to, or acquisition or use of or unlawful processing; and 7. promptly inform the Customer of any actual or suspected security incident or breach involving the Personal Data. 6. To the extent that Crobox permits a sub-contractor to process the Personal Data, Crobox shall ensure that it binds such sub-contractor to obligations which provide a similar level of protection, but in no way less restrictive, as paragraph 5.5. 7. Crobox shall, upon the termination of the Agreement, securely erase or destroy all records or documents containing the Personal Data. Crobox accepts and confirms that it is solely liable for any unauthorized or illegal processing or loss of the Personal Data, where Crobox fails to erase or destroy the Personal Data upon termination of the Agreement. ### 6. CROBOX'S OBLIGATIONS 1. Crobox shall perform the Services with reasonable skill and care, as may be expected from a professional service provider. In doing so, Crobox shall comply with all applicable laws and regulations with respect to its activities under the Agreement. 2. Notwithstanding clause 6.1, Crobox: 1. is not responsible for any delays, delivery failures, or any other loss or damage resulting from the transfer of data over third party communications networks and facilities, including the internet. The Customer acknowledges that the Product may be subject to limitations, delays and other problems inherent in the use of such communications facilities; 2. does not accept responsibility for any use of the Product contrary to Crobox’s instructions, or modification or alteration of the Product by any party other than Crobox or Crobox’s daily authorized contractors or agents; 3. does not warrant that the Customer’s use of the Product will be uninterrupted or error-free; nor that the Product and/or the information obtained by the Customer through the Product will meet the Customer’s requirements not explicitly communicated and agreed beforehand; and/or 4. is entitled to temporarily and/or completely limit the use of the Product to the extent necessary for the maintenance or upgrades needed to improve the Product, with prior notification but without any right of compensation of the Customer. 3. The Agreement shall not prevent Crobox from entering into similar agreements with third parties, or from independently developing, using, selling or licensing documentation, products and/or services which are similar to those provided under the Agreement. Likewise, the Agreement shall not prevent Customer from entering into similar agreements with third parties. 4. No conditions, warranties or other terms apply to the Product supplied by Crobox under the Agreement unless expressly set out in the Agreement or the Terms and Conditions. No implied conditions, warranties or other terms apply (including any implied terms as to satisfactory quality, fitness for purpose, or conformance with description). ### 7. CUSTOMER’S OBLIGATIONS 1. The Customer shall: 1. provide Crobox with: (i) all necessary co-operation in relation to the Agreement; and (ii) all necessary access to such information as may be required by Crobox in order to render the Product, including but not limited to security access information and configuration services; 2. comply with all applicable laws and regulations with respect to its activities under the Agreement; 3. carry out all other Customer responsibilities set out in the Agreement in a timely and efficient manner. In the event of any delays in the Customer’s provision of such assistance as agreed by the parties, Crobox may adjust any agreed timetable or delivery schedule as reasonably necessary by providing notification reasonable time beforehand; 4. ensure that the Customer Affiliates, Authorized Users and Third Party Users use the Product in accordance with the terms and conditions of the Agreement and shall be responsible for any Authorized User’s, Third Party Users, or Affiliates breach of the Agreement; 5. to the extent applicable, obtain and shall maintain all necessary licenses, consents, and permissions necessary for Crobox, its contractors and agents to perform their obligations under the Agreement, including without limitation the Services; 6. be solely responsible for procuring and maintaining its own network connections and telecommunications links from its systems to Crobox’s hosting environment, and all problems, conditions, delays, delivery failures and all other loss or damage arising from or relating to the Customer’s network connections or telecommunications links or caused by the internet; and 7. permit and assist Crobox to monitor the Customers Site for the purpose of calculating a change of the Fee in accordance with clause 8.5. ### 8. FEES AND PAYMENT 1. The Customer shall pay the Fees to Crobox within 30 (thirty) days after receiving the invoice. 2. If Crobox has not received payment of an undisputed invoice for any reasons, and after reminding the Customer at least twice in a period of 30 (thirty) days, without prejudice to any other rights and remedies of Crobox, Crobox may, without liability to the Customer, disable the Customer’s access to the Product and/or all or part of the Services and Crobox shall be under no obligation to provide the Product and/or any or all of the Services while the undisputed invoice(s) concerned remain unpaid. 3. All amounts and fees stated or referred to in the Agreement: 1. shall be payable in Euro’s; 2. are non-cancellable and non-refundable; and 3. are exclusive of value added tax, which shall be added to Crobox’s invoice(s) at the appropriate rate. 4. All payments shall be of the gross amount specified in the Agreement without deduction of any taxes, including any non-resident withholding tax which may be imposed on payments by the Customer to Crobox. 5. In accordance with the Agreement, Crobox shall have the right, at any time during the Term, to adjust the monthly Fee. The announced Fee changes will become effective 1 (one) month after the notice by Crobox to the Customer of such changes. The Customer shall have the right to terminate the Agreement if it does not approve with the announced Fee change. ### 9. PROPRIETARY RIGHTS 1. The Customer acknowledges and agrees that Crobox and/or its licensors own all Intellectual Property Rights and any other rights in the Product, Software and System. Except as expressly stated in the Agreement, the Agreement does not grant the Customer any Intellectual Property Rights or any other rights or licenses in respect of the Product, Software, and System and the Customer shall not acquire or claim any rights in respect of the Product, Software, and System by virtue of the rights granted under the Agreement. 2. Crobox acknowledges and agrees that the Customer and/or its licensors own all Intellectual Property Rights and any other rights in the Customer's Site. Unless expressly stated in the Agreement, the Agreement does not grant Crobox any Intellectual Property Rights or any other rights or licenses with respect to the Customer Site and Crobox shall not acquire or claim any rights in respect of the Customer Site by virtue of the rights granted under the Agreement. 3. Crobox confirms that it has all the rights in relation to the Product that are necessary to grant all the rights it purports to grant under, and in accordance with, the terms of the Agreement. 4. Crobox shall have the right to use, at its own risk, the Derivative Data for the purpose of research and development of the Product, Software and/or System, and the Customer hereby grants Crobox such right without any liability to Customer. ### 10. CONFIDENTIALITY 1. Each party may be given access to Confidential Information from the other party only if absolutely necessary in order to perform its obligations under the Agreement. 2. Each party shall hold the other’s Confidential Information in confidence and, unless required by law, not make the other’s Confidential Information available to any third party, or use the other’s Confidential Information for any purpose other than the implementation of the Agreement. 3. Each party shall take all reasonable steps to ensure that the other’s Confidential Information to which it has access is not disclosed or distributed by its employees or agents in violation of the terms of the Agreement. 4. Neither party shall be responsible for any loss, destruction, alteration, or disclosure of Confidential Information caused by any third party. 5. The Customer acknowledges that details of the Product not publicly available, and the results of any performance tests of the Product not publicly available, constitute Crobox’s Confidential Information. 6. This clause 10 shall survive termination of the Agreement. ### 11. INDEMNITY 1. Crobox shall, subject to clause 11.3, defend the Customer, its officers, directors and employees against any claim that the Product infringes any Dutch patent effective as of the Effective Date only or any other Intellectual Property Rights provided that: 1. Crobox is given prompt notice of any such claim; 2. the Customer provides reasonable co-operation with Crobox in the defense and settlement of such claim, at Crobox’s reasonable expense; 3. Crobox is given sole authority to defend or settle the claim; and 4. except with Crobox’s prior written permission, the Customer makes no admission and takes no action which would compromise Crobox’s defense or settlement of the claim or any counterclaim by Crobox, unless the Customer is forced to do so due to inactivity on the side of Crobox. 2. In the defense or settlement of any claim, Crobox may procure the right for the Customer to continue using the Product, replace or modify the Product so that they become non-infringing or, if such remedies are not reasonably available, terminate the Agreement on 10 (ten) Business Days’ notice to the Customer without any additional liability or obligation to pay damages or other additional costs to the Customer. If Crobox terminates the Agreement, any fees paid to Crobox in connection with the Agreement upfront will be refunded to the Customer pro rata within 10 (ten) days of termination. 3. In no event shall Crobox, its employees, agents and sub-contractors be liable to the Customer under the indemnity at clause 11.1 to the extent that the alleged infringement is based on: 1. a unauthorized modification of the Product by anyone other than Crobox; or 2. the Customer’s use of the Product in a manner contrary to the instructions given to the Customer by Crobox; or 3. the Customer’s use of the Product after written notice of the alleged or actual infringement from Crobox or any appropriate authority. 4. The foregoing states the Customer’s sole and exclusive rights and remedies, and Crobox’s (including Crobox’s employees’, agents’ and sub-contractors’) entire obligations and liability, for infringement of any Intellectual Property Rights. ### 12. LIMITATION OF LIABILITY 1. Subject to the provisions of clause 12.4, this clause 12 sets out the entire (financial) liability of Crobox (including any liability for the acts or omissions of Crobox’s employees, agents and sub-contractors) to the Customer respect of: 1. any breach of the Agreement; 2. any use made by the Customer of (any part of) the Product; and 3. any representation, statement or tortious act or omission (including negligence) or breach of statutory duty arising under or in connection with the Agreement. 2. Subject to clause 12.4 and except as expressly and specifically provided in the Agreement, the Customer assumes sole responsibility for results obtained from the use of the Product by the Customer, and for conclusions drawn from such use. 3. Crobox shall have no liability for any damage caused by: 1. any Virus and/or update of the System/Software causing any damages in so far as (i) Crobox has properly and timely notified the Customer of such Virus and/or update causing damages and (ii) the damages occur without any default of Crobox; 2. any downtime of Crobox’s servers or the System; 3. errors or omissions in any information, instructions or scripts provided to Crobox by the Customer in connection with the Product; or 4. any actions taken by Crobox at the Customer’s direction, unless Crobox must have been aware but omitted to inform the Customer of the risks involved. 4. Nothing in the Agreement excludes the liability of Crobox: 1. for death or personal injury caused by negligence; 2. for fraud or fraudulent misrepresentation; or 3. for any other liability which may not be limited or excluded by applicable laws. 5. Subject to clause 12.4, Crobox shall not be liable whether in tort (including for negligence or breach of statutory duty), contract, misrepresentation, restitution or otherwise for any (in)direct damages, such as loss of profits, loss of business, depletion of goodwill and/or similar losses or loss or corruption of data or information, or pure economic loss, or for any special, indirect or consequential loss, costs, damages, charges or expenses however arising under the Agreement. 6. The Parties’s total aggregate liability in contract, tort (including negligence or breach of statutory duty), misrepresentation, restitution or otherwise, arising in connection with the performance or contemplated performance of the Agreement shall be limited to the total sum of monthly Fees paid by the Customer to Crobox from the Effective Date until the date on which the first such claim arose. ### 13. TERM AND TERMINATION 1. The Agreement shall commence on the Effective Date and shall continue until terminated by either party in accordance this clause (the “Term”). 2. A party may terminate the Agreement 1 (one) month prior to the end of the then current term upon a written notice to the other party. The Agreement shall only be terminated after confirmation by the other party of receiving such termination notice. 3. Without prejudice to any other rights or remedies which the parties may have, Crobox may terminate the Agreement without liability to the Customer immediately on giving written notice to the Customer if the Customer fails to pay any undisputed amount due under the Agreement on the due date for payment and remains in default not less than 30 (thirty) days after being notified in writing to make such payment. 4. Without prejudice to any other rights or remedies which the parties may have, either party may terminate the Agreement without liability to the other immediately on giving written notice to the other if: 1. (i) the other party is in material breach of the Agreement where the breach is incapable of remedy; or (ii) the other party is in material breach of the Agreement where the breach is capable of remedy and fails to remedy that breach within 14 days after receiving written notice of such breach; 2. the other party enters into an arrangement or composition with or for the benefit of its creditors, goes into administration, receivership, or administrative receivership, is declared bankrupt or insolvent or is dissolved or otherwise ceases to carry on business; or 3. any analogous event happens to the other party in any jurisdiction in which it is incorporated or resident or in which it carries on business or has assets. 5. On termination of the Agreement for any reason: 1. all licenses granted by Crobox under the Agreement shall immediately terminate; 2. the Customer can no longer use the Product, nor access to any profiles of Customer Site visitors; 3. each party shall return or destroy as directed by the other party and make no further use of any equipment, property, Confidential Information and other items (and all copies of them) belonging to the other party; and 4. the accrued rights of the parties as at termination, or the continuation after termination of any provision expressly stated to survive or implicitly surviving or coming into effect after termination, shall not be affected or prejudiced. ### 14. FORCE MAJEURE Neither party shall have any liability to the other under or in connection with the Agreement if it is prevented from, or delayed in performing, its obligations under the Agreement or from carrying on its business by acts, events, omissions, or accidents beyond its reasonable control. These include (without limitation) strikes, lock-outs, or other industrial disputes (whether involving the workforce of either party to the Agreement or any other party), failure of a utility service or transport network, act of God, war, riot, civil commotion, malicious damage, compliance with any law or governmental order, rule, regulation or direction, accident, breakdown of plant or machinery, fire, flood, storm or default of suppliers or subcontractors. ### 15. VARIATION 1. Crobox may, from time to time and subject to Customer’s prior written consent, which shall not be unreasonably withheld or delayed, change the Product, provided that such changes do not materially affect the nature or quality of the Product and, where practicable, it will give the Customer at least 1 (one) month’s notice of any change. 2. Subject to clause 15.1, no variation of the Agreement shall be valid unless it is by written notice agreed upon by both parties. ### 16. WAIVER 1. A waiver of any right under the Agreement is only effective if it is in writing and it applies only to the circumstances for which it is given. No failure or delay by a party in exercising any right or remedy under the Agreement or by law shall constitute a waiver of that (or any other) right or remedy, nor preclude or restrict its further exercise. No single or partial exercise of such right or remedy shall preclude or restrict the further exercise of that (or any other) right or remedy. 2. Unless specifically provided otherwise, rights arising under the Agreement are cumulative and do not exclude rights provided by law. ### 17. SEVERANCE 1. If any provision of the Agreement (or part of any provision) is found by any court or other authority of competent jurisdiction to be invalid, illegal or unenforceable, that provision or part-provision shall, to the extent required, be deemed not to form part of the Agreement, and the validity and enforceability of the other provisions of the Agreement shall not be affected. 2. If a provision of the Agreement (or part of any provision) is found illegal, invalid or unenforceable, the provision shall apply with the minimum modification necessary to make it legal, valid, and enforceable. ### 18. ENTIRE AGREEMENT 1. The Agreement constitutes the whole agreement between the parties and supersedes all previous agreements between the parties relating to its subject matter. 2. Each party acknowledges that, in entering into the Agreement, it has not relied on, and shall have no right or remedy in respect of, any statement, representation, assurance or warranty (whether made negligently or innocently) (other than for breach of contract), as expressly provided in the Agreement. ### 19. ASSIGNMENT 1. Neither party may assign any of its rights or obligations under the Agreement without the prior written consent of the other. Such consent is not to be unreasonably withheld save that either party can assign to any of its Affiliates without the consent of the other. 2. Each party that has rights under the Agreement is acting on its own behalf and not for the benefit of another person. ### 20. NO PARTNERSHIP OR AGENCY Nothing in the Agreement is intended to, or shall be deemed to, constitute a partnership or joint venture of any kind between any of the parties, nor constitute any party the agent of another party for any purpose. No party shall have authority to act as agent for, or to bind, the other party in any way. ### 21. RIGHTS OF THIRD PARTIES A person who is not a party to the Agreement shall not have any rights under or in connection with it. ### 22. NOTICES 1. Any notice required to be given under the Agreement shall be in writing, including email. 2. This clause 22 shall not apply to the service of any in any proceedings or other documents in any legal action. ### 23. GOVERNING LAW AND JURISDICTION 1. The Agreement, and any dispute or claim arising out of or in connection with it or its subject matter or formation (including non-contractual disputes or claims), shall be governed by, and construed in accordance with, the law of the Netherlands. 2. The parties irrevocably agree that the court of Amsterdam shall have exclusive jurisdiction to settle any dispute or claim that arises out of, or in connection with, the Agreement or its subject matter or formation (including non-contractual disputes or claim). # User Management ### New to Crobox Welcome! You will have received an **invitation to create your account in your inbox**. Follow the prompts to create your account in the [Crobox App](https://app.crobox.com/) (accessible via your browser). ### User Permissions There are four user states available for regular users, each with different access points and options available to suit the needs of your teams and roles. Below you can note the key differences between each status:
ViewerEditorPublisherAdmin
Limited access, allowing users to only view revealed areas of the app without making any changes.

Access to modify settings within experiences.

Editors do not have permissions to publish experiences and updates.

Complete access to create and manage experiences, including publishing.

Publishers do not have permissions in user management.

Complete access to all menus, settings, publishing and account settings.

Admins have permissions to add new users or team members to join their account.

{% hint style="info" %} User permissions are set when your invitation is sent. An admin on your team can update these permissions, or you can contact your Account Manager for any necessary changes. {% endhint %} ### Invite Users to your Account For admin users only, you can invite new members to join your team via the My Organization menu. 1. Navigate to the left side navigation menu and select your account at the bottom of the menu, then click on 'My Organization'. 2. Locate the second tab named 'Users', and select the 'Invite User' button at the bottom of the page. 3. Choose the account permission for the new user and add their email address. To send the invitation to their inbox, select share on the right of the field. Admin users additionally have the ability to adjust the account permissions for other members of their team. To do this, select the three dot menu of the user and click edit. Permissions can be changed for the team member here. ### Two-Factor Authentication To enable Two-Factor Authentication: 1. Navigate to the left side navigation menu and select your account at the bottom of the menu, then click on 'My Profile'. 2. Activate the Enable Two-Factor Authentication toggle, and follow the prompts. {% hint style="warning" %} **Having issues with your Two-Factor Authentication?**\ If you are locked out of your account, contact Support to disable your 2FA from the system and reset your login. {% endhint %} ### How to Reset Your Password You can change your password at any time for security reasons or reset it if you forget it. #### Change password via your profile 1. Navigate to the left side navigation menu and select your account at the bottom of the menu, then click on 'My Profile'. 2. Under Login Details, click the edit icon within your password field to update it. 3. Enter your old password and new password, then select save to confirm the changes. #### Reset your password if forgotten 1. To reset your password, navigate to the [Crobox login page](https://app.crobox.com/) and enter your email then select continue. 2. When you arrive at the next screen, select **Forgot password?** and enter your email address to receive the reset link in your inbox. 3. Click the link in the received email. 4. Create a new password and follow the prompts. # Accounts and Billing ### **Manage Your Account Plan** Upgrading to a higher plan is simple and can unlock features or additional support to compliment your current Crobox experiences. This includes, access to core functionality, AI features, integrations, setup and support. To enhance your understanding of our pricing structure and key terms related to engagements and impressions, we've provided the following definitions.
Engagements — An engagement is when a visitor has clicked on a Crobox experience. An **engagement** is counted when a visitor clicks on a Crobox experience, like opening a Product Advisor. Each Advisor can count only once per session. For example, if a user interacts with two different Advisors in a session, it counts as two engagements.
Impressions — An impression is when a visitor has viewed a Crobox experience. An **impression** is counted when a visitor views a Crobox campaign. Each unique campaign counts as one impression per session if seen by a visitor, even if shown multiple times. For instance, if one campaign applies to multiple products on a page and is seen ten times by a visitor, it counts as just one impression per session. However, if there are five valid and activated Crobox campaigns on a page, each campaign counts as one impression during a session, resulting in five impressions.
For a detailed comparison of our plans and licensing packages, please visit our [Plans and Pricing page](https://www.crobox.com/plans?utm_source=documentation\&utm_medium=CTA\&utm_campaign=accounts-billing-pricing). {% hint style="info" %} For further assistance or information to upgrade, please contact your Account Manager, who can provide more details and support throughout the process. {% endhint %} ### **Containers and Accounts** Our platform enables you to manage multiple containers within a single account. Each container operates independently, allowing you to effortlessly handle diverse experiences, environments, or configurations under a unified, centralized account. This structure simplifies operations while ensuring clear separation between the activities of individual containers. This flexibility allows the Crobox app to integrate seamlessly in various scenarios, such as: * **Multi-Site Architecture**: Add your relevant domains to the website integration tab for streamlined multi-domain management. * **Multi-Brand Strategy**: Create separate containers for each brand's unique environment, all managed conveniently within a single account. ### **Billing** The Billing tab in the app provides an easy way to access and download your invoices per account. Simply navigate to the billing tab within 'My Organization', select the desired invoice, and download it for your records. If you have any changes in invoice information, you can update it and save your changes here. {% hint style="info" %} Legacy clients may not have invoice information held in the Billing tab. If you're unable to locate your billing information, please reach out to your Account Manager for assistance. {% endhint %} # Troubleshooting and Support If you encounter any issues or need assistance, our support process is designed to provide you with the resources you need: 1. **Knowledge Base**: Explore our [Crobox Docs](/) for articles, FAQs, and step-by-step guides on common topics. 2. **Onboarding Resources**: Refer to your onboarding training materials, including recorded training sessions, for in-depth guidance on using the platform. 3. **In-App Hints**: Look for helpful information points within the app that provide quick tips and contextual guidance for various features. 4. **Contact Support**: If you need additional help, submit a support request through our platform’s support system. You can find this on the left side navigation, 'Contact Us'. We’re here to ensure you have the support and resources required for your success.