Design Manage
#Content #Engagement #Campaigns

Create and manage campaign pages with the P4CG

Learn how to build, import and customise uniquely branded campaign pages inside P4.

The Planet4 Campaign Generator (P4CG) is actually a group of features that allow to build “microsite-like” pages inside P4, targeted at the needs of (global) campaigns.

Piloted by the Climate Emergency, the P4CG radically changes how we will produce uniquely branded Campaign pages within the P4 architecture in 2020 and beyond.

Mockup of a “People vs Oil”branded Planet 4 Campaign Generator (P4CG)

Key unique features of P4CG

While built within the overall NRO P4 infrastructures, the P4CG has its own set of features:

  1. Customizable design: to meet the requirements of the campaign style guides. Some elements of default pages and blocks are hidden to maximize the focus on the campaign engagement needs.
  2. Exporting/importing complete campaign pages: to allow rapid distribution of campaign materials across offices, basically simplifying campaign launches to a few clicks.
  3. Syncing leads to different NRO databases: currently there is only support for Engaging Networks but our next step is to add support for other systems. This means that global campaigns will need to create one page only that they can roll out across all P4 NROs, which will reach a more than 80% NRO adoption rate by the end of the year.
  4. All the benefits of using the global IT infrastructure (as opposed to a standalone microsite installation): campaigners don’t have to worry about infrastructure, performance, security, software updates, GDPR or that other IT thing they have never heard of until the moment it stopped working.

Campaign pages are found in the new ‘Campaigns’ menu item in Planet4.

Key differences of P4CG from the P4 main theme

  1. Campaign pages are not integral parts of your Planet4 site. They don’t appear in the site navigation (though they do show up in site search). The reason for this is that they are conceptually closer to “microsites”: they are made to provide a more focused experience, with less of the “normal site” and more of the campaign content.
  2. Their primary audience are supporters coming from outside of the website, clicking links in newsletters, social media or ads.
  3. As a consequence of the above, some changes were made to the blocks.
    1. There are blocks not available under campaigns (e.g. Covers).
    2. There are blocks that have call to action buttons removed and links converted to regular text, to simplify the user flow and keep the visitors focused on the main engagement ask.
  4. Campaign pages can be customized within the P4 interface, and the custom options are available on the Edit pages.

Create a Campaign page

Creating a campaign page has the same steps as creating a regular page in Planet4.

KEY INFO – If you do not choose to use a custom design (see later) there are only a handful of differences between a Campaign page and a regular page. 

Beyond the the UX differences described in the previous section, the only obvious feature of Campaign pages is that they can be found in the /campaigns/ subdirectory (meaning that their URL will be greenpeace.org/xx/campaigns/pagename)

To create a new campaign page, just go the Campaigns menu in Planet4 and click on Add new…

Choose a theme

You can access the customizer options by clicking on the little paintbrush icon in the top right corner – this is only visible when you are editing campaign pages. In the right sidebar of every Campaign page you’ll find a ‘Theme’ dropdown with a number of available templates based on the respective campaign style guides. These templates inform the default fonts, colors and some other graphic elements (borders, arrows, button shapes) of a given page.

KEY INFO – If you choose a different template from the dropdown, it will change all the elements of the page that is specified in the template and is not overridden by a setting in the Page Design section (see below). 

Customize the design

Campaign pages have a special section called Page Design where you can customize certain elements of the page. The available font and colour options were selected based on the campaign style guides, making sure that they are looking good in any combination.

The number of options is limited on purpose, making sure that the resulting pages will have a visual consistency.

Let’s take a look at the customization options.

Navigation

To minimize the number of visitors who leave the page because they get distracted by the default header (and footer) items you can choose to use a ‘Minimal navigation’ that doesn’t have the standard header navigation items, search bar or donate button.

You can select the ‘Minimal navigation’ from the right side menu, under Campaign Options -> Navigation.

Below you can see the difference between the Main website navigation and Minimal Navigation.

Navigation background color

You can change the background color of the header and the footer using this color picker. The available colours were handpicked from the campaign style guides and the Planet4 color palette.

Logo

If a campaign wants to use their own logo instead of the Greenpeace logo in the header, they can do so by choosing one in this dropdown.

Logo color

If the campaign style guide contains a dark and a light version of the logo then you can switch between the two using this radio button.

Header Primary Font

Campaign style guides always specify a characteristic primary font that gives an easily recognisable identity to their materials. You can choose a primary font from the dropdown that will change the font of the block titles. The list was handpicked from the campaign style guides.

The dropdown menu will indicate which is the default for the page by having ‘(default)‘ displayed next to the font name.

Body Font

Planet4 offers a couple of fonts. If a campaign has a body font specified that is considerably different than the Planet4 defaults then it will appear in the fonts dropdown (such as the Save the Arctic in the image below). We wanted to limit the number of options as much as possible here to make sure that the pages you build will have some design consistency.

Footer Theme

By default the footer background color will match the header background color. However if that color is too intense, it might make sense to choose the white footer theme, where the footer background will be white and the text color will have the header color.

Footer Items

If a campaign has their own global social media channels, they have the option to overwrite the default footer elements using the Footer Items. You can find the settings under the main edit area – just scroll down to the bottom of the page.

Add the URL of the social media channel in the first field and the matching icon name in the second field. Make sure you consult the list of available icons (linked from the customizer) and that you fill in only the icon name, without the file extension. If you don’t fill in these fields then the default footer elements will be visible. However if you fill in at least one of these then Planet4 will hide the default elements and will only show the ones you specify. So if you fill in only the “Footer item 1” then you’ll see only one icon in the footer.

Sharing (import/export) campaigns across P4 sites

One of the key features of Campaign pages is that you can export them with one click to an XML file (including all the page contents, galleries, embedded media, etc) that you can share with other NROs who can import it, meaning that only the translations need to be added and the campaign page is ready for launch.

Multi-page campaigns

The campaign type is hierarchical, meaning that a campaign page uses the settings (style and tracking) of the top level campaign it is under. The behavior doesn’t change if the page is the top level campaign.

Campaign pages can be linked to another campaign page using the parent_post field and using all graphic and analytics settings from that campaign page. As long as a “campaign page” isn’t linked to another campaign it will keep using its own settings. This allows us to keep backwards compatibility.

Options in the Page Attributes section:

KEY INFO – Once a campaign page is set up as being a child page, the Campaign Options menu will not be available anymore. When selecting the Campaign Options menu, a message will be displayed to inform that this is a sub-page, so any design changes should be done on the parent page.

Analytics & Tracking fields (DataLayer)

To track our pages and Campaigns the same way across P4 sites, some field need to be inserted completed. These values are pulled from the GP Global Project Standards (SSOT) table (Smartsheet) to feed in the “Campaign information (dataLayer)” dropdowns.

KEY INFO – The “Analytics & Tracking” fields are obligatory for P4 Campaigns (P4CG) – you won’t be able to publish a Campaign without those fields!

All DataLayer fields (Global and Local projects) are pulled out automatically from the Smartsheet

Multilingual sites – Apply main site WPML configuration to Campaign pages

Links & Resources