Introduction Last updated: 2023-06-01

Hello and welcome to the Rediads Developer Documentation. We're thrilled that you're interested in integrating Rediads' advertising solutions into your websites, mobile web interfaces, and AMP pages. This comprehensive guide is designed to walk you through the implementation process, ensuring a smooth and effective deployment of our ad products on your platforms.

Who is this Documentation For?

This documentation is tailored for developers, publishers, and any technical stakeholder interested in monetizing their web assets through Rediads’ robust advertising network. Whether you're an independent developer or part of a larger team, you'll find the resources you need to make implementation as seamless as possible.

Why Choose Rediads?

Rediads is a premier ads agency, specializing in delivering high-quality, targeted advertisements with superior optimization capabilities. Our advanced machine learning algorithms ensure that you get the most out of your ad spaces, enhancing both user engagement and your revenue streams.

Let's get started!

Installation

Google Ad Manager Ads

Ideal for publishers who are looking for straightforward ad delivery solutions via Google Ad Manager. With special addition like responsive , lazyload , viewable refresh built in.

Google Ad Manager + APS Ads

Integrate Amazon Publisher Services (APS) with Google Ad Manager to unlock additional revenue streams and demand sources.

Google Ad Manager + APS + Prebid

A robust setup that combines Google Ad Manager, Amazon Publisher Services, and Prebid for advanced ad auctions and optimal fill rates.

Google Ad Manager + Prebid

Utilize Prebid alongside Google Ad Manager for an enhanced header bidding experience, maximizing revenue through real-time competition for ad inventory.

Web/Mweb

Next up on our journey through Rediads' developer guide is the Web/Mobile Web (MWeb) Body Tags section. If you've successfully navigated through the Installation section, you're now ready to take the crucial next step: embedding the ad codes into the body tags of your web and mobile web pages. This section is crucial for publishers looking to seamlessly integrate our various ad configurations into traditional desktop websites as well as mobile-optimized sites. Whether you're focused on content delivery for large screen displays or want to ensure optimal ad performance on mobile devices, this section has got you covered.

  • Code Placement: Where exactly to insert the ad code in your HTML for maximum visibility and performance.
  • Code Customization: How to tailor ad codes for specific web or mobile web page layouts.
  • Attribute Definitions: Understanding the different attributes and parameters that can be adjusted in your body tags.
  • Testing & Validation: How to make sure the ads are being displayed as intended once the code is in place.

By the end of this section, you'll not only be able to implement Rediads' ad solutions effectively but also customize them to fit the specific requirements of your Web and MWeb platforms.

Attribute Definitions

Data-Attribute Required/Optional Type Example
data-adslot Required String "/21742552194/NueGamers/MTF_8"
data-size-desktop Required String of Array "[[728,90],[970,250]]"
data-size-mobile Required String of Array "[[320,50],[300,250]]"
data-ad-refresh Optional String of Array "true"/"false"
data-ad-lazyloading Optional String "true"/"false"
data-viewport-away Optional String "1","2","3","4","5"

Default Values

If you don't specify any of the above attributes, the following default values will be applied:

Data-Attribute Default State Value
data-ad-refresh "false" 30 sec
data-ad-lazyloading "false" N/A
data-viewport-away "1" N/A

Code Placement

The Ad will exactly appear where you will insert the ad code in your HTML.

Example Code for Web/MWeb Integration


  <div
  data-adslot="/21742552194/NueGamers/Leaderboard"
  data-size-desktop="[[728,90],[970,250]]"
  data-size-mobile="[[320,50],[300,250]]"
  data-ad-refresh="true"
  data-ad-lazyloading="true"
  data-viewport-away="1">
  </div>

Testing & Validation

Before you roll out your Rediads ad configurations to a live audience, it's imperative to rigorously test and validate each setup to ensure everything is functioning as expected. Testing allows you to catch any potential issues early on, saving you time and effort down the line.

Using a Testing Environment

We highly recommend testing your ad code in a controlled environment separate from your live website. By doing so, you can isolate variables and easily diagnose any issues that might arise.

Test Values

To facilitate easy and accurate testing, you can use the following values in your testing environment to check the ad response:

Data-Attribute Example
data-adslot "/21742552194/NueGamers/MTF_8"
data-size-desktop "[[728,90],[970,250]]"
data-size-mobile "[[320,50],[300,250]]"
data-ad-refresh "true"/"false"
data-ad-lazyloading "true"/"false"
data-viewport-away "1"

AMP

Welcome to the AMP Integration section of Rediads' developer guide! As the mobile web continues to evolve, Accelerated Mobile Pages (AMP) have emerged as a crucial technology for publishers aiming to deliver fast, efficient, and reliable content to their mobile audience. Integrating Rediads' ad solutions with AMP can significantly boost your monetization efforts while maintaining an excellent user experience. This section will guide you through the essential steps for successfully implementing Rediads' ad configurations within AMP environments. You'll gain insights on:

  • AMP-Specific Tags: How to use specialized tags that are compliant with AMP standards.
  • Ad Performance: Techniques to ensure that your ads load quickly and efficiently within the AMP framework.
  • Customization & Styling: How to tailor your ad codes to fit seamlessly within the AMP layout.
  • Troubleshooting & Best Practices: Useful tips and common pitfalls to avoid when integrating ads in AMP.

By the end of this section, you'll be well-equipped to leverage AMP's fast-loading pages alongside Rediads' monetization solutions, offering a winning combination for both user engagement and revenue generation.

AMP Specific Header Bidding

Head Code


  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

AMP HeaderBidding is based on RTC Config

The design of RTC is per-slot, with a maximum of 5 parallel callouts allowed per slot. RTC is usable by any Fast Fetch network implementation. Call-outs for all slots will be sent as soon as possible. There are two different types of callouts that will be supported:

RTC supports call-outs to third-party vendors. For example, take VendorFooBar which provides an API service that returns similar interests when provided a given interest (i.e. "baseball" yields ["sports", "apple-pie"]). If VendorFooBar wants publishers to be able to use them for RTC call outs, they simply add their call-out url with built-in macros to the AMP RTC vendor registry. Then publishers specify that they want to call out to VendorFooBar, and supply the value to substitute into the macro. This gives the Vendor complete control over the actual URL, with the Publisher only needing to supply the relevant inputs.

Example 1: RTC specification on an amp-ad


  <amp-ad
    width="320"
    height="50"
    type="network-foo"
    data-slot="/1234/5678"
    rtc-config='{
              "vendors": {
                "vendorA": {"SLOT_ID": "1"},
                "vendorB": {"PAGE_ID": "2"},
                "vendorC": {"SLOT_W": "320", "SLOT_H": "50"}
                },
              "urls": [
                "https://www.AmpPublisher.biz/targetingA",
                "https://www.AmpPublisher.biz/targetingB"
              ],
              "timeoutMillis": 750}'
  >
  </amp-ad>

For Amazon


<amp-ad
  width="320"
  height="50"
  type="doubleclick"
  data-slot="/1234/5678"
  data-enable-refresh="30"
  rtc-config='{
    "vendors": {
      "aps": {"PUB_ID": "600", "PUB_UUID": 'enter you UAM publisher ID', "PARAMS":{"amp":"1"}}
    },
    "timeoutMillis": 1000
  }'>
</amp-ad>

Currently Supported Vendors

  • Admax
  • Adpushup
  • AppNexus PSP
  • APS
  • Automatad
  • Andbeyond
  • Browsi
  • Criteo
  • Denakop
  • FLUX
  • Freestar
  • Future Plc
  • Galaxie Media
  • Highfivve
  • Hubvisor
  • Improve Digital
  • IndexExchange
  • Kargo
  • Lotame
  • Media.net
  • Mediasquare
  • Navegg
  • NewsPassID
  • Nexx360.io
  • OpenX
  • PubMatic OpenWrap
  • PubWise
  • Purch
  • RichAudience
  • Rubicon
  • Salesforce
  • Snigel
  • Sonobi
  • T13
  • Tail
  • The Ozone Project
  • Yieldbot
  • Yieldlab

Special Formats

In the ever-evolving landscape of digital advertising, staying ahead means embracing a myriad of formats to capture user attention effectively. Our special formats section delves into the nuances of implementing non-standard ad formats that go beyond the traditional banner and interstitial designs.

Main CSS URL


<link rel="stylesheet" href="https://cdn.rediads.com/css/style.min.css">

Parallax

Parallax ads leverage the parallax scrolling effect to create an immersive and engaging advertising experience for users. As a user scrolls through content, the ad's background and foreground elements move at different speeds, creating a sense of depth and movement. This interactive nature of parallax ads not only captures attention but also encourages user engagement.


<div style="height:340px; text-align: center;" class="parallax_container">
    <div class="parallax_container_one">
        <div class="parallax_container_two" style="top: 20px;">
            <div
                    data-adslot="/path/to/your/slot"
                    data-size-desktop="[[320,480]]"
                    data-size-mobile="[[320,480]]"
                    data-ad-refresh="true"
            >
            </div>
        </div>
    </div>
</div>

Bottom Sticky

Bottom sticky ads are a type of display advertising that remains fixed to the bottom of the user's screen as they scroll through a website. These ads are "sticky" in that they stay visible and in the same position regardless of the user's interaction with the web page. This feature ensures constant visibility, making them highly effective for garnering user attention and increasing click-through rates.


<div class="Rediads_BottomSticky">
    <div data-adslot="/path/to/your/slot" data-size-desktop="[[728,90]]"
         data-size-mobile="[[320,50]]" data-ad-refresh=false></div>
</div>

Scroll Sticky

Scroll Sticky ads are a dynamic form of online advertising that initially appear in a designated location within a web page. As the user scrolls down, these ads move up with the content. Once the user scrolls past the original placement of the ad, it becomes "sticky" and remains fixed at the top of the viewport, ensuring continuous visibility.


<div id="rediads-scroll-container">

    <div
            data-adslot="/path/to/your/slot"
            data-size-desktop="[[728,90]]"
            data-size-mobile="[[320,50]]"
            data-ad-refresh=false
    >

    </div>
    <button class="rediads-scroll-close-button">x</button>
</div>

In-Page Scroll Sticky

For instance, you may have a Scroll Sticky ad at the top of an article; as the user scrolls down to read, the ad remains fixed at the top of the viewport, continuously displaying the advertisement. This is a popular advertising format due to its visibility and potential to drive clicks.


<div class="paisa-banner">
    <div data-adslot="/path/to/your/slot" data-size-desktop="[[728,90]]"
         data-size-mobile="[[300,250]]" data-ad-refresh=false></div>
</div>

Flying Carpet

The AMP Flying Carpet is a specialized ad format provided by the Accelerated Mobile Pages (AMP) framework. The "flying carpet" is a visually engaging ad format that provides a scroll-bound experience, similar to a parallax effect. This means that as users scroll down a webpage, the ad appears to "fly in" and fills the viewport for a short period before the user continues to scroll past it.


<script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>
<amp-fx-flying-carpet height="200px">
  <amp-ad
    width="300"
    height="250"
    type="network-foo"
    data-slot="/1234/5678">
  </amp-ad>
</amp-fx-flying-carpet>

FAQs

Section intro goes here. You can list all your FAQs using the format below.

Installation (FAQ Category One)

What types of code are hosted by RediAds for ad installations?

RediAds provides 4 types of codes for ad installation: Google Ad Manager Ads, Google Ad Manager + APS Ads, Google Ad Manager + APS + Prebid, and Google Ad Manager + Prebid.

Web/Mobile Web Integration (FAQ Category Two)

How do I add ad codes in the body tags for Web/Mobile Web?

For integrating ad tags in the body, specific data-* attributes should be included in a <div> element to define ad properties like ad slots, size, and refresh settings.

Testing & Validation (FAQ Category Three)

How do I test and validate the ad codes?

You can use certain values in a testing environment to validate the ads' responses.

AMP Integration (FAQ Category Four)

Is AMP supported and how do I set up AMP ads?

Yes, AMP is supported. You can use tags like <amp-ad> to implement AMP ads, and RTC configuration can be used for adding vendors and timeouts.

How do I add an RTC config for Pubmatic and Amazon with a 1000ms timeout in AMP?

You can use the rtc-config attribute inside the <amp-ad> tag to specify this information.

Special Formats (FAQ Category Five)

What are the special formats supported?

Special ad formats include parallax ads, bottom sticky ads, and scroll sticky ads that enhance user engagement.

Do I need a head tag for AMP flying carpet ads?

Yes, you will need to include a specific <script> tag in the head of your HTML document to enable AMP flying carpet functionality.

Styling (FAQ Category Six)

How do I include my main CSS file?

Use a <link rel="stylesheet" href="path/to/your/main.css"> tag in the head of your HTML document to include your main CSS file.

Miscellaneous (FAQ Category Seven)

Can we add a copy button in Highlight.js?

Yes, a copy button can be added, though it would require additional JavaScript to handle the copy-to-clipboard functionality.

What is a Parallax ad?

A parallax ad creates an illusion of depth by making the background image move slower than the foreground content as users scroll down the webpage.

What is a Scroll Sticky ad?

Scroll Sticky ads will stick to the top of the viewport when a user scrolls past them, ensuring the ad remains visible as the user continues to scroll down the webpage.

What is a Bottom Sticky ad?

A Bottom Sticky ad remains fixed at the bottom of the webpage regardless of scrolling, ensuring continuous visibility.