@@ -352,9 +352,8 @@ Watch our team in action on YouTube!
### Things we don't do
1.**Content changes**. You can do these yourself using our CMS, Contentful:
1.[Here's a quick video](https://www.youtube.com/embed/6pdXijDzYkg?si=8JbdUBmzPHcWgzTk) on how to search for and edit existing content for the marketing site. For completely new pages, please fill out an [issue](/handbook/marketing/digital-experience/#issue-template-to-submit-an-idea-to-drive-our-business-goals)
1. Want to learn more about our Contentful CMS? [Here's the documentation](/handbook/marketing/digital-experience/contentful-cms)
1.**Content changes, updates, or moving content**. You can do these yourself by editing the page in our [repo](https://gitlab.com/gitlab-com/marketing/digital-experience/about-gitlab-com), or by clicking on "Edit this page" at the bottom of any page on about.gitlab.com:
1. If you are requesting a new or updated page fill out an issue (/handbook/marketing/digital-experience/#issue-template-to-submit-an-idea-to-drive-our-business-goals)
2.**Create content**. You can collaborate with our excellent [Global Content team](/handbook/marketing/brand-and-product-marketing/content/) for these needs.
3.**Create branded assets, custom graphics, illustrations**. Our [Brand design team](/handbook/marketing/brand-and-product-marketing/design/) is so good at this, you definitely want their expertise.
The Digital Experience team has migrated the [marketing site](https://about.gitlab.com/) to our new CMS tool, Contentful. Contentful is a Content Management System - it replaces all of the text files in our marketing site and replaces them with different Content Entries. Contentful also has a Media Library, where we are moving our images.
## Why transition to a CMS?
As the GitLab marketing team and the marketing site evolves, we need a collaborative tool that allows for consistency across the marketing site.
### Contentful terminology
- Content: A Catch-all term for text or images on the marketing site
- Content Type: A type of content. These include Cards, Heros, Buttons, etc and can all be viewed in Contentful under the Content Model tab. We have different classes of Content Types (Atoms, Molecules, Organisms)
- Atoms: Base-level components that don't contain other Content Types within them. Example: Buttons, Text
- Molecules: Typically contain a combination of Atoms. Example: Hero, Card Group
- Organisms: Commonly contain many Molecules or Atoms and are considered more complex. Example: Page
- Entry: An Entry is considered one piece of content in a content type. For example, there are many Cards across the marketing site, but the Free card on the pricing page is one example of a Card Entry.
- Field: Even the most basic Content Type typically has multiple fields. For example, a Button may seem small, but some fields it contains include the url it points to, the text on the button, perhaps an icon, maybe some tracking data. Each of these are considered Fields of the Button Content Type.
## Which pages on our marketing site draw from the CMS?
Some pages still draw content from our Buyer Experience git repository due to page complexity and/or strict page ownership. Most of the content for our marketing site will be found in Contentful.
## How do we make changes to the marketing site with the CMS?
As owners of the marketing website, the digital experience team handles most large changes in order to drive business goals. However, we are not necessarily the subject matter experts and will defer to various teams when it comes to editing content. In general, these are the processes we try to adhere to:
### For Top 10 (most visited/impactful) Pages
Any changes required for the following changes, must begin with an issue for the DEX team to reivew. Please create an issue per [this process](/handbook/marketing/digital-experience/#issue-template-to-submit-an-idea-to-drive-our-business-goals).
These pages have been developed through a data-driven design process with cross-functional collaboration and approval. Changes can be suggested however changes will only be made if they are alignment with GitLab marketing goals.
### For component editing, re-arranging, adding new page sections, significant content changes
If you'd like to make changes to a page that typically is managed by another team, please tag that team prior to publishing your changes. A rough overview of ownership of different sections can be seen in the table below:
#### Table of page ownership
| Team | Pages/Sections |
| ------ | ------ |
| CMSO - Chief of Staff |Company Announcements |
| Marketing Operations and analytics - Globalization & Localization | Marketing site localization |
| Dev Relations & Community - Contributor Success | Technical articles |
| Dev Relations & Community - Developer Relations | Technical articles, Community pages |
| Corporate Communications | Company Announcements, Press releases |
### For typos, broken links, small content changes
Contentful is great tool for making small updates to the content on any given page.
- If you are a team that typically manages the content on the page in question, you should feel empowered to make the change and publish your changes.
- If you're changing content on a page that typically doesn't belong to you but is an obvious mistake, please also go ahead and publish your changes.
- If you're making a change on a page that affects the tone of the page and are not an owner, please tag someone from the presiding team in the contentful comments section (or in an issue/MR/slack) prior to publishing your changes. This is not typically the Digital Experience team, but rather the relevant team that owns that content. We have created a rough table of ownership [here](#table-of-page-ownership) to be used as a guide.
### Roles and Permissions
We have various levels of access in Contentful. Most new members that are invited to the CMS are given Creator access, which allows them to edit content without publishing it. To get upgraded to Publisher access, please [reach out to the digital experience team](#requesting-assistance-from-digital-experience) in slack.
-*Administrator*: has full access to everything in the space.
-*CMS Administrator*: can create, read, update, publish, and delete all content aside from `Confidential` entries. Can modify space settings, access existing API keys, and can create and update API keys.
-*Confidential*: can create, edit, publish, archive and delete all content in a space, including `Confidential` content.
-*Creator*: can create and edit all content in a space (aside from `Confidential` content), but cannot publish it.
-*Publisher*: can create, edit, publish, archive and delete all content in a space (aside from `Confidential` content). This person should be able to administer their own team.
### Confidential Tags
Contentful has a tagging feature that allows us to organize different content. It also allows us to configure access to each `Tag`, such that certain content can be hidden from certain users. We currently have a functioning `Confidential` tag, however the caveat is that anyone with access to that tag can see all confidential content. In the use case where a specific user or team needs their own, truly private content, we can create a new `Tag` and a new `Role` specifically for them.
Digital experience can create the `Tag` (Private), then create a new `Role` (preferrably with the same name to help keep everything organized) and add the users to that role. Digital experience will then need to add specific permissions for that `Role` including:
Allow:
- Read, Write, Publish, Archive for regular entries
- Read, Write, Publish, Archive for your new tag
Deny:
- Read, Write, Publish, Archive for any other existing confidential tags
**Note**: Make sure you set the same rules on the Media tab in the new Role.
To get access to your own team tag, please reach out to the `#digital-experience-team` slack channel with your usecase, which users should have access, and how long you need this tag (i.e. is it for an upcoming release? Or is this a permanent feature that your team needs?). Please note that once we create the Tag, our team will likely lose access to the tag or any configurations, so teams should feel comfortable using the tag on their own prior to revoking access to Digital Experience admin.
**Note:** At this time, Contentful Administrators may have access to all tags in the space. This is still being tested - please discuss with Digital Experience.
### The `Review: DEx` tag and permissions
Content that requires Digital Experience review prior to publishing is tagged with the `Review: DEx` tag. This has been configured in Contentful such that only users with a role of `CMS Administrator` in the about.gitlab.com space will be able to publish this content. Users with `Publisher` access and below will not be able to publish this content.
*Note: If a user is a `CMS Administrator` in the space, but they are also on a team that only has `Publisher` access to that space, Contentful will default to the lowest level of access (`Publisher`). Be sure to check if a user is on a team if they are having trouble accessing content.*
The `Review: DEx` tag has been added to content on the Pricing page and the Homepage. Any other pages that share an entry with the pricing page or homepage will also be affected by the tag permissions. I.e. if the FAQ section on the pricing page is used on another page, it will only be publishable by `CMS Administrators` regardless of which page a user is accessing it from.
Going forward, if any new entry is added to the pricing page or the homepage, content creators should add the `Review: DEx` tag to that entry. Please note that **the tag does not automatically propagate down to the children of an entry**, so the tag will need to be manually added to each child of an entry. For example, if you add a card that has a button as a child, both the card and the button will need to be tagged manually.
To add the `Review: DEx` tag to an entry in Contentful, go to the Tags tab of that entry, and use the dropdown to select the `Review: DEx` tag and hit Enter, and publish the change.
4.[Caveats and Feature Wishlist](/handbook/marketing/digital-experience/contentful-cms/wishlist)
### Requesting assistance from Digital Experience
- Reach out to our team via `#digital-experience-team` on slack
- Open an issue using our [issue template](https://gitlab.com/gitlab-com/marketing/digital-experience/buyer-experience/-/issues/new#)
## Requesting access to Contentful
Please fill out an access request [here](https://gitlab.com/gitlab-com/team-member-epics/access-requests/-/issues/) and tag your manager for approval as well as `@laurenbarker` from Digital Experience, and include the purpose for your request (i.e. to edit the marketing site, to edit the blog - these are managed in different spaces in Contentful). You will recieve an email invitation to Contentful as a `Creator` unless publish access is necessary.
The Digital Experience team has successfully integrated an exceptional feature that empowers content editors to effortlessly construct pages for the [Marketing Site](https://about.gitlab.com/).
This innovative functionality leverages a collection of user-friendly custom components, providing a seamless page-building experience.
Editors can easily rearrange these components through a simple drag-and-drop interface inside Contentful CMS, enhancing flexibility and efficiency in content creation.
### How does Contentful work?
If you haven't already read it, please check out our [Contentful Guide](/handbook/marketing/digital-experience/contentful-cms/).
### How to Edit/Create pages using "Custom Pages"
For our [Buyer Experience Site](https://gitlab.com/gitlab-com/marketing/digital-experience/buyer-experience/), creating or updating a **Custom Page** requires the use of the [🛠️ Custom Page](https://app.contentful.com/spaces/xz1dnu24egyd/environments/master/content_types/customPage/fields) Content Type.
Each entry in this Content Type functions as a distinct page on the site, complete with its Metadata configuration, Routing configuration, Hero configuration and Dynamic Components configuration.
#### Routing configuration
To configure the page's routing, it is essential to declare the `slug` field. The page routes can extend up to three levels, for example, `/level-1/level-2/level-3/`.
It is crucial to include both a trailing slash and a leading slash to ensure proper functionality within Buyer Experience.
#### Hero Configuration
To personalize the hero section, use the fields in the [🛠️ Custom Page](https://app.contentful.com/spaces/xz1dnu24egyd/environments/master/content_types/customPage/fields) Content Type. These fields are designed to let you customize the static Hero section, making it the first component that visitors see on the page.
| Custom Page Field | Description | Example Value |
| Header | Main header of the Hero | "Custom page header" |
| Subheader | Subheader of the Hero | "Custom page subheader" |
| Description | Long text section of the Hero| "Custom page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat" |
| Primary CTA Link | Redirection link for the primary button | /primary-link/ |
| Primary CTA Text | Text inside the primary button | "Primary Link" |
| Secondary CTA Link | Redirection link for the secondary button | /secondary-link/ |
| Secondary CTA Text | Text inside the secondary button | "Secondary Link" |
To configure SEO metadata attributes of a *🛠️ Custom Page*, it's necessary to create a reference entry using the [SEO](https://app.contentful.com/spaces/xz1dnu24egyd/environments/master/content_types/seo/fields) Content Type.
#### Side Navigation
Within the *🛠️ Custom Page* Content Type, you'll find a field named `Activate Side Menu`. Enabling this option activates the side navigation for the page. The side navigation is dynamically generated, considering the **Header** field of each component used.
### Available Dynamic Components
The list below includes all available Content Types that can be utilized in the `components` field, each accompanied by its visual representation. This field allows content editors to effortlessly reorder the page through a simple drag-and-drop action.
#### 🛠️ Text Block
Enhance your content with the [🛠️ Text Block](https://app.contentful.com/spaces/xz1dnu24egyd/environments/master/content_types/textBlock/fields) content type. This versatile option empowers content editors to establish a fundamental header and a markdown text section. Additionally, it offers the flexibility to seamlessly incorporate a CTA, images and videos into your content.
<!-- vale handbook.Repetition = NO -->
| Text Block Field | Description | Example Value |
| Internal Name | Name to find the entry within Contentful | N/A |
| Header | Header of the block, if used with the side navigation, this text will be used as anchor | "Text block header" |
| Text | Markdown text block | "**About GitLab** GitLab is the most comprehensive AI-powered DevSecOps platform for software innovation. GitLab enables organizations to increase developer productivity, improve operational efficiency, reduce security and compliance risk, and accelerate digital transformation. More than 30 million registered users and more than 50% of the Fortune 100 trust GitLab to ship better, more secure software faster." |
| Video URL | Optional external video URL (Youtube, Vimeo) | https://www.youtube.com/embed/8aV5AxJrHDg?si=l1vgM17YlRJHC8T2 |
<!-- vale handbook.Repetition = YES -->
##### Visual Representation
#### 🛠️ CTA
The [🛠️ CTA](https://app.contentful.com/spaces/xz1dnu24egyd/environments/master/content_types/cta/fields) Content Type represents a Call-to-Action card component featuring a CTA button and various text fields.
| CTA Field | Description | Example Value |
|-----------|-------------|---------------|
| Internal Name | Name to find the entry within Contentful | N/A |
| Header | Header of the block, if used with the side navigation, this text will be used as anchor | "CTA" |
| Subheader | Subtitle of the CTA card | "CTA Subheader" |
| Description | Long text inside the CTA card | "CTA full description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat" |
The [🛠️ Card Block](https://app.contentful.com/spaces/xz1dnu24egyd/environments/master/content_types/cardBlock/fields) and [🛠️ Card-Block: Card](https://app.contentful.com/spaces/xz1dnu24egyd/environments/master/content_types/cardBlockCard/fields) are two Content Types designed to complement each other.
**🛠️ Card Block** serves as the section container, housing a list of references to individual **🛠️ Card Block: Card** items.
| Card Block Fields | Description | Example Value |
|------------|-------------|---------------|
| Internal Name | Name to find the entry within Contentful | N/A |
| Header | Header of the block, if used with the side navigation, this text will be used as anchor | "Card block title" |
| Cards | A reference list of "Card Block: Card" entries | 3 card entries |
| Card Block: Card Fields | Description | Example Value |
| Description | Long text inside the card | Lorem ipsum dolor est |
| Link | Card redirection URL | /card-1/ |
| Icon | Icon name for the card, the list of icons can be found in [Slippers](https://slippers.gitlab.com/?path=/story/foundations-icons--icons) | devsecops |
The [🛠️ Landing Grid](https://app.contentful.com/spaces/xz1dnu24egyd/environments/master/content_types/landingGrid/fields) is a valuable Content Type designed for Landing Pages.
When utilizing this Content Type, cards are dynamically generated based on the child pages associated with the landing page. For instance, if there is a **/solutions** landing page, all child pages under **/solutions/*** will be automatically listed without requiring manual manipulation.
| Landing Grid Fields | Description | Example Value |
| Internal Name | Name to find the entry within Contentful | N/A |
| Number of Columns | Tells the grid how many cards per row should show | 2 |
| Cards | List of landing grid cards to be used instead of the automatic card generation the component provides | N/A |
If the landing page needs to render specific cards that are not children to the current URL, the card field can be filled with the cards that need to be displayed, this field takes Landing grid Card components which have the following fields:
| Landing Grid Card Fields | Description | Example Value |
