HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

720x1080

816 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <title>CFIA Playable AD</title>

    <style>
        #app {
        position: fixed !important;
        height: 100%;
        width: auto;
        left: 0;
        right: 0;
        margin: auto;
        
      }
      canvas{
        background-color: #005678;
      }
      body {
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.87);
  background-color: #51c9f8;
}

#app {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dummy {
  position: fixed !important;
  height: 100%;
  width: auto;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
}

@font-face {
  font-family: "Asap";
  src: url("https://tech-iion.github.io/advertiser-creatives/finalbuildfiles/cfia/assets/Asap-Bold.ttf");
}

@font-face {
  font-family: "Montserrat";
  src: url("https://tech-iion.github.io/advertiser-creatives/finalbuildfiles/cfia/assets/Montserrat-ExtraBold.ttf");
}

.dummy p {
  opacity: 1;
}

.dummy p:nth-child(1) {
  font-family: "Asap";
}

.dummy p:nth-child(2) {
  font-family: "Montserrat";
}

.cooking-progress-container {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40vw;
  max-width: 500px;
  min-width: 280px;
  bottom: 15vh;
  text-align: center;
  z-index: 1000;
}

.cooking-progress-text {
  color: #ffffff;
  font-family: 'Asap', sans-serif;
  font-size: calc(12px + 0.4vw);
  margin-bottom: 8px;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.cooking-progress-bar {
  width: 100%;
  height: calc(12px + 0.6vh);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: calc(6px + 0.3vh);
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

.cooking-progress-fill {
  width: 0%;
  height: 100%;
  background-color: #FBDF42;
  border-radius: calc(6px + 0.3vh);
  transition: width 0.1s linear;
}

    </style>
  <script type="module" crossorigin src="https://tech-iion.github.io/advertiser-creatives/finalbuildfiles/cfia/assets/index-DbZrro6s.js"></script>
  <link rel="modulepreload" crossorigin href="https://tech-iion.github.io/advertiser-creatives/finalbuildfiles/cfia/assets/phaser-DM0uoNMb.js">
</head>

<body>

    <div class="dummy">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
      </div>

    <div id="app">
        <div id="game-container"></div>
    </div>
    <script>

      //GAM
      const campaign_id = "6928334378";//EN
      //const campaign_id = "6904639853";//FR
      window.trackingType = "https://staging-dmp-producer.iion.io/tracker/impressions?platform=GAM&campaign_id=%ebuy!&publisher_id=%epid!&creative_id=%ecid!&maid=%%ADVERTISING_IDENTIFIER_PLAIN%%&page_url=%%SITE%%&height=%%HEIGHT%%&width=%%WIDTH%%&video_min_duration=%%VIDEO_DURATION%%&gdpr=${GDPR}&gdpr_consent=${GDPR_CONSENT_XXXX}&demand_id=%eadv!&line_item=%eaid!&event_name=";
      window.setTracker = "%%CLICK_URL_UNESC%%";
    </script>
</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

1593KB

Transfer Size

3774KB

Content Size

1,971.0ms

Dom Content Loaded

396.0ms

First Paint

2,780.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests