- Learn what pages are and how to use them
In Optimizely, you can create reusable templates called pages that tell Optimizely where and when to deliver experiments, personalized experiences, and recommendations on your site. For example: A page might tell Optimizely to run an experiment on your homepage (where), immediately on initial page load (when).
You can tie Optimizely pages to a specific URL or pattern of URLs on your website, or you can apply them globally across your entire website.
For the sake of clarity, this article will use the term site pages when referring to the web pages that make up your site.
Here are the two most important facts about pages:
Pages are reusable and save you time. Use them to build templates for common URL targeting patterns and activation modes for key parts of your site. Once you've created them, you can quickly add them to any future experiment or campaign and make adjustments as needed.
You can set up pages in advance or in real time. Build out pages that target the most important parts of your site when you set up Optimizely. Then, add more as you go when creating experiments or personalization campaigns.
Here's how to create a new page in Optimizely. Read on for more detail on how pages work in Optimizely and how you might use them.
Anatomy of a page
Pages are building blocks for experiments in Optimizely. A page tells Optimizely where to run an experiment on your site and when to activate it.
Pages live in projects, which are workspaces in your Optimizely account that are available to a set of collaborators. When you create a page in a project, it's available for use with all experiments in that project.
Pages use URL targeting to identify where you'll personalize or experiment on your site:
A single URL where you want to change the experience, such as the homepage of a site.
A set of URLs that share the same template, such as all the product detail site pages on an e-commerce site.
A global URL that targets all web pages with the Optimizely snippet to change elements that appear across the site pages, such as a navigation menu.
Within the boundaries of your project, you'll use the URL patterns above to group parts of your site as pages in Optimizely.
Pages also allow you to use a set of triggers and conditions that tell Optimizely when the page should activate. If you have a traditional, static website, you'll likely use the default activation mode -- Immediate -- most of the time. Immediate activation tells Optimizely to activate the page right away when the Optimizely snippet loads, so your visitors' experience is seamless.
Do you have a single page application (SPA)?
If you're working with a single page application, such as a site built on React, Angular, Ember, Backbone, etc., you may need more granular controls for pages.
When to use pages
Here is a list of common use cases for Optimizely pages:
Running site-wide experiments on global components like a navigation bar or footer, or targeting click metrics on elements that exist across the site;
Testing feedback solicitation modals or other popups that appear site-wide;
Tracking metrics between variations of a redirect experiment, in which both the original and redirect URLs are targeted;
Running experiments across cart funnels, cart flows or signup flows;
Excluding certain site pages - like checkout or cart - from an experiment, or excluding certain visitors based on their login status, or excluding the entire site except for certain site pages (like, for example, international pages);
Targeting categories of related site pages (i.e., search results site pages, PDPs, support pages or knowledge articles, landing pages) as a way of streamlining the process of setting up experiments involving those sections of the site;
Binding visual tags to site pages;
Targeting each instance in multi-level environments; this way, you can avoid automatically creating a duplicate site page when the instance is promoted to the next environment.
If you're setting up key components for experimentation across your whole site, check out this article about preparing your Optimizely X Web project for an overview.