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.
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.
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:
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”.
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.
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.
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
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.
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.
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.
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.
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.
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.
More on the Page Theme.
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.
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.
More on the Ad Unit Component.
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.
More on the Announcement Bar Component.
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
More on the Button Component.
A Card is a component that lives within a Grid. Cards are used to take users to Articles, Classes, Supplements, Podcasts, etc.
More on the Card Component.
A Carousel Component is used to create a slider of Images, People, or Testimonials. It can also be used to create a switcher for Videos, as well.
More on the Carousel.
Featured Product Layout
The Featured Product Layout is a Component that is a composite of several other Components. It is used to combine media, a description, and a purchase or preview signup form for a Product.
More on the Featured Product Layout Component.
The Feature Highlight Component is used to promote selling points about a product or class. It is generally used in a Hero.
More on the Featured Product Layout Component.
A Grid is a layout Component that organizes Cards or other items within it in a structured layout.
More on the Grid Component.
The Hero is a unit that appears at the top of a page. There are many styles and options to choose from for a Hero based on the focus of the page and type of promotion.
More on the Hero Component.
An Image component can exist as a Body Component, or can be part of another Component such as the Text With Media or Carousel Components.
More on the Image Component.
A List Component combines text with a group of list items that can have different display properties such as bullets, numbers, etc.
More on the List Component.
Navigation Anchors and Navigation Bar
A Navigation Bar on a page is used to provide links to elements lower on the page, and can also include a Button for a quick access CTA.
More on the Navigation Anchors and Bars.
A Person component is used for authors, instructors, celebrities, etc. and can be used in multiple other Components. They are used in Classes and Class PDPs, as well.
More on the Person.
A Product Highlight Component is used for calling out features of a product on a product page. Primarily they are used for Ingredients for our Supplements, but they have other uses as well.
More on the Product Highlight.
A Purchase Form is a Component that builds out the form on a page that allows a user to buy a Supplement or Class. Depending upon the product type, the form will automatically display different options.
More on the Purchase Form Component.
A Signup Form is a Component that allows a user to sign up for an Email List or a Webinar.
More on the Signup Form Component.
A Table Component is used to create a grid of data in a table. This is often used for a comparison chart (us vs. them, one class vs. another).
More on the Table Component.
A Testimonial Component is used to feature a quote or statement by someone about a product, class, etc. It can use a Person Component if the Testimonial is provided by an author or class instructor.
More on the Testimonial Component.
A Text Blurb Component contains a text editor to allow us to write formatted text.
More on the Text Blurb Component.
Text With Media
A Text With Media Component combines a Text Blurb with an Image, Video, Carousel, etc. into a single layout.
More on the Text With Media Component.
A Video Component is used to include a JW Player video or uploaded video on the page.
More on the Video Component.
A Video Hero is a special type of hero layout that includes a background video with the option of a button-triggered video.
More on the Video Hero Component.