Backbone

• Start the page with a white backbone in the header section of the page, or no backbone at all.
• The first backbone you use after the header should always be red.
• The backbone can only be added in the center of the page.
• Except for the backbone included in a form, the backbone must always have a width of 30px
• The mobile width of the backbone should always be 10px and aligned to the left of the screen
• The backbone can be devided by an image, coloured block or whitespace. The seperate parts of the backbone can't contain more then 3 colours.

Usage of colors

General:
No other colors can be used except the colors that are defined at the Colors section.

Font colors:
No other colors can be used except the color that is defined at Fonts section.

Background colors:
Except for the darkest Navy color (bg-navy-100), only the lightest colors can be used as background colors (See the classes that end with 20 at the Colors section). 

CTA colors:
No other colors can be used except the colors that are defined at Colors section.

Doodles

Doodles can only be used in combination with an image. The doodle must support the image, not the other way around (i.e. the doodle must nog be bigger than the image).

Images

General
Images can be found on images.exact.com. Make sure you always use image compression before using the image on the website:

• Always resize the image to the size you need on the page. Avoid using big images if this is not needed.
• If you don't have the software (like Adobe Photoshop) to compress the image, see this page for free image compression sites.

Header images

It is not mandatory to add a doodle in the header of a landingpage. When using an image without a doodle, we prefer that you use an image that is (partly) cut out. If this isn't possible, you can also just add an image with a background.

It is not neccesary to use a doodle image in campaigns and landingpages. To keep consistency, you can use a header image without a doodle if this isn't used in the campaign.

Sticky image

• When using a doodle on the images in the 'sticky image' addon, make sure you always use the same doodle in each image.
• When using an image like the example below, only the doodle of the coffee cup can be replaced by another doodle. The keyboard must always be used.
  

Video's

When using a video always show the video in a pop-up (See modal popup addon).

Forms

When using a form in combination with a backbone, the backbone can only have a width of 20px instead of the default width of 30px.

Publishing

Webpage

A webpage must meet the following requirements before it can be put live:

• The copy is aligned with all stakeholders
  • Solution marketing is involved and updated regarding product related pages
  • The right tone of voice is used
• The page in pagebuilder uses the correct naming convention
• The page in pagebuilder is linked to the right category and language
• The design rules and VI are applied correctly
• The page is responsive and ready for mobile
• All images used on the page are compressed and have the right size
  • When using small images avoid uploading it in a big sizes
  • Images can be compressed via Photoshop or see this page for free image compression sites..
• The AMP page contains no errors when using the validator
  • The AMP page will be created once the menu-item for the page is created
  • The AMP page uses the same URL, with /amp inserted right after the language tag or the root in case of the global site
• The meta data and OG tags are filled in via the SEO tab in the menu-item
• The data for the datalayer is filled in correctly
• Changes to a page won't conflict with experiments running on this page

Forms

• When creating a new form the Master form must be used to duplicate to make sure all required fields and settings are used.
• The correct naming convention is used for the title of the form
• The data is saved in the right systems
• When sending an e-mail via the website
  
  • The content and variables in the e-mail are checked
  • The subject of the e-mail is checked
  • The sender's e-mailaddress is checked
  • The website is able to send the user- and/or admin e-mail
  • The design rules and VI are applied correctly in the e-mai
• The data for the datalayer is filled in correctly
• A thank you page or message is created

Raw HTML, Scripts & Stylesheets

• If possible avoid using raw HTML, Scripts & Styling because this affects the page speed and performance.
• When extra scripts & stylesheets are needed always include this at the bottom of the page via the scripts snippet.

Testing & Experiments

A/B tests

• Before the test starts a hypothesis should be created in the testing document.
• A test page uses the correct naming convention.
• The test in optimize uses the correct naming convention.
• When the test is finished, the test page in pagebuilder and the menu-item are being deleted a.s.a.p.
• Results of the tests are being updated in the testing document.

Personalization

• Before the experiment starts a hypothesis should be created in this document.
• The experiment in optimize uses the correct naming convention.
• When the experiment is finished the results are being updated in this document.

Data that can be pushed to the datalayer can be found in the SDD document. When you create new or change existing values that need to be pushed, this always needs to be updated in the SDD document. For more information, contact the Marketing Automation team.

General

The general page data kan be maintained at the menu-item of the page (Menu item > SEO Score > Datalayer). The datalayer can't be added to the AMP pages.

The following data is automatically generated but can be changed manually

• Page title {pagetitle}
• Language {language}
• Breadcrumbs {breadcrumbs}

Other data is optional but not less important to consider adding it to the page. This data can be added manually. When in doubt about what info you must enter please contact the Marketing Automation team.

Buttons

When you want to push an event to the Datalayer via a button, you can add the following line to the "onclick" of the button add-on:

javascript:global_layer.push({'event': 'e_cta','dL_ctaAction': 'My button'});

Replace the text "My button" with the value you want to push to the Datalayer.

When you look at the source code, an example of a trial button may look like the this:

<a href="/try-now" class="btn btn-blue" onclick="javascript:global_layer.push({'event': 'e_cta','dL_ctaAction': 'Try now'});">Try now</a>

Forms

You must select the form type in the add-on of the form in pagebuilder. The form in RSform must contain a PHP script to make sure the data is pushed to the Datalayer.
Only web specialists and super users have the permission to add or change this.
The following script must be added to the Script called after form has been processed section:

require_once (JPATH_SITE.'/libraries/exact/datalayerForms.php');

$params = array(
'dL_formAction' => 'submit',
'dL_action' => 'success', 
'dL_formId' => $_POST['form']['formId'],
'dL_packageCode' => $_POST['form']['PackageCode'],
'dL_formType' => $_POST['form']['formType']
);
$thankYouMessage = $thankYouMessage . datalayerForms::processFormSubmit('e_formSubmit', $params, $_POST['form']['formId']);

Script files and style sheets should be included via the script snippets to keep optimal page speed and performance. It prevents scripts and stylesheets from being included multiple times and is put at the bottom of the page.

The following snippets can be used:

Name: Name of the script or stylesheet. Only for internal use.
Path: The URL of the script.
Position: 'top' or 'bottom'.

Scripts and stylesheets must always be included at the bottom of the page. When it is required to place the script in the head of the page, you can use the position "top".

Check this document to see what snippets are already used.

You can overwrite the stylesheet or script file by using the names that are already in use.