Setup

Getting Started

How to install script tags to render Recommends modules on a website.

Including script

Follow these steps to set up script tags on your website:

  1. Place the script tag, shown below, at the bottom of the page before the closing </body> tag. Script tags should not be placed in the <head> section.

Example

<script type="text/javascript">
      (window.readmo = window.readmo || []).push({
        section: '12345',
        container: '#readmo-12345'
  });

  !(function(d){
        var script = d.createElement("script");
        script.async = true;
        script.src = 'https://s.yimg.com/dy/ads/readmo.js';
        d.body.appendChild(script);
  })(document);
</script>
  1. Add the module placeholder element to the page:

<div id="readmo-12345"></div>

Embedded IFrames/Safeframe

If rendering must happen within an iframe (for example, for security purposes), the only change you’ll need to make is to remove the container property from the section configuration and add a global publisherUrl to the script tag.

The script will automatically create a container element inside the frame in which to render the recommendation unit.

The window.publisherUrl property is required when rendering in an iframe. This property must contain the top-level URL. If the publisher’s top URL is not provided, the Recommends request will fail.

Example

<script type="text/javascript">
            (window.readmo = window.readmo || []).push({
             section: '12345'
        });

        window.publisherUrl = "https://somedomain.com";

        !(function(d){
          var script = d.createElement("script");
          script.async = true;
          script.src = "https://s.yimg.com/dy/ads/readmo.js";
          d.body.appendChild(script);
        })(document);
      </script>

Defining placements

Recommends allows one or more modules per page, each defined by its own section configuration inside the global Recommends array. A section configuration has two required fields: section and container.

window.readmo.push({
  section: '12345',
      container: '#readmo-12345'
});

Section

The section code is a unique internal identifier of a website and the Recommends module being rendered.

Important

Section code is usually provided at the beginning of your relationship with Verizon Media. To request a section code, contact your account manager.

Container

The container property is a CSS selector that identifies the placeholder element on a webpage.

Properties

Property

Description

Type

Required

section

A string containing the section Id.

string

Yes

container

A string containing a valid CSS selector (for example: #mycontainer, .mycontainer).

string

Yes

title

A string containing the headline text to display about the module (for example, You May Like). Set an empty string to remove the heading title.

string

No

readMore

If true, the unit will render a Read More button and clip the parent article at the default 450 height. The height, button, speed, etc are all customizable.

boolean/object

No

sponsoredByLabel

A string that overrides the - Sponsored text.

string

No

callToActionLabel

A string that overrides the CTA text displayed after a video completes.

string

No

passbackHandler

A callback function fired when requests return an empty response.

function

No

errorHandler

A callback function fired when a Recommends request fails.

function

No

successHandler

A callback function fired after a successful Recommends request.

function

No

clickHandler

A callback function fired when a module item is clicked.

function

No

renderCompleteHandler

A callback function fired when the module finishes rendering.

function

No

params

A custom passthrough of key value pairs.

object

No

Example

Include the above configurable properties inside the section configuration.

window.readmo.push({
        section: '12345',
        container: '#readmo-12345',
        title: 'My custom title',
        errorHandler: function(){
          console.log('Oops! Request failed!');
        },
        passbackHandler: function(){
          console.log('Oh noes! No ads were returned!');
        }
      });

Rendering multiple placements per page

Steps:

  1. To render more than one module on a page, push each section config into the global Recommends array.

Example

<script type="text/javascript">
      (window.readmo = window.readmo || []).push({
        section: '12345',
        container: '#readmo-12345'
      },{
        section: '67890',
        container: '.readmo-67890'
      });

      !(function(d){
        var script = d.createElement("script");
        script.async = true;
        script.src = 'https://s.yimg.com/dy/ads/readmo.js';
        d.body.appendChild(script);
      })(document);
      </script>
  1. Add two placeholder elements to the page.

<div id="readmo-12345"></div>
    <div class="readmo-67890"></div>