mindbodygreen

A Guide To Using Componentized Pages

What Are Componentized Pages

Componentized Pages provide a way to build pages on mindbodygreen through reusable and configurable Components. What is a Component? We’ll learn more about the Components later, but Components are the body elements that make up a page, like a Hero, a Text Blurb, an Image, etc. that allows us to build, publish, and modify pages on the website quickly without having to code anything. In fact everything on this page was built with a Component (you are reading the text of a Text Blurb.) Above this Text Blurb is a Subnavigation. Above that is the Hero. But you will learn more about all the individual Components later. For now let’s focus on when to use them.

When to Use Componentized Pages

Componentized Pages should be used any time we want to build a page on the site that is a landing page for a campaign, product, partner, class, affiliate program, email signup page, and so on. The Components that are available make it such that many different types of pages can be built. It is likely easier to talk about what types of pages we do not build in the Componentized Page system. That would be anything with complex, custom designs or logic like the Gift Guide. Or pages that are built automatically like our Author Pages, Category Pages, Tag Pages, etc. Also our Articles are not built with our Componentized Pages.

Some Current Examples

Below are some current pages that are live and use the Component Page system.

What About PDPs?

Currently PDPs are not built using the Componentized Page system, but that will be changing. We will let everyone know when we make the move to the Componentized Page system for PDPs.

How To Create Componentized Pages

Componentized Pages are built on a platform called Contentful. Contentful is what is referred to as a “headless CMS”, meaning it is a platform that allows for the creation of content, but it does not display it in any way. Contentful allows us to define Content Types that store information. What these Content Types are and what information we can put in them is entirely controlled by us. We spent a lot of time thinking through all of the different Content Types that we want to define in Contentful so that we can build beautiful and powerful pages. For a quick overview of Contentful, check out this Youtube video.

Content Types

The most important Content Types is the Componentized Page, which is a page that has a URL that will appear on mindbodygreen.com. The remaining Content Types we call Components. The Componentized Page can contain any number of Components depending on what the page’s purpose is. It also has other information on it that allows the page to be displayed on our website, things like

A URL
Whether the page should be indexed for search engines (generally not)
Template and design information
And more

Components can be nested inside each other to make more complex Content Types. For instance, we have a Text Blurb Component that is basically a block of formatted text. We also have an Image Component that is an image. We can combine these two Components into the Text With Media Component which displays the Text Blurb on one side of a grid and the Image on the other side of the grid. We have descriptions and guides for all our Components available.

Reusability

An important thing to know about Components is that because each Component is built on its own, it can be reused many times across many pages. This is extremely useful because it allows for pages to be built quickly from existing Components. This flexibility also carries some risk, though -- because the Components can be reused, it is important to know that if you change a Component, it will be changed everywhere the Component is used. If you use a Component and decide you want to change it slightly, first check where the Component is already being used. You can see this in the Links section in the sidebar in the editor of the Component on Contentful. If the Component is only used on the one page you are editing, you can be pretty confident that if you edit it, you will not cause issues on any other page. If the Component is being used elsewhere, though, you might want to duplicate the Component and create a new one. The new one will have all the same information as the original, which you can then change as you need it. Another word of warning -- if the Component you duplicated is a complex Component that has other child Components in it, the Components within the parent Component are not duplicated. If you want to change one of those, you can duplicate the child Components. So for example, if you have a Text With Media Component that has a Text Blurb as one child Component and an Image as another child Component and you really want to change the Text, you will need to

Duplicate the Text With Media Component
Duplicate the Text Blurb within the Text With Media Component
Edit the new Text Blurb you just created

This seems confusing at first, but once you get into the Contentful application things will become more clear.

Componentized Page Properties

Aside from the body Components on a Componentized Page, the other properties that you will provide that will define how your page looks, behaves, and is found are the following:

Internal ID

The Internal ID is an identifier used within Contentful to manage content and is not displayed to a user in any way. It is really here just so we can find and differentiate between Componentized Pages. Each page should have a unique Internal ID, and it should be exactly as descriptive as it needs to be. Examples would be “Gut Health Signup Page” or “Lexus 2020 Retreats Page”.

Page ID

The Page ID is used for our analytics and tracking purposes. When we track events on the site, the Page ID is passed so that we know where an event happened. Because, as we mentioned, Components can be used on many pages, if we had an Email Signup Form that was used on several pages, the Page ID will help us track the conversion rate of the Email Signup Form on this particular page.

Template

The Template defines the look and feel of the page. The Standard template is for a generic page. We also have templates for Supplements, Classes, FNC, Podcasts, and content Categories.

URL

The URL is the part of the web address after www.mindbodygreen.com. Each URL needs to be unique. We can have URLs a folder structure so that we can group several pages together in a logical way. Some valid URLs are

gut-health-signup
sensitive-skin
/giveaways/lexus-retreat
/giveaways/chrysler-pacifica-challenge

Note that just because we have two page under the /giveaways folder, there is no actual /giveaways page. If we wanted to have a page live at /giveaways, we would have to create one.

Canonical URL (rarely used)

Sometimes we might have a page that contains duplicated content from somewhere else on the web. That other page could be on our site, or it could be somewhere else. If we have duplicated content, we might want to include a canonical URL, which is the full URL link to the other page. This tells search engines that the real page for this content lives elsewhere. This feature is rarely used.

SEO Page Title

This is the text that appears in the browser tab and also in search results. It should be short and descriptive.

Meta Description

This is the text that would appear in search results. It should be about 200 characters long if the page is going to be indexed for search (see below.) It should be descriptive and contain the keywords that we are trying to target.

SEO No Index

Most of the time when we create a page, we do not want Google (or other search engines) to index the page. The reason for this is that it is unlikely that we are creating a page that someone would be searching for, or it is a lightweight page that Google would see as adding little value and could therefore penalize us. Many times we create a page it is for paid or social promotions, or we are linking to the page in some other way. If we do not want search engines to index this page, we should select Yes here to make sure that the noindex property is used on the page to tell search engines to not index the page.

Social Share Image

When we share one of our Componentized Pages on Facebook or other social platforms, we want to control the image that shows up there. We can upload an image here for that purpose.

Ad Targeting ID

If a Componentized Page is going to have Ad Units on it, we will want to create an Ad Targeting ID to provide to the team that sets up our ads to tell them how to find the page in the ad flight. The Ad Targeting ID should be unique, and it can be the same as the Page ID if you like. The two do not need to be the same, though, as their purposes are unrelated.

Announcement Bar

Each Componentized Page can have an Announcement bar that lives above, on, or below the navigation bar. An Announcement Bar that goes above the navigation bar contains text links that are used for promoting other pages. It can also contain links to our social media pages. Announcement Bars that go on or below the navigation bar are for promoting what this page is. For instance, if it is a landing page for a supplements promotion, we would include the promotional text and perhaps a countdown timer to create urgency. For more on Announcement Bars, check out the Component Guide below.

Body Components

Here is where we Link or Create the Components that will be displayed on the page. We will learn more about each of the Components in the Components Library section further down the page.

Primary Class

If this page is a Class PDP, or is a promotion for a single Class, we will select the Class here. The reason for this is that there are a number of Components on the page that can reference the Primary Class on the page to define how they work. For instance, we have Buttons that can have an Add To Cart action on them. If the page has a Primary Class, we don’t have to choose a Class for the Add To Cart button. This allows the Button to be used over and over again on any page with a Primary Class (or Primary Product for that matter.) If a Page is promoting multiple Classes, though, we would not include a Primary Class and instead each Button would have a Class on it.

Primary Product

Similar to the Primary Class, the Primary Product would be a Supplement. We called it Primary Product instead of Primary Supplement because in the future, perhaps we’ll have other products sold from our Shopify store. Who knows? It serves the same purpose as the Primary Product, though -- if you choose it, it can help inform other Components on the page as to how they should behave.

Page Theme Override (rarely used)

For each Componentized Page we can choose a Template, which defines the theme for the page. For example we can choose the Classes Template for the page, which will then provide colors for the navigation bar, background colors of other components, font styles, etc. Generally when creating a page you will choose from one of the available Templates. Occasionally we might have a custom campaign for a partner where our Template themes might not be the best fit. If we have a custom campaign or Page we want to create that doesn’t quite fit one of our existing Template styles, we can create a Page Theme that defines colors and styles for different elements on the page. Your Page Theme does not need to define every color and style -- it will only override the styles that you add to your Theme.

Components Library

The Components Library outlines all of the Components that are available when creating Componentized Pages. See below for all the descriptions and links to example pages.

Available Components

Ad Unit

Ad Units are components that can be dropped into a page to create a Network (DFP-served) or Native (site-served) ad. Native Ad units are used to advertise our supplements and classes, and as they are Native and do not use DFP are served faster and improve page speed.

Announcement Bar

The Announcement Bar is a component that creates a bar that can live above, on, or below the navigation to provide links or calls to action for the page.

Button

A Button is a Component that does not live on its own and is always used as part of another Component. Buttons can be used in several ways:

To link to another page
To link to another Component on the same page
To add a Class to a Cart
To add a Product to a Cart