Pexi.js

Our Pexi.js library is the core of our tracking. But next tot that is also offers developers & designers tools to make things a bit easier when developing creatives. Below you will find a description of every function that can be found in the Pexi.js library.

Intro

We recommend to load the Pexi.js library in the head of your code. That way we can make sure the function is available when your ad starts. The current version of Pexi can be added as a script:

<script src="https://static.pexi.nl/pexi.js"></script>

PEXI.data

All data that could be relevant to the developers is delivered via the PEXI.data object. Some of the data is updated by site interaction for example by scrolling en scaling. Below you will find an example of the data object.

PEXI.data = {
  site: "nu.nl", //The site name without any https:// or www.
  skin: {
    offset: 30, //The top offset of the skin 
    topWidth: 1000, // The width of the top
    screenWidth: 1920, //The width of the screen (updated on resize)
    screenHeight: 1080, //The height of the screen (updated on resize)
    skins: true, //A boolean that tells if the skins are shown or not
    sticky: false, //Is the skin sticky true or false
    scrollDepth: 0 //The amount off pixels that is scrolled measured from the top
    skinsLoaded: true //Triggered if all 3 skins trigger onload
    skinsReady: true //Triggered if the readyState of all 3 skins is complete
  },
  width: 640, //The width of the current iframe (can be different per iframe)
  height: 1500 //The height of the current iframe (can be different per iframe)
};

PEXI.click(url)

Use PEXI.click(); on an element that is meant to be clicked, IE the cta, to allow pexi to measure the clicks and open the landingpage. Leaving PEXI.click() blank allows you to set the landingpage of the creative inside of pexi, you can also use a variable or string inside of click() to set the landingpage in the html itself. By default the PEXI.click() is applied to the stage but it can be moved to anywhere in the html and javascript, however many times you want.

PEXI.click(variable || integer);

PEXI.event()

PEXI.event(string) can be used to measure custom events. The PEXI.event() can be added anywhere within your JS. One of the use cases of het PEXI.event() is video- and slider tracking.

PEXI.event(string);

PEXI.track()

PEXI.track(url) can be used to fire a custom tracking pixel url. The function can be added anywhere within your JS. To fire the tracking pixel directly after loading the creative you can put it at the end of your JS file.

PEXI.track('https://some-tracking-url.nl/pixel.gif');

PEXI.inView()

With PEXI.inView() you can execute code that is only meant to be played once the creatives is in view of the customer. In the default IAB template PEXI.inView() is used to let the GSAP timeline play when the banner is 100% in screen.

PEXI.inView(function(){
  //Code to excute...
});

PEXI.video()

The PEXI.video() function is another function to make the live of a developer a bit easier. The function takes care of things like essential attributes (e.g. playsline and muted) but also adds video tracking to return clear metrics in the PEXI dashboard. You can also pass settings to the function by adding them to the settings object, for example a custom video poster:

PEXI.video(#video, "https://static.pexi.nl/video.mp4", {
  poster: "custom_video_poster.jpg"
});

PEXI.fullScale()

Aside from regular CSS media queries Pexi also has its own fullScale() function that scales the defined content to the maximum size of the second parameter without cropping, stretching, or overflowing the content.

PEXI.fullScale(
  scale = '#scale', //The element that needs to be scaled. Needs fixed width & height.
  container = '#stage', //The element where the scale element needs to fit in
);

PEXI.message(string)

Pexi creatives (for example skin parts) can communicate with each other trough the PEXI.message() function. With the PEXI.message() function you can send a custom message string. With the PEXI.receiveMessage() of PEXI.receiveMessages() functions below you can receive those messages.

PEXI.message('the_message_you_want_to_send');

PEXI.receiveMessage(string, callback)

With the PEXI.receiveMessage function you can listen to a custom message and act on it with the callback function.

PEXI.receiveMessage('the_message_you_want_to_receive', function(){
   //Do something with the message here
});

PEXI.receiveMessages(callback)

With the PEXI.receiveMessages() you can listen for all PEXI messages that are send to the creative. This function can be used if you want to listen to multiple messages. To listen for one message it is easier to use the PEXI.receiveMessage().

PEXI.receiveMessages(function(){
   //Do something with the messages here
});

PEXI.getGeo()

Explanation coming soon, please contact traffic@pexi.nl if you want to use this function.

PEXI.ready()