Opera Ads

Appearance

JS Tag ​

Opera Ads JS SDK show ads in specific locations on your site based on configured content.

SDK Address ​

https://res.oa.opera.com/x/oa.js

Quick Start ​

Get and copy ad code ​

A typical piece of ad code shows as follows:

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad_1" data-adx-slot="s600xxxxxxxx" style="display: inline-block;width: 300px;"></ins>
<script>
  (adsbyopera = window.adsbyopera || []).push("ad_1");
</script>

In which:

  1. Introduced Opera Ad JS SDK, and use async to asynchronous loading.

  2. <ins></ins> tag defines the body of the ad, the ad will be rendered into the tag, and the ID of the tag is ad_1.

  3. The code in second <script></script> tag is used to perform ad rendering ad.

Paste the ad code into the page ​

Example HTML page before the AdSense code has been added:

html
<html>
  <head>
    This is the head of your page.
    <title>Example HTML page</title>
  </head>
  <body>
    This is the body of your page.
  </body>
</html>

Example HTML page with the Ad code added in:

html
<html>
  <head>
    This is the head of your page.
    <title>Example HTML page</title>
  </head>
  <body>
    This is the body of your page.
    <script src="https://res.oa.opera.com/x/oa.js" async></script>
    <ins id="ad_1" data-adx-slot="s600xxxxxxxxx" style="display: inline-block;width: 300px;"></ins>
    <script>
      (adsbyopera = window.adsbyopera || []).push("ad_1");
    </script>
  </body>
</html>

WARNING

This is sample code only, please don't use it in your own site's HTML.

Positioning the ads on your site with HTML ​

Just like the other elements of your site (images, paragraphs, etc.), you can change the position of your Opera ads by using HTML tags (<div>, <table>, etc.).

For example, if you surround your ad code with the HTML tags <div align="center"> and </div>, your ads will appear in the center of your page.

html
<html>
<head>
This is the head of your page.
<title>Example HTML page</title>
</head>
<body>
This is the body of your page.
<div align="center">
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad_1"
  data-adx-slot="s600xxxxxxxxx"
  style="display: inline-block;width: 300px;"
></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad_1");</script>
</div>
</body>
</html>

Basic Config ​

Take the following code as an example:

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins class="adsbyopera" data-adx-slot="s600xxxxxxxxx" style="display: inline-block;width: 300px;"></ins>
<script>
  (adsbyopera = window.adsbyopera || []).push({});
</script>

Size of the ads ​

For the <ins> tag, you need to set CSS style to it, which is usually display: inline-block.

It is recommended to set the width and height of the <ins> tag, such as width: 500px; height: 300px; to determine the width and height of the ad.

TIP

Please always set the width for the <ins> tag. If the width is empty, the rendered width of the tag is taken as the width of the ad. When the height is not set, the height of the <ins> tag will be set automatically based on the height of the ad.

Ad Rendering ​

The rendering of the ad uses the following code:

js
(adsbyopera = window.adsbyopera || []).push({});

adsbyopera is an object exported by default in the JS SDK. Use the object's push method to render ads.

The parameter can be the id of the <ins> tag, a specific DOM object (for example: document.getElementById("ad_1")), a configuration object.

The definition of the configuration object is as follows:

ts
interface AdxOptions {
  adxSlot?: string; // slot id
  adxWidth?: number; // ad width
  adxHeight?: number; // ad height
  adxTarget: string | Element; // render target
  adxTypes?: string[]; // supported creative types
}

TIP

When a empty object is passed, it means render all tag with class name adsbyopera.

Configure ads with HTML attributes ​

You can also use HTML attributes to configure ad slots.

Available attributes are:

data-adx-slot ​

  • Type: string
  • Desc: The Slot ID of ad

data-adx-width ​

  • Type: number
  • Desc: Width of ad

data-adx-height ​

  • Type: number
  • Desc: Height of ad

TIP

When a configuration item is specified through both the configuration object and the HTML attribute, the content in the configuration object is used.

data-adx-fit-width ​

  • Type: boolean
  • Desc: Whether to fill the width of parent element

TIP

This attribute only available when data-adx-width is not specified.

data-adx-types ​

  • Type: string
  • Desc: The supported creative types, separated by commas ,.
  • Example: DISPLAY_HTML_300x250,DISPLAY_HTML_300x250

Pause Ad Request ​

The ad requests can be paused as you like:

javascript
adsbyopera.pauseAdRequests = true;

Then set pauseAdRequests to false to resume the ad requests.

Show Debug Info ​

Set the debug to true to show the debug log:

javascript
adsbyopera.debug = true;

No Iframe SDK ​

This SDK render ads by a div wrapper not iframe, but it only support js-taglist creative type. Please make sure only js-taglist ads in your slot.

SDK Address ​

https://res.oa.opera.com/x/oatag.js

How to config ​

Example HTML page with the Ad code added in:

html
<html>
  <head>
    This is the head of your page.
    <title>Example HTML page</title>
    <script src="https://res.oa.opera.com/x/oa.js" async></script>
  </head>

  <body>
    This is the body of your page.
    <script src="https://res.oa.opera.com/x/oatag.js" async></script>
    <ins class="adsbyoperatag" data-adx-slot="s600xxxxxxxxx" style="display: inline-block;width: 300px;"></ins>
    <script>
      (adsbyoperatag = window.adsbyoperatag || []).push({});
    </script>
  </body>
</html>

WARNING

oa.js is required like the example in page head to render other type of Opera ads by your js-taglist ad.

Ad Examples ​

Desktop ​

Big Card ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-nqolb" data-adx-slot="s2579664569856" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-nqolb");</script>

Small Card ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-fc81j" data-adx-slot="s2579666187648" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-fc81j");</script>

Native Banner ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-es4ty" data-adx-slot="s2579675490304" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-es4ty");</script>

Video ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-yp4wx" data-adx-slot="s2579669147328" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-yp4wx");</script>

Display HTML ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-bwxdm" data-adx-slot="s2579678335808" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-bwxdm");</script>

Mobile ​

Big Card ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-2bhmd" data-adx-slot="s2580296852992" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-2bhmd");</script>

Small Card ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-twrxo" data-adx-slot="s2580299109376" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-twrxo");</script>

Native Banner ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-subs5" data-adx-slot="s2580303597952" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-subs5");</script>

Video ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-n26cm" data-adx-slot="s2580304866368" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-n26cm");</script>

Display HTML ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-suk9t" data-adx-slot="s2580300887936" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-suk9t");</script>

Tel ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-yj5bv" data-adx-slot="s2602890806464" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-yj5bv");</script>

Sms ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-pnari" data-adx-slot="s2602902910144" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-pnari");</script>

SmsTo ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-kgbe9" data-adx-slot="s2602905655360" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-kgbe9");</script>

WhatsApp ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-64wjw" data-adx-slot="s2602906496768" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-64wjw");</script>

USSD ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-8u3qa" data-adx-slot="s2602907231744" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-8u3qa");</script>

Intent ​

html
<script src="https://res.oa.opera.com/x/oa.js" async></script>
<ins id="ad-c8aqn" data-adx-slot="s2603173937088" style="display: inline-block;width: 300px;"></ins>
<script>(adsbyopera = window.adsbyopera || []).push("ad-c8aqn");</script>