Using Page Elements

Purpose and scope

Questions

Page Elements is a HTML-based content tool that can be used to extend the content and style of your WebShop. Page Elements opens up the Digital Commerce platform to content and style updates initialed and managed by you, the Merchant. Now you can add content that is displayed either at the top or bottom of all of your WebShop pages with one HTML snippet. Alternatively, you can modify the existing style for all pages in your WebShop by adding HTML code into the head of each page.

For example, using Page Elements, you can add a link to a promotion to the top or bottom of each page in your WebShop and then track its progress by capturing data on the number of clicks it has generated. Alternatively, you can use Page Elements to override an existing colour or font size for your WebShop easily and quickly.

The purpose of this article is to explain the Page Elements feature.

Key points

Knowledge of coding is required to use this feature. You must understand some basic programming constructs and be comfortable using HTML.
You are responsible for ensuring that the code you have written doesn’t adversely affect your WebShop. We do not provide free support to fix code you have written in the Page Elements editor.

Introducing terms and concepts used in this article

Term	Definition
Google Analytics 4	(GA4), captures data from different points on your website and app. The data captured is triggered by events (such as View Product or Checkout) which allows you to understand your customer's experience better and make informed decisions in order to improve business efficiency and sales.
Hypertext Markup Language	(HTML), the standard markup language for creating Web pages, used to describe the structure of a Web page.
Uniform resource locator	(URL), the address of a website.

How it fits together

Page Elements is integrated with Management Interface. It is a HTML-based content tool that allows you extend the content and style of your WebShop. The Page Elements editor uses HTML. HTML is a standard markup language used to describe the structure of a web page. Read this external HTML tutorial for more information about how to use HTML.

When you open Page Elements, you are presented with an interface that contains three panels, as shown:

Head: gives you access to the <head> section of the HTML of each pages using one of four supported HTML tags - <style>, <script>, <link> and <meta>. You can add scripts and code that extend the functionality of your WebShop. For example, you could use the <script> HTML tag to include a script that contains a Google Analytics tag. This allows you to track data on your eCommerce site.
Body Start: enter HTML to add content to the start of the body of the page. Content is displayed above the top ribbon on each screen in WebShop. For example, you could include a Welcome message or a link to a customer promotion.
Body End: enter HTML to add content to the bottom of the body of the page. Content is displayed below the bottom ribbon on each screen in WebShop. For example, you could include a “Thanks for visiting” message.

Knowledge of HTML is required to use this tool effectively. While you are responsible for ensuring that the code you have written doesn’t adversely affect your WebShop, there is an in-built ‘linting’ or error-checking tool. This tool returns errors if you use an unsupported HTML tag or if your HTML is not syntactically correct.

Remember, that we do not provide free support to fix HTML you have used in Page Elements.

Step by step

Step 1: Log into Management Interface

Log in

Log into Management Interface using your username and password. This opens the dashboard of your Management Interface.

Step 2: Open Page Elements editor

Open

Click Page Elements, located in the left hand menu under Content → Pages. This opens the Page Elements Editor. The Page Elements Editor contains three text boxes:

Head - add content to the head of the page. Supported HTML tags are:
- <style>
- <script>
- <link>
- <meta>
Body Start - add content to the start of the page body
Body End - add content to the bottom of the page body

Step 3: Add or edit HTML

Add or edit

Update the code using HTML.
Click Save. This saves the code and updates WebShop with your changes.

Changes are visible in WebShop once you have saved your changes.

Use cases

Use case 1: Add a Welcome message to the top of each WebShop page

Use case 1

To add a Welcome message to the top of each WebShop page, add the following HTML to the Body Start section of the Page Elements editor and click Save.

<h2 style="color:blue">
Welcome to WebShop!
</h2>

Watch

Use case 2: Track engagement with a promotion link

Use case 2

The <script> HTML tag allows you to add code that performs a specific action in your browser. For the code to work correctly, you may have other configuration task to carry out before adding the HTML code to the Page Elements editor.

For this use case, it is assumed that:

You have activated Google Analytics 4 (GA4) in your WebShop. Read our feature guide on Including Google Analytics in WebShop for more information.
You have set up an GA4 event in your Google Analytics dashboard where promotion_name (see code below) is a GA4 parameter. Consult GA documentation on how to configure this.
You have created a banner set that has a valid URL mapping to the product / promotion you wish to track.

Once these criteria are met, to track success of a promotion by counting the number of times a customer clicked on a specific banner, add this HTML code to the Head section of the Page Elements editor and Click Save.

<script>
dataLayer = window.dataLayer || {};
dataLayer.push ({
'event': 'click_banner',
'banner_slot': '1',
'promotion_name: 'Promo engagement'
});
</script>

This code is visible if you view Page Source in your browser. The event is triggered and data captured when the WebShop page is opened. Captured data is visible under the GA4 event in your Google Analytics dashboard.

References

¹ External site: W3 Schools - HTML Tutorial