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.
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>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.
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)
};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(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(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');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...
});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"
});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 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');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
});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
});Explanation coming soon, please contact traffic@pexi.nl if you want to use this function.
Explanation coming soon, please contact traffic@pexi.nl if you want to use this function.
The PEXI.Feed object contains different functions that can be combined to easily retrieve a PEXI feed. The basic version without filtering looks like:
PEXI.Feed.hash('65d32d7148975').get().then(response => {
//You can do something with the response here
});hash(string, object)
The hash() function accepts two paramters. The first one is a string, this needs to be the hash of the feed, you can find the hash in the feeds tab within Pexi. As a second parameter this function accepts an object to pass any query paramters, for example:
PEXI.Feed.hash('65d32d7148975', {tab: 'tab_1'})
filterByKey(key, value)
You can add the filterByKey() function to filter on a certain column, for example the categroy 'blauw':
PEXI.Feed.hash('65d32d7148975').filterByKey('category','blauw').get().then(response => {
//You can do something with the response here
});
filterByDate(begin, end)
Next to that you can filter on a date as well, you can ad a begin and end or the 'today' string. The filterByDate() functions searches for a begin_date and end_date column within your feed. The function works best with an ISO8601 date string, but also accepts other formats according to the Date.parse() JS documentation.
PEXI.Feed.hash('65d32d7148975').filterByDate('2024-02-01 10:00:00', '2024-02-03 23:59:99').get().then(response => {
//You can do something with the response here
});
get(amount)
If you only need a certain amount of rows you can also pass a number within the get() function:
PEXI.Feed.hash('65d32d7148975').get(5).then(response => {
//You can do something with the response here
});
first()
Or use the first() function to only get the first row:
PEXI.Feed.hash('65d32d7148975').first().then(response => {
//You can do something with the response here
});
then().catch()
The PEXI.Feed.get() and first() function are based on a Promise function. So like a Promise you can add a then() function or catch() function to receive the response or handle the error:
PEXI.Feed.hash('65d32d7148975').get()
.then(response => {
//You can do something with the response here
})
.catch(error => {
//Do Something with the error
});