Dynamic Affiliate Spots
Dynamic Affiliate Spots (Beta)
Delight XR Dynamic Affiliate Spots provide a standard non-intrusive way to display affiliate items on top of Delight XR Video content. They do not strive to be completely customizable, but rather be constrained in order to provide a user-friendly, standardized yet highly convertible affiliate space. They integrate neatly with the UX of Delight XR and thus seem naturally embedded into the playout experience.
<dl8-affiliate>
To enable the feature a <dl8-affiliate> tag must be placed as a child of <dl8-video>. The <dl8-affiliate> tag itself supports two children: <dl8-affiliate-spot> and <dl8-affiliate-item>.
<dl8-affiliate-spot>
Affiliate spots describe the appearance and behavior of places where you want your items to display in Delight XR. Affiliate spots can be defined by using the <dl8-affiliate-spot> tag. The tag currently supports two attributes:
placing=”<string>” [mandatory]
The location/placing of the spot. This attribute can currently be one of:
WIZARD
Will be shown when the user enters the VR Wizard screen. This placing supports multiple items.
PAUSE
Will be shown when the user pauses the Video.
NO_VR_SCREEN
Will be shown when the user presses the VR button, but does not have a Headset connected (on desktop). This placing supports multiple items.
cta=”<string>” [optional]
Defines a CTA (Call To Action) text to be displayed at a sensible location on the defined spot.
<dl8-affiliate-item>
Affiliate items are what ultimately gets displayed and is what you want to show/sell. Affiliate items are described by the <dl8-affiliate-item> tag. Once you have defined a number of affiliate items, they are distributed randomly across the <dl8-affiliate-spot>s as defined above. An affiliate item needs at least an “url” and a “name” attribute to be valid. But it supports more attributes to describe the affiliate item further and to customize it’s appearance.
url=”<URL>” [mandatory]
The URL to redirect to when the affiliate item is clicked.
name=”<string>” [mandatory]
The name that should be displayed on the affiliate item.
thumbnail=”<URI>” [optional]
An URI pointing to a thumbnail Image describing the product. It is recommended to use square aspects but you can also use slightly wide images. Also it is recommended to use medium resolution images to avoid oversampling and high load-times.
description=”<string>” [optional]
An optional more detailed description of the item you want to redirect to.
Example
A full example of a <dl8-video> with a <dl8-affiliate> configuration could look as follows:
<dl8-video title="Example-Video" author="Jane Doe" format="STEREO_180_LR" poster="example.jpg" display-mode="inline">
<source src="example.mp4" type="video/mp4" />
<source src="example.webm" type="video/webm" />
<dl8-affiliate>
<dl8-affiliate-spot placing="WIZARD" cta="Need a headset?"></dl8-affiliate-spot>
<dl8-affiliate-spot placing="PAUSE"></dl8-affiliate-spot>
<dl8-affiliate-spot placing="NO_VR_SCREEN" cta="Get the full experience!"></dl8-affiliate-spot>
<dl8-affiliate-item
name="Item 1"
thumbnail="//example.org/affil-item1-thumb.jpg"
description="Get Item 1 Here!"
url="https://example.org/tracking/item1"
></dl8-affiliate-item>
<dl8-affiliate-item
name="Item 2"
thumbnail="//example.org/affil-item2-thumb.jpg"
description="Get Item 2 Here!"
url="https://example.org/tracking/item2"
></dl8-affiliate-item>
<dl8-affiliate-item
name="Item 3"
thumbnail="//example.org/affil-item3-thumb.jpg"
description="Get Item 3 Here!"
url="https://example.org/tracking/item3"
></dl8-affiliate-item>
</dl8-affiliate>
</dl8-video>
