Slice-Venetian Component Documentation

Example of Slicebox:

Template in Adform HTML STUDIO

Example of Venetian:

Template in Adform HTML STUDIO

Initialization and Options

To start with Slice-Venetian Component, you have to load it in your .html file.

<script src="scripts/Adf.Slice-Venetian.V1.js"></script>

Then, add Adf.Slice-Venetian.V1.js file into scripts folder.

See the example of initialization:

// 1. Create new instance
var slicedUnit = new Adf.SlicedUnit({
    width: 300,
    height: 300,
    content: [
        {src: Adform.getAsset(1), onClick: Adform.getClickURL('clickTAG1')},
        {src: Adform.getAsset(2), onClick: Adform.getClickURL('clickTAG2')},
        {src: Adform.getAsset(3), onClick: Adform.getClickURL('clickTAG3')},
        {src: Adform.getAsset(4), onClick: Adform.getClickURL('clickTAG4')},
        {src: Adform.getAsset(5), onClick: Adform.getClickURL('clickTAG5')}
    ]
});

// 2. Append sliced unit root element to banner
document.querySelector('#banner').appendChild(slicedUnit.getElement());

Mandatory Options

These are the properties that have to be present in options’ Object.

Optional Options

SlicedUnitContent

Methods

• SlicedUnit
  
  • .next()
  • .prev()
  • .isAutoRotating() boolean
  • .stopAutoRotation()
  • .getElement() Element
  • .getCurrentItemIndex() number
  • .on(eventName, listener, [context])
  • .off(eventName, listener)

slicedUnit.next()

Rotates to next item. Note that calling this method will stop auto rotation.

buttonElem.onclick = function() {
    slicedUnit.next()
}

slicedUnit.prev()

Rotates to previous item. Note that calling this method will stop auto rotation.

buttonElem.onclick = function() {
    slicedUnit.prev()
}

slicedUnit.isAutoRotating() ⇒ boolean

Checks if auto rotation is active.

slicedUnit.stopAutoRotation()

Stops auto rotation.

slicedUnit.getElement() ⇒ Element

Returns outer element.

Example:

document.querySelector('#banner').appendChild(slicedUnit.getElement());

slicedUnit.getCurrentItemIndex() ⇒ number

Returns index of currently visible SlicedUnitContent

slicedUnit.on(eventName, listener, [context])

Registers event listener for the provided event name.

slicedUnit.on(SlicedUnit.ROTATION, function(toIndex, fromIndex) {
    // Called whenever rotation changes, can be used to send engaging rotation events
    if (!slicedUnit.isAutoRotating()) {
        Adform.sendEvent(1);
    }
});

slicedUnit.on(SlicedUnit.ROTATION_ANIMATION_START, function() {
    // Called on rotation animation start
});

slicedUnit.on(SlicedUnit.ROTATION_ANIMATION_END, function() {
    // Called on rotation animation end
});

slicedUnit.off(eventName, listener)

Removes event listener. If listener is null or undefined, removes all listeners
associated with the provided event name.

Examples

Slicebox with custom controls

var SlicedUnit = Adf.SlicedUnit;

var slicedUnit = new SlicedUnit({
    width: 300,
    height: 300,
    minScale: 0.95,
    sliceCount: 5,
    sliceSideCount: 4,
    sliceRotationDuration: 0.6,
    sliceRotationDelay: 0.1,
    shadow: '#006496',
    autoRotationDelay: 3,
    autoRotationTimeout: 25,
    useVerticalSlices: false,
    useVerticalRotation: false,
    useSinglePerspective: true,
    useOffsetCompensation: false,
    content: [
        {src: Adform.getAsset(1), onClick: Adform.getClickURL('clickTAG1')},
        {src: Adform.getAsset(2), onClick: Adform.getClickURL('clickTAG2')},
        {src: Adform.getAsset(3), onClick: Adform.getClickURL('clickTAG3')},
        {src: Adform.getAsset(4), onClick: Adform.getClickURL('clickTAG4')},
        {src: Adform.getAsset(5), onClick: Adform.getClickURL('clickTAG5')}
    ],
    className: 'slicedUnit'
});

slicedUnit.on(SlicedUnit.ROTATION, function(toIndex, fromIndex) {
    // Send engaging event 1 ('rotate') if rotation is not automatic
    if (!slicedUnit.isAutoRotating()) {
        Adform.sendEvent(1);
    }
});

slicedUnit.on(SlicedUnit.ROTATION_ANIMATION_START, function() {
    // console.log('ROTATION_ANIMATION_START');
});

slicedUnit.on(SlicedUnit.ROTATION_ANIMATION_END, function() {
    // console.log('ROTATION_ANIMATION_END');
});

document.querySelector('#buttonPrev').onclick = function() {
    slicedUnit.prev();
};

document.querySelector('#buttonNext').onclick = function() {
    slicedUnit.next();
};

document.querySelector('#banner').appendChild(slicedUnit.getElement());

Venetian with custom controls

var SlicedUnit = Adf.SlicedUnit;

var slicedUnit = new SlicedUnit({
    width: 728,
    height: 250,
    minScale: 1,
    perspective: 500,
    sliceCount: 12,
    sliceSideCount: 2,
    sliceRotationDuration: 0.6,
    sliceRotationDelay: 0.08,
    autoRotationDelay: 3,
    autoRotationTimeout: 25,
    useVerticalSlices: true,
    useVerticalRotation: false,
    useSinglePerspective: true,
    useOffsetCompensation: true,
    content: [
        {src: Adform.getAsset(1), onClick: Adform.getClickURL('clickTAG1')},
        {src: Adform.getAsset(2), onClick: Adform.getClickURL('clickTAG2')},
        {src: Adform.getAsset(3), onClick: Adform.getClickURL('clickTAG3')},
        {src: Adform.getAsset(4), onClick: Adform.getClickURL('clickTAG4')},
        {src: Adform.getAsset(5), onClick: Adform.getClickURL('clickTAG5')}
    ],
    className: 'slicedUnit'
});

slicedUnit.on(SlicedUnit.ROTATION_ANIMATION_START, function() {
    // console.log('ROTATION_ANIMATION_START');
});

slicedUnit.on(SlicedUnit.ROTATION_ANIMATION_END, function() {
    // console.log('ROTATION_ANIMATION_END');
});

document.querySelector('#banner').appendChild(slicedUnit.getElement());

Switch from mobile MRAID to regular DHTML technology

This component is compatible with both MRAID and DHTML technologies, and thus it can be used in Mobile Standard or Display Standard types of ads.

To switch from MRAID to DHTML, follow the steps bellow:
1. Open Slicebox in HTML5 Studio.
2. Export your Slicebox MRAID version from HTML5 Studio to your computer.
3. Extract the downloaded .zip and open ADFBannerProperties.xml with any editor.
4. Replace the following parameters

<format>Standard (Mobile App)</format>
<name>Slicebox</name>

with

<format>Standard</format>
<name>Standard</name>

After the replacement, save the file.
5. Then, go to Slicebox_main_asset and open index.html.

a. Replace all Adform.getClickURL and Adform.getAsset

 content: [
            {src: Adform.getAsset(1), onClick: Adform.getClickURL('clickTAG1')},
            {src: Adform.getAsset(2), onClick: Adform.getClickURL('clickTAG2')},
            {src: Adform.getAsset(3), onClick: Adform.getClickURL('clickTAG3')},
            {src: Adform.getAsset(4), onClick: Adform.getClickURL('clickTAG4')},
            {src: Adform.getAsset(5), onClick: Adform.getClickURL('clickTAG5')}
        ],

with dhtml.getVar and dhtml.getAsset

content: [
            {src: dhtml.getAsset(1), onClick: dhtml.getVar('clickTAG1')},
            {src: dhtml.getAsset(2), onClick: dhtml.getVar('clickTAG2')},
            {src: dhtml.getAsset(3), onClick: dhtml.getVar('clickTAG3')},
            {src: dhtml.getAsset(4), onClick: dhtml.getVar('clickTAG4')},
            {src: dhtml.getAsset(5), onClick: dhtml.getVar('clickTAG5')}
        ],

b. Replace Adform.sendEvent with dhtml.sendEvent.

c. In document section, replace <script src="mraid.js"></script> with

<script type="text/javascript">
    document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
</script>

After replacement, save the file.
6. Select all banner files and zip it.
7. Upload this .zip to HTML5 Studio.