GuidesDiscussions

Module: iFrame

Suggest Edits

1. First Step

Add an iframe module to the stage, now you can directly upload files into the assets panel (upload a zip file containing your HTML and all files) the files will stay in a relative folder structure, and the iframe can communicate w/ jetpack tracking via postMessage.

your new html file can be associated to the iframe and will appear on stage.

👍

Using 3rd party creative

You can run 3rd party creative from an iframe inside the Jetpack platform. This is helpful for placing a banner inside a jetpack frame for dynamic delivery, such as Interstitial Overlays.

Adding Code to communicate from iFrame to Jetpack

🚧

Tracking the iframe.

By default jetpack does not have any tracking on the iframe that is loaded via our module, but the iframe can communicate to and from the Jetpack platform to fire tracking events or sync with other Jetpack modules.

Sample code that was used in a unit on Jetpack. Code written by customer to communicate w/ jetpack event tracking for reporting and to start animation on inView visibility. 

//When the page loads, it adds a message listener that waits for the
// jpmessage::advisible event, then starts the intro animation.

// The opener is initially set to window.opener.

// When this event fires, it prefers the event.source instead.


var opener = window.opener || null;

window.addEventListener('message', function jplistener(evt) {
    var origin = evt.origin || evt.originalEvent.origin;

    //if (origin !== 'http://www.cnn.com') {
    //    return;
    //}

    if (evt.data === 'jpmessage::advisible') {
        opener = event.source;
        window.removeEventListener('message', jpListener);
        // start the intro animation
    }
}, false);

// TRACKING VARIABLES PASSED FROM IFRAME TO JETPACK

*/ Later, when the user clicks the intro animation, it triggers a custom quizstarted event on the #quiz element. You can attach a listener for that event, but I have also added my own, which sends you back the same jpmessage::advisible message /*

document.getElementById('quiz').addEventListener('quizstarted', function () {
    if (opener !== null) {
        opener.postMessage('jpmessage::advisible', '*');
    }
});

Updated over 7 years ago