CODEWITHSUNDEEP
javascripthtmladsbanner-adsmraid
KlaiZeD
KlaiZeD

Reputation: 1

Mraid js with svelte build application

This is the first time I've encountered mraid technology and banner ads. There was a description in the technical Specification that you can use any tool and scripts can be put in a separate file, so I made a game on Svelte. I don't know how I can use mraid together with svelte and whether they can be used with each other at all. It also said the following:

Just plain good old html/javascript with any common JS libraries of your choice - if your playable is more like a mini-website (poll, video playing in the frame, etc)

Some tips for building playable: · You will usually host assets on your own CDN. Make sure it is easy to link to all your assets (images, sounds, etc) via absolute urls in the final version of your playable. · You will usually give the ad network "a tag" (=body content of your main html file). Try to keep your index.html file small, keep as much logic as possible in your JS file. ·
Deploy your game to CDN. Copy-paste your "game tag" (game index.html body content) into test-a-tag.com as early as practical to test that all works fine.

And after I threw off the wrong version, I was sent the following:

I see that one of the zip files is for index.html - a web page. We don’t generally support that kind of playable and it would be MUCH better and appreciated if you could simply send us an Mraid tag containing the creative and tracking.

An example of how I tried to connect:

<script src="mraid.js"></script>
<script type="text/javascript">
    function initMraid() {
        if (!isMraidAvailable()) {
            showAd();
            return;
        }

        if (mraid.getState() === "loading") {
            mraid.addEventListener("ready", onReady);
        }
        else {
            console.log("mraid is ready");
            onReady();
        }
    }

    function onReady() {
        console.log("onReady");
        if (mraid.isViewable()) {
            setupAd();
        } else {
            mraid.addEventListener("viewableChange", onDisplayed);
        }
    }

    function onDisplayed(viewable) {
        console.log("onDisplayed: " + viewable);
        if (viewable) {
            mraid.removeEventListener("viewableChange", onDisplayed);
            setupAd();
        }
    }

    function setupAd() {
        mraid.setOrientationProperties({
            allowOrientationChange: false,
            forceOrientation: "portrait"
        });
        showAd();
    }

    function isMraidAvailable() {
        return typeof mraid !== "undefined";
    }

    function showAd() {
        console.log("showAd");
        if (isMraidAvailable()) {
           //start app
        }
    }

    function closeAd() {
        console.log("closeAd");
        if (isMraidAvailable()) {
            mraid.close();
        }
    }

</script>

<div id="app"></div>
<script type="text/javascript">
    initMraid();
</script>
<script type="module" crossorigin src="/assets/index.dcdba288.js"></script>
<link rel="stylesheet" href="/assets/index.c4d8ed5c.css">

And also please tell me how to get this mraid tag

Upvotes: 0

Views: 273

Answers (1)

Daniel Hopkins
Daniel Hopkins

Reputation: 11

I just came across this IronSource documentation that has a brief explanation of the mraid tag. It appears that it's just basic html tags, but without wrapping it in <html></html>

*wrong

<html>
<head>
  <title>Document</title>
</head>
<body>
  <a href="http://example.com">
    <img src="http://example.com/images/image.jpg">
  </a>
</body>
</html>

*right

 <a href="http://example.com">
 <img src="http://example.com/images/image.jpg"> </a>

Upvotes: 0

Related Questions