Partner Microsites

The Digital Experience team has integrated the ability to create customer-facing microsites within our CMS that can be utilized by our business partners. Previously, these were built in a third-party platform. By building out these solutions in-house, we are now able to give our partners a web experience to use that is on brand, specially curated, and formatted with the best user experience for high conversion in mind.

Editors can easily rearrange a specific set of components inside Contentful CMS through a drag-and-drop interface to allow for flexibilty of how the content is shown. They can also re-use content across these web experiences, which brings in a huge efficiency boost and allows for these microsites to be built faster. In addition to those key features, these pages have been built behind-the-scenes to include proper analytics and UTM tracking which contain business-critical data on how these pages are being used and can tell us an accurate story on how some page visitors become paid customers.

How does Contentful work?

If you haven’t already read it, please check out our Contentful Guide.

How to create or edit a partner microsite

For our Buyer Experience/marketing site, creating or updating a Partner Microsite requires the use of the ⭐ Partner Microsite Content Type.

Each entry in this Content Type functions as a distinct page on the site, complete with its Metadata configuration, Routing configuration, Navigation configuration, and designating which tracks, or sections, will build out the page.

SEO configuration

To configure SEO metadata attributes of a ⭐ Partner Microsite, it’s necessary to create a reference entry using the SEO Content Type.

At the very minimum, the Title, Description, ogTitle, and ogDescription should be given a value. These are critical metadata fields that will show up in search engine results along with the meta-tags of the webpage.

By default, these pages will be crawlable by search engine webcrawlers. This allows for the page to be used in search engine results. If you would like to turn this off for a specific page, you can locate the No Index toggle and switch it to true.

Routing configuration

To configure the page’s routing, it is essential to declare the slug field. A slug is the part of a URL that identifies a particular page on a website in an easy-to-read form.

All microsites will live at https://about.gitlab.com/partner/. The slug you enter determines the URL piece after that.

Ex: Entering Gantek in the slug field will designate https://about.gitlab.com/partner/gantek as the URL of the microsite page.

Partner configuration

Some of the fields that need to be configured are partner-related. Entering values in the Partner Name and Partner ID are required and that information will be used across the page for analytics and tracking purposes.

In addition, you can add a Partner Logo here. You are able to upload it directly into Contentful or reuse a logo if it has already been added to the Asset Library. A partner logo will appear in two spots on the page: the top navigation and the footer call-to-action sections. If a logo is not added, only the GitLab logo will appear.

Visual Representation

Note: Because the partner ID is listed here, the correct ID and coinciding UTM/GLM parameter name will be appended to links across the page. You will not have to enter this information on URLs entered within page buttons, which allows for these pieces of content to be reusable across different partner pages. These parameters will NOT be appended to links created in Markdown (ex: [My url text](www.externalwebsite.com)), which would occur in the Header, Subheader, Text content type.

Heading configuration

This field adds the H1, or Heading 1, to the page. This text should be the overall heading of the page. If you think of content like a hierarchy of importance, text should be a short and sweet summary of the content that the visitor will read. It is best practice to add a value here, as it has a large negative impact on SEO if it is missing (More on H1 tags here).

Top navigation configuration

The Navigation CTA Text and Navigation CTA Link are used to add a link to the top navigation. The top navigation consists of the GitLab logo, the Partner logo (if added) and this call-to-action button. If the Navigation CTA text is not entered, the button will not render.

Note: For links to an email address, you must add mailto: before the email address value. Ex: mailto:myemail@test.com. This applies to any other button on the page. In Markdown, that would look like [Contact us](mailto:myemail@test.com).

Visual Representation

Side menu configuration

The side navigation block allows you to add two content blocks: Tab Controls Container and Side Navigation. These content types are used throughout our marketing site. Because of that, these blocks are created to work in differing page types and may contain fields that are not relevant to the microsite pages.

Contentful will allow you to add more than one of each, but this may result in the page breaking. Please only add one of each (the tab controls is optional). You can also re-use existing blocks that you may have built for other microsite pages.

The following tables contain fields necessary to build out the side navigation blocks. It leaves out fields that are not used. If you enter values in the un-used fields, you will not see any changes related to them.

Tabs configuration

Side navigation configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
    "nodes": [
        {
            "href": "#what-is-gitlab",
            "text": "What is GitLab?"
        },
        {
            "href": "#your-link-here",
            "text": "Your Text Here"
        }
    ]
}

Visual Representation

Footer CTA configuration

The Footer CTA looks similar to the footer CTAs across our site (also known as “Next Steps”). The partner microsite template uses a page-specific footer CTA content type, ⭐ Partner Microsite - Footer CTA because this design slightly strays away from the other variants across our site.

If you have entered an image in the Microsite entry’s Partner Logo field, it will also show up in this section. You will not see this within the Footer CTA entry in the CMS.

Visual Representation

Microsite track/section configuration

The ⭐ Partner Microsite takes in individual sections, or tracks, containing content. These blocks are a content type called ⭐ Partner Microsite - Track. By splitting the page up into these tracks you can easily reuse them across different partner pages. In addition, the page’s logic knows to add some spacing in between these sections to visually break them up.

The content type takes in an Internal ID and a series of available content blocks. The following content blocks are available within a Track at this time: Header, Subheader, and Text, External Video, Card Group, and Card.

Header, Subheader, and Text

You can use this content type’s fields interchangeably, meaning you don’t always need to use the header or text. This is useful for when you want to create a large block of text, then add a video or card group in the middle, and want to continue with text just below it.

Visual Representation

External Video

It is best practice for videos to be uploaded to Vimeo, however our Video content type allows Youtube video URLs. If you need a video uploaded to one of these platforms, please reach out to the Brand/Video team. We do not directly upload videos to the CMS.

You can find the embed URL of the video by going to that platform’s Share button, look for something that mentions Embed, and copy the URL (not the whole chunk of code) that it gives you.

Visual Representation

Card Group

The card group should be used when two or more cards should be blocked together. There are two different types of configurations that will work at this time.

You will configure the card group as normal, but the way you configure the individual Card will differ.

Header and text variation

Visual representation

Icon and header variation

If no text is entered, there is code in place to make the heading font a little bigger in order to look nicer. This is paired with an icon of your choice.

At this time, our icons render depending on the icon name that you enter in the field. Our icon library lives in our design system, Slippers. When you access this link, there is a dropdown called Icon on the left. This contains our current icon library. You can view the icon once you select it from the dropdown. When you find an icon you want to use, type in that name **minus the “slp-” in the “Icon” field in the CMS. Ex: “slp-digital-transformation” should be “digital-transformation”.

We are actively working on a solution to make the icon selection experience much easier!

Visual representation

Card

The card is the same that is used within the Card Group, except the visual representation is different. A Card used outside of a Card Group will be a standalone section of content with a colored background. It can be helpful to think of this content block to “showcase” an important list.

At this time, these call-out sections take in a list of information. The checkmark icon is automatically pre-pended for each list item.

Visual representation

Useful editing tips and tricks

1. Contentful’s key feature is that it allows you to reuse content. Create once, use everywhere! You can look on the right side of an entry under Links to see where the entry is being used. If you make an update to a shared entry, it will update everywhere. This is good or bad depending on your intentions! If you want to make an update but not have it be reflected everywhere, it may mean that a new entry of some type is warranted.

2. We have functionality on these partner pages that auto-appends the partner ID to links. This does NOT work for links created in Markdown. You will have to add these in yourself to ensure proper Google Analytics tracking. That format looks like [link name](https://www.link.com){data-ga-name="your value in lowercase goes here" data-ga-location="body"}

3. Some resources, like videos, may already be added to Contentful. Before adding new content, search around and see if you can reuse something already available.

4. It is better practice for a track to start off with the Header, Subheader, and Text or External Video content block, as they can contain an Anchor ID. A Card Group or standalone Card will visually fit better between text blocks or directly below a text block.

Video demo and overview

View page source - Edit this page - please contribute.