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:

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>

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 Yahoo Ad Tech. 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:

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>

Add two placeholder elements to the page.

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