How to display promo assets using an embed code

Overview

Once a promo asset has been created in the Cortex platform, there are two ways it can be displayed. Firstly, by using an embed code, meaning the content has pre-set design; and secondly, by using what is called ‘headless integration’, meaning you decide the design according to your needs and the nature and form of your website or app.

This document addresses the first of these topics - using an embed code. If you would like to know more about setting your own display characteristics, see How to display promo assets using headless integration

For more on creating promo assets, see How to create a promo asset). (Note: This link will take you to an Academy document.)

Displaying a promo asset using an embed code

A promo asset can be displayed on a webpage or in an app by finding the promo asset you would like to display, extracting the embed code and introducing it into your website or app with appropriate variables set. The process is as follows:

1. Log in to Cortex. On the left-hand side, under the Data & Marketing dropdown, select Promo Assets.
2. The Promo Assets screen is displayed. In the main central panel is a list of your existing promo assets. Each row displays an individual promo asset. Scroll to the row entry you wish to use. At the far right-hand side, click on the three vertical dots.
3. A drop-down menu of options is displayed. Select View embed code.
4. The embed code is displayed in a pop-up, as shown above. The promo asset can be displayed by copying the embed code by clicking the Copy code button, and pasting the code into your app or site.

The fields in the embed code and their settings are as follows:

<cortex-promo-asset id="PCB-ID" client-id="CLIENT-ID" server="standard" stage></cortex-promo-asset>
<script src="https://promo-asset.cortextech.io/index.js"></script>

• The promo asset ID in the first line entry (PCB-ID) is directly associated with the selected PCB, so will not need changing.
• Because the promo asset was created within your account, the CLIENT-ID should also be correctly preset in the embed code to your organisations client ID, assigned to you during your account setup.
• The server property asserts the Cortex environment in which the promo assets is created. It is a choice you will have made during the onboarding process, so will be pre-set appropriately to your needs. In general, this means it is set to "us" if you have a customer base in the USA, and set to "standard" if your service is delivered elsewhere in the world.
• There are two environments: Stage (stage) or Production (prod). The assertion of stage means the interaction is with the staging environment. The full attribution (stage=true) is not necessary as the declaration of a boolean property comes with a default value of 'true'.

Embed codes using other properties

The above example uses the promo asset ID (pcb-id) to determine which promo assets should be displayed by the embed code; however Tags, Linked IDs and Categories can also be used, as follows:

Using the tags property:

<cortex-promo-asset client-id="CLIENT-ID" stage tags="tag1,tag2"></cortex-promo-asset>

Using the categories property:

<cortex-promo-asset client-id="CLIENT-ID" stage categories="categoryID1,categoryID2"></cortex-promo-asset>

Multiple properties in the same API call must be comma-delimited, as shown in line 4 of the above examples.

Using the linkedIds property:

<cortex-promo-asset client-id="CLIENT-ID" stage linkedIds="PROVIDER-AND-TYPE:3992,3492"></cortex-promo-asset>

A linkedIds entry may be comma-delimited within itself, like this:

PROVIDER-AND-TYPE:ID,ID,ID

For example: OPTA_FOOTBALL_PLAYER:1234,5678,9876

However, there may be multiple such entries, in which case the format is:

PROVIDER-AND-TYPE:ID,ID|PROVIDER-AND-TYPE:ID|PROVIDER-AND-TYPE:ID,ID and so on.

📘

Note

If there are multiple campaigns with the same category, tag or linkedIds, the widget will always retrieve the one with the most recent published time.

Where are these properties set?

The above properties are setup in the Taxonomies and Linked IDs area of the content creation screens. Please refer to the document: How to create a promo asset for details on setting up these elements.

Impression tracking

To enable impression tracking when using our web component, three specific conditions must be met for successful tracking implementation:

1. The consent must be set to true, which is the default value so can be ignored
2. The event-tracking-key must be provided
3. Tracking must be enabled in Cortex

An API tracking key called the event-tracking-key is issued by Cortex and can be used to enable impression tracking within the embed. See YOUR KEY in the example below.

<cortex-promo-asset id="PCB-ID" client-id="CLIENT-ID" server="standard" stage></cortex-promo-asset>
<script src="https://promo-asset.cortextech.io/index.js" event-tracking-key="YOUR KEY"></script>

Note that using the event-tracking-key is required. Contact your Cortex administrator or account manager if you do not know your API tracking key.

Facilitating enhanced personalisation

To enable some features, for example, to personalise based on data associated with a single sign-on account, the access token needs to be passed. This can be done by adding access-token="TOKEN", with TOKEN being replaced by the fan’s token.

The system also supports accessTokenCookieName which is an alternative to directly passing in an access-token. If access-token exists, it will be used, otherwise if accessTokenCookieName exists, the system will attempt to get the access token from that cookie.

If the access token is not included, the session will be executed anonymously. However, if there is a device ID, the system will use historical information gathered against this device ID to provide promo assets. If the device ID is not present, a new one will be assigned and data gathered against it in order to provide promo assets to the anonymous user.

Was this page helpful?

If you need further assistance, or would like to suggest improvements or provide feedback, we would love to hear from you. Please contact us via the Help centre.