SMART Widget Anchor Specifications

How It Works

The Smart Widget Anchor is designed to allow you to manipulate where on the webpage you want the inLine to live. Upon page load it automatically scans the HTML and finds the largest body of text within the article.

Using different "positions" and "selectors" you will be able to customize the location of the unit.

If you are integrating through Rubicon you DO NOT need to URL encode this parameter. If you are integrating directly with Virool you MUST URL encode this parameter.
  • Rubicon Integration example: SMART/after/p:eq(2)
  • Direct Integration example: SMART%2Fafter%2Fp%3Aeq(2)
Param Example Details
SMART/global widget_anchor=SMART/global/div.content global is used when we cannot (or just don't want to) find main block, so the selector is used globally on the page.
SMART/after widget_anchor=SMART/after/p:eq(2) after finds main block and inserts after the selected paragraph
SMART/before widget_anchor=SMART/before/p:eq(2) before finds main block and inserts before the selected paragraph
SMART/top widget_anchor=SMART/top top middle and bottom are the simplest use cases. Note: You cannot add jQuery selectors to the end of these params.
SMART/middle widget_anchor=SMART/middle inserts @ middle of editorial content (see "Additional Settings for more features)
SMART/bottom widget_anchor=SMART/bottom inserts @ bottom of editorial content

Additional Notes:

You can adjust the middle selector by using +"X" as an additional selector.
1. SMART/middle/+2 which just means "relative to the SMART/middle location, select 2 paragraphs after that"
1. SMART/middle/-2 "relative to the SMART/middle location select 2 paragraphs before that.

before and after do allow additional selectors.

  1. SMART/before/p:eq(2)
  2. SMART/after/.main>span>a
  3. SMART/after/div>div>.news>img

top bottom does not allow additional selectors.

  1. SMART/top
  2. SMART/bottom

global is used when we cannot (or just don't want to) find main block, so the selector is used globally on the page.

  1. SMART/global/div.content
  2. SMART/global/article>.brew

Smart anchor workflow

  1. Begin widget_anchor parameter with SMART to enable the smart algorithm.

  2. Split widget_anchor value by "/" to get position and selector (e.g. "SMART/after/h1" splits into "SMART" keyword, "after" position and "h1" selector. Selector is optional). For more on jQuery Selectors, click here.

Additional Settings:

Param Example Details
smart_word_count smart_word_count: 500, smart_word_count counts the number of words on the page. If # of words > 500, then inject inLine unit. If # of words < 500, then do NOT inject.
smart_count_node smart_count_node: '.main-article', smart_count_nodecontrols the scope of the word counting. In this case, the SMART algorithm will count only the words within the
smart_char_count smart_word_count: 1000, counts the number of characters on the page. If # of characters > 1000, then inject inLine unit. If # of words < 1000, then do NOT inject.
smart_highlight smart_highlight: true, will highlight which
the SMART anchor is selecting. (Great debugging tool)
smart_middle +"X" SMART/middle/+2, "relative to the SMART/middle location, select 2 paragraphs after it"
smart_word_inject SMART/word/450 "insert inLine after 450 words"

Direct Integrations

<script type="text/javascript" id="virool-inline-embed">
(function(d, s, src) {
  var
    vs = document.createElement("script"),
    s = d.getElementById("virool-inline-embed");
  vs.type = "text/javascript";
  vs.async = true;
  vs.src = src;

  setTimeout(function(){
    s.parentNode.insertBefore(vs, s);
  }, 5);
})(document, "script", "https://api.virool.com/widgets/XXXXXXX?ap=1&width=646&height=377&format=intext&list_id=396&preview=1&widget_anchor=SMART%2Ftop");
</script> 

Rubicon Integrations

    <script type="text/javascript">
      window.viroolParams = {
        widget_anchor: "SMART/middle/+2",
        smart_count_node: ".main-article",
        smart_char_count: 1000,
        smart_word_count: 500,
        smart_highlight: true,
        width: 339,
        height: 282,
        key: "XXXXXXXXXX",
        ap: 1};
    </script>
    <script type="text/javascript" src="http://ssp.virool.com/rubicon/player.js"></script>