Content Modeling in Contentful 1 Jim Ambras, Sr. Technical Trainer Kristin Brown, Head of Partnerships EMEA Anna Trubitsyna, Partner Manager Bohdan Zatirko, Solution Architect

Topics today ● Content model basics ● Topics and assemblies ● Content Modeling Exercise ● Rich text ● Localization ● DAM integration ● Content aggregation ● Experimentation & Personalization ● Building the Colorful Lifestyle content model ● Working with content as code

Please raise your hand if you have previous experience with… ● Drupal/ Acquia ● AEM ● Sitecore ● Wordpress ● Other

What is your experience with Contentful?

What is your experience with content modeling in Contentful?

Who here has passed the Contentful Professional certification exam?

On-premises systems MONOLITHS The way software is built has changed forever Cloud-based, modular architectures have become the standard for building digital products 7 Customization Interoperability Cloud-based stacks MICROSERVICES

Our vision: stacks beat suites 8 Innovative companies will assemble modular stacks, with a content hub at the center Digital Experience Suites Digital Experience Stacks

Content Management API Read/Write Create, edit, publish, unpublish, archive, and delete content and content model Content Preview API Read-only Retrieve draft and updated content in addition to published content Content Delivery API Read-only Retrieve published content to display in an app or website Images API Read-only Retrieve and apply transformations to images stored in Contentful Contentful has 4 Core REST APIs

Contentful Runs as a SaaS Service

Where and when does rendering happen? 1 2 3 Dynamic on Server Static Site Generator Dynamic on Device A client-side app using the Contentful SDKs requests content from the Contentful APIs and renders the content on the device. A server-side app receives a request from an end user, retrieves content from Contentful (and possibly other data sources), renders the content, and sends it back in response. A static site generator fetches content from Contentful at timed intervals or on content change webhook then builds the rendered HTML pages and stores them on a static web host.

Contentful lets you build digital products, fast 12 APIs JSON Structured content Reuse and repurpose content, independent of channel or language Composable stack, connected to other platforms, at cloud scale Integrate with digital delivery workflows for launch & optimization Decoupled architecture Agile workflows

Create reusable content Reuse the same content across pages, properties, and channels 13 JSON output Rendered view Rich text editor view

Manage all your content in one place Content models gives editors full control of all their content 14 Content variations Localized content Microcopy Content metadata Workflow metadata Design systems Content

15 Content Modeling Basics

What is a content model? 16

Real world content models can be complex 17

How do you build a content model? 18

Early stakeholder involvement is key Create a Pool of Sample Designs • Conduct an audit of existing content • Create prototypes of future content • Assemble screen shots into a slide deck Create a draft model based on visible fields • Create a list of visible fields from instances of each content type • Reconcile similar fields to create a master list • Group fields into content types of appropriate size & define relationships Revise model for functionality & best practices • Add invisible “meta” fields (for queries, workflow, webhooks, etc.) • Optimize for content creators • Optimize for developers • Implement naming conventions QA: Validate with actual content • Try to “break” the content model by using it to build diverse instances or real world content Test with Content Creators • Watch authors use the content model (usability test) • Create documentation, help and job aids Test with Developers • Have developers QA the model against front-end, migration scripts, etc. Test with Designers • Have designers test the content model by creating a variety of designs Assemble key stakeholders to define strategy • Clarify business objectives • Agree on required functionality • Make strategic content architecture decisions STEP 1 STEP 2 STEP 3 STEP 4 STEP 5 STEP 6 STEP 7 STEP 8 19

Who is your customer as a content modeler? 20 Customers Content Authors Developers

Getting the right balance between developers and content authors is the key to successful content models 21

What should you store in Contentful? Content • Text • Images • Audio/Video • Geo location Micro-Copy • Field labels • Button text • Navigation Localized Content • Localization strategies • Translation permissions/workflows Content Metadata • SEO & Social Media • Images as content types • Tags for navigating the content model Process Metadata • Site functionality (sort, search, etc.) • Editorial workflow • Webhooks Content Components (“Assemblies”) • Atomic design – chunks not blobs • Giving content creators control over layout • Visual design systems 22

What should you not store in Contentful? CSS 23 HTML

Structured content enables content reuse 24 Content Types

25 “Topics” and “assemblies”

Topics are reusable content components ● Individually authorable ● Pure content ● No presentation options ● Building block for assemblies

Assemblies are reusable visual components ● Not individually authorable ● Contains topics ● Includes presentation options ● Assemblies can contain assemblies

Content Model: Topics vs Assemblies Example: Shutterstock Homepage Similarly composed of reusable modules.

One-to-one relationship

One-to-many relationship

Fixed Flexible

32 Interactive Session - TLD

Join the bucharest-modeling-munich channel contentful-community.slack.com

Hotel landing page exercise https://enigmatic-hollows-72511.herokuapp.com/twd-paradise-beach

Clone the Github repo for TLD https://github.com/contentful/The-Learning-Demo

Rich Text

Rich Text provides a lot of flexibility

Rich Text vs. Markdown vs. WYSIWYG

39 Inheritance and composition in content models

Content types can use inheritance 40 Product Name Manufacturer Color Product Type (reference) Shoe Size Sole type Heel type Pants Waist Length Type (formal, casual) Shirt Sleeve length Collar Fabric weight You can add or change fields that apply to every product without duplicating the change for every product type

Content types can use composition 41 Press Release Title Body SEO Content Contact Info Location Info SEO Content Page title Meta description OG tags Location Info Name Geo coordinates Contact Info Name Title Email address Adapted from Deane Barker’s “Real World Content Modeling”

Content model lessons learned Chang Li, VP Technology, Sapient / Razorfish

43 Content modeling for localization

Field level localization vs entry level localization Title Text (FR) Field Level Localization Entry Level Localization using Localization Objects Title Slug Text (EN) Text (FR) ... Title Slug Ref 1 Ref 2 ... Title Text (EN) 44

The field Localized is an array that contains an entry for each locale Entry level localization - two content types 45 1 2

Entry Level Localization Entry Level Localization 46

Localization Demo Entry Level Localization 47

48 Content aggregation

Viewing content puts user into segment by category Works for anonymous as well as known users Personalization Related Content Easy to create a “You also may like…” links Navigation Menus can point to content of various categories Analytics Analytics tools can show site viewing behavior by categories Why categorize your content?

Categorization organizes your content into groups Entry Level Localization 50

Categories are pre-defined by a site admin Entry Level Localization 51

Any content types can link to multiple categories Entry Level Localization 52

Categories demo Entry Level Localization 53

54 Experimentation and Personalization

No content

No content

Integrations the Contentful way Enable integrations where the journey of the practitioner overlaps Monolithic, inflexible, opinionated. Lean integrations of best-of-breed services, modular, custom tailored. Deployment Translation SEO Search Productivity Marketing Editorial Ecommerce Deployment Translation SEO Search Productivity Marketing Editorial Ecommerce

How? Discovering needs for experiments of structured content

Companies want to meet their customers through many channels

Separation of concerns + Contentful for content! Optimizely for experimentation!

Need for speed Source: https://dzone.com/articles/why-you-need-to-know-your-pages-conversion-impact

Summary: Contentful Optimizely App Multi-platform Take your content and experiments to any platform. Structured content Control in a structured and API-first environment. Integrated No need to ship new code to run an experiment. High performance Render times under < 200ms

Optimizely App demo

Review

Considering this structure Hero Featured CTA Page Title: “Homepage” Slug: “home” Component: []

Hero Featured CTA Page Title: “Homepage” Slug: “home” Component: [] Enabling experimentation using the App CTA (control) CTA (variation) Variation container

import contentfulSdk from 'contentful'; const optimizelyClient = new Optimizely({ dataFile }); const user = getUser(); const variationEntry = await contentfulSdk.getEntry(entryId); const variation = optimizelyClient.activate( variationEntry.experimentKey, user.userId ); const variationEntryId = variationEntry.meta[variation]; const variationContent = await contentfulSdk.getEntry(variationEntryId); Experimentation layer Contentful SDK Optimizely SDK Experimentation layer Contentful SDK Optimizely SDK

Contentful Content variations Map content to experiments Optimizely Experiments Audiences / targeting Analytics Customer’s Code API stitching Tracking 68 Separation of concerns Who does what?

Use cases Real world examples

Need for structured content Hero Featured CTA Page Title: “Homepage” Slug: “home” Component: [] “Get the guides”

Need for more advanced experiments Copy Sections Layout Pages + more

Test copy & CTA

Test sections

Even pages & layouts

Across desktop & mobile

Personalization example: Contentful + Adobe + AWS Lambda 76 Activity Container Experience Offer Visitor

Outcome: new phone research experience for customers & prospects 77 RESULTS: 9.2% Increase in prospect cart start rate 18.5% Decrease in bounce rate

Seamless & extensible customer support experiences Decreased time on content changes; went from one month to just minutes S O L U T I O N Knowledge base I N D U S T R Y Financial Services R E S U L T S ● From completely hard coded Help Center and .com to easily searchable answers with Algolia including FAQs with setup instructions, product walkthroughs and more Integration with Zendesk allows for easy triage and ticketing workflows minus the context switching ● Increased innovation & sophistication: now teams can test and experiment on visuals, without wasting dev hours ↓

79 RFP Content Modeling Exercise

RFP is a lift and shift of Colorful ● Speed of content creation/changes ● Great SEO ● Fast load time: DomContentLoaded event < 500ms ● Seamless integration with a DAM (Cloudinary or Bynder) ● Designed for A/B testing ● Designed for personalization ● Designed to incorporate a PIM in a future release Bottom footer row (legal content) is authored/controlled by parent company

One hour - use paper, whiteboard, web app https://colorful-ls.herokuapp.com/en

5 minute content model reviews ● Key content types ● Which are topics, which are assemblies ● How deep is your content model ● Where are you using content type inheritance? ● Where are you using content type composition? ● What tradeoffs did you make in the design? ● How do you plan on testing your model? ● Which objectives did you address? ● Which objectives did you push out?

Colorful Lifestyles content model

Early design session for Colorful

Colorful content model overview

Topics and Assemblies in Colorful Topics entries contain pure content removed of any presentation options (product/brand description, article body) Pages entries determine what content and visual elements make up a page (think of it as a holding container for the page) Components entries power specific visual elements (hero image, CTA, gallery, etc.) and include presentation options Media (wrapper) entries are used for embedding external content (social media), standalone videos and images Microcopy entries for storing microcopy resource sets Navigation entries to handle the definition of navigational structure. Testing/Personalization entries for supporting optimization/personalization.

Topics and Assemblies in Colorful

Topics Main Topics ● -topic-Product – product-related content (desc, image, tech specs, price, size, etc.) ● -topic-Brand – brand-related content (logo, external URL, desc, tagline, etc.) ● -topic-Category – category-related content (name, desc, related products) ● -topic-Article – editorial content (lifestyle articles, About us page, etc.) ● -topic-Author – an entry for storing an author profile, displays the name, bio, photo and an optional link to a social profile Secondary Topics ● -topic-FAQ-list – a list of questions and answers on a specific topic (product, shipping, payments, collaborations) ● -topic-Question – an individual question and answer ● -topic-Testimonial – an individual testimonial, quote, or logo ● -topic-Content-snippet – short text used for individual items making up feature / specs / benefits section of the product / brand / subscription entries ● -topic-Article-List - Topic for building article overview pages ● -topic-Business-info - Business information (terms & services, policies, company information) ● -topic-Campaign - Topic for campaign content w/o any presentation options

Assemblies Pages 1. -Page - A universal page template, to be used for publishing pages & curating visual components 2. -page-CommerceTools - A page template that allows editors to customize product pages powered by the CommerceTools integration Visual Components 1. ⚙-component-Hero-container – a container entry for displaying hero banners. Turns individual hero images into an automated slider when multiple hero components are referenced a. ⚙-component-Hero-banner – a hero image typically used at the top of the page, supports overlaid text and CTA buttons 2. ⚙-component-Image-gallery – a collection of images that can be displayed in a number of different ways (as a grid, tiles) Text Components 1. ⚙-component-Info-block – A container for displaying short bits of generic information, with optional icons/visuals 2. ⚙-component-FAQ – Accordion layout for displaying FAQs and other itemized lists 3. ⚙-component-Testimonial – A logo and/or a customer testimonial, can be a single or multiple items

Assemblies Mixed Components 1. ⚙-component-Card-collection – A collection of teaser cards to promote product, editorial, category, info and other pages 2. ⚙-component-Duplex-container – A full-width container for displaying text and images side by side 3. ⚙-component-CTA – Visually distinct Call-to-action (CTA) block Media Components 1. -wrapper-Rich-Media – an entry for embedding generic external content in the form of an iframe/embed code (code snippet generated by other platforms - e.g. audio, maps, forms, tweets, Instagram media, LinkedIn and Facebook status updates, surveys, and pretty much any other content that is designed to be embedded on the web) 2. -wrapper-Video – an entry used for embedding videos from supported platforms using a URL (currently, YouTube and Vimeo) 3. -wrapper-Image – an entry used for an image that requires custom meta data (e.g. copyright, alt-text) or validation rules (aspect ratio, min resolution) and is displayed as a standalone image on the site

Assemblies Microcopy 1. -Global-microcopy - Catch-all entry for localizing microcopy (buy button, back button, page section names, etc Navigation Components 1. -Header-menu– default site header 2. -Footer-menu – default site footer menu - holds links to menu groups a. -Menu-group – a group of items to be used in the footer navigation as one column Personalization 1. ‍-component-Variation-Container - A component that uses Optimizely rules to match content entries to visitor groups / traffic type.

Colorful page types

Notes: URL: https://[DOMAIN]/en/article/[SLUG] Article Page -Page where -topic-Article is selected as the page content 93

Notes: URL: https://[DOMAIN]/en/articles/[SLUG] Background: “We learnt the hard way that overview pages like Article list should be generated automatically to save editors from having to do tons of boring, manual work.” - Artas Currently this type of page will query all articles and show these in the page. The Article List topic itself will allow you to name the article set (which gets shown on the page). In the future, it might provide for an option to filter by specific types of articles (e.g. using tags/categories). Not enough time to implement this yet. Article List Page -Page where -topic-Article-list is selected as the page content 94

Notes: URL: https://[DOMAIN]/en/brand/[SLUG] This page has not been implemented on the front end yet. As soon as it is, it will likely work a bit like the Category Page and show cards for products for the brand selected. Brand Page -Page where -topic-Brand is selected as the page content 95

Notes: URL: https://[DOMAIN]/en/info/[SLUG] This page type is quite similar to an article page, but is more simple (e.g. doesn’t visualize things like author information, tags, etc.) Also, notable is that these pages won’t be included in pages such as Article List pages that will only query for Articles. Business Info Page -Page where -topic-Business-info is selected as the page content 96

Notes: URL: https://[DOMAIN]/en/category/[SLUG] Background: “We learnt the hard way that overview pages like Article list should be generated automatically to save editors from having to do tons of boring, manual work.” - Artas Page content will show cards of products matching the selected category. Category Page -Page where -topic-Category is selected as the page content 97

Notes: URL: https://[DOMAIN]/en/campaigns/[SLUG] This page is a pure flexible assembly landing page which will only visibly render elements for the Top section and Extra section items. It gives a URL to directly take a user to a Landing Page. Also, allows a nice way to find content related to a particular campaign in the Content View/Saved Views. It IS possible to see details from the campaign topic when this page is referenced from other elements (e.g. from a card collection). It will take things like the Title and Image depending where the page is referenced. Campaign Page -Page where -topic-Campaign is selected as the page content 98

Notes: URL: https://[DOMAIN]/en/product/[SLUG] In this example all product details live in Contentful (product pages for Commercetools integration are different). This simulates the case where Contentful is used more like a PIM. Product Page -Page where -topic-Product is selected as the page content 99

100 5-steps to managing your content with code

1. Experiment with a content model in the web app where you can see JSON output 2. Create the environments you need for CI/CD. Optionally use scripts to clone the master environment. 3. Create a script to programmatically build the full content model 4. Create migration scripts to move content into and out of the content model 5. After testing, propagate your changes into the Prod environment 5 Steps

Explore what content types, fields, validations etc. look like as JSON to speed your future script writing. Experiment with different data models. Try to add complex relationships in your model, how is that represented in JSON? 1. Create content types in the web app

Every space has one master environment by default. Each environment is a full isolated clone of the master environment. Includes a full copy of all the content types, entries, assets, locales and UI extensions. You can setup as many environments as your workflow requires. 2. Set up your initial environments

Use our content-migration tool to create your content model programmatically. File: content-model-v1.js Write a script to execute your content model. File: create-model.js Invoke with Contentful CLI against one of the test environment. contentful space migration --space-id abcedef --environment-id feature-wow create-model.js 3. Create a script to build the content model

4. Create a migration script to update model Programmatically update an existing content model, i.e. migrate your content model. File: content-model-animal-v2.js Execute with same script, except use new file: contentful space migration --space-id abcedef --environment-id feature-wow create-model.js Note when you execute a content migration, both the content type and all content entries (records) based on that content type are updated!

5. Propagate your tested changes to Prod After you have tested and verified your changes in sandbox environment, apply the content model migration to production by simply executing the same script but specifying master as target environment. contentful space migration --space-id abcedef --environment-id master create-model.js

107 5. Refactoring using the Expand/Contract pattern

Migrations: the “Expand” Phase Content entries such that the changes do not prevent the currently released version of the software from running New fields and content types By leaving the existing content in place, while augmenting the content types and content such the new version of the software can also run. The content model can now support both the current version and the new version of your software in parallel. Add Transform

Migrations: the “Contract” Phase Once all users are successfully using your new version, the “contract” phase of the migration is to run to remove unneeded content types, fields and content. Remove

Content migration API in action

111 Environment aliases

● Convert master environment into an environment alias ● A promotion or rollback is achieved by retargeting the alias to another environment – which happens instantly ● Production content is served from unscoped/master API routes through the master alias ● Currently only master can be an environment alias Environment Aliases In a nutshell

Enabling risk free releases and instant rollbacks master is no longer a stand-alone environment but acts as an alias targeting another environment Production content is served from release-1 environment Execute migration scripts Production content is now served from release-2 environment Release 2 release-1 release-2 Environment aliases Change master alias to target release-2 environment master Release 3 release-3 Optional: Delete release-1 environment Production content is now served from release-3 environment Change master alias to target release-3 environment

Use cases for aliases

Minimize downtime and allow instant rollback master is no longer a stand-alone environment but acts as an alias targeting another environment Production content is served from release-1 environment Execute migration scripts Change master alias to target release-2 environment Production content is now served from release-2 environment Promote Problem discovered! Rollback is required Rollback Rollback master to target release-1 environment release-1 release-2 Use case: Promote an environment to master master

Better safe than sorry master is no longer a stand-alone environment but acts as an alias targeting another environment Content is served from prod environment Run migration scripts Restore by changing master alias to target prod-backup environment Backup Problem discovered! Rollback is required Restore prod prod-backup Use case: Backup and restore master Optional: Delete prod environment prod Optional: Recreate prod from prod-backup Change master alias to target prod environment

You never get it right the first time Content models require large amounts of iteration Content models are always evolving Make use of the content migration API Extreme flexibility == complexity Developers often design content models for optimal content reuse But content authors often create content in a manner not intended by modelers Content authors are your customer Both developers and content authors are your customer, but focus on the content author Crawl, walk, run Start testing the authoring experience before any code is written Key takeaways in content modeling

So What’s Next? Keep Learning ● Developer Certification Program ● Documentation ● Developer Portal ● Join our Meetups & Webinars (Gatsby,..) Keep track of new things ● Changelog ● What’s New Enjoy building with Contentful!