CODEWITHSUNDEEP
google-dfp
Tony Jackson
Tony Jackson

Reputation: 11

Safeframe API, $sf not defined in creative

I am trying to use the Safeframe external party API in my creative, but I am getting "$sf not defined" in the console. It seems like the safeframe external party api is not available in the creative despite what is said here: https://support.google.com/dfp_premium/answer/6023110?hl=en

Why does Google have this statement in their help documentation if it is not true? It might be possible that I am missing a step, but my creative works in the Creative Preview Tool (http://publisherconsole.appspot.com/safeframe/creative-preview.html).

Please help! Client's ad at risk of being delayed.

Upvotes: 1

Views: 2973

Answers (3)

Juvenik
Juvenik

Reputation: 950

Was reading about safe frames and like you, I found this $sf variable coming as undefined. But these are the ways in which I was able to find the solution.

  1. Go to any site where the publisher has implemented safe frames. I tried this site https://www.w3schools.com/html/default.asp Now hover on the add and inspect it and see the iframe, you will notice this attribute in the iframe tag

data-is-safeframe="true"

enter image description here

Now go to the context of that iframe in the console of the developer tool. In chrome, if you inspect that ad, you will automatically go to the iframe context in the console.

Once you are in the console of the iframe, hit this command

window.sf_.cfg.initialGeometry;

This will give you some of the attributes that are mentioned in the safe frame documentation. https://sourceforge.net/p/safeframes/wiki/How-To/

{
    "windowCoords_t": 24,
    "windowCoords_r": 1236,
    "windowCoords_b": 720,
    "windowCoords_l": 65,
    "frameCoords_t": 128,
    "frameCoords_r": 964,
    "frameCoords_b": 218,
    "frameCoords_l": 236,
    "styleZIndex": "auto",
    "allowedExpansion_t": 0,
    "allowedExpansion_r": 128,
    "allowedExpansion_b": 0,
    "allowedExpansion_l": 0,
    "xInView": 1,
    "yInView": 1
}

You can see the frame co-ordinates in terms of left, right, top and bottom. xInView and yInView are given in terms of decimal values, multiply by 100 to get the percentage.

Thanks. This was all I could get to this date. I think they will make more info available later.

The above solution holds true in Internet Explorer and Chrome/Chromium.

In firefox, there is a variable $sf defined inside the iframe context. You just need to get inside the iframe context and start fetching information from window.$sf

Upvotes: 2

Misha
Misha

Reputation: 6588

It appears that Safeframe API is not available inside html5 creative. ext.js is loaded in the parent frame and can not be accessed from a cross-origin creative frame.

screenshot

Upvotes: 1

user1965074
user1965074

Reputation: 369

A bit late to the party but the DFP SafeFrame API works well. The issue the poor documentation making it hard to implement.

You have not shared any code so I cannot tell you what you did wrong.

Here is an example that might serve you well.

It uses the SafeFrame API to detect inscreen so that you may start animation:

<script type="text/javascript">
var sfAPI = window.sfAPI || $sf.ext; 

window.onload = function () {
    var inscreen = false;

    var refreshIntervalId = setInterval(function() {
        if(sfAPI.inViewPercentage() == 100) {
            // Start animation if inscreen
        }
    }, 500);
};
</script>

Here is the documentation for available SafeFrame API functions in DFP.

Upvotes: 0

Related Questions