If you are using the Javascript integration, there are two ways to provide us with metadata to scrape, in addition to the use of Open Graph data.

Custom JSON Object

Our Javascript will automatically look for a JSON object marked with id="liftigniter-metadata" and collect all parameters and values found in that object. This allows you to inject the page with additional information for LiftIgniter that won't interfere with any SEO or other metadata. The script id must be "liftigniter-metadata" and the script type must be "application/json". The fields are specified in JSON format. Each field could be a string, a number, or an array of strings. We do not support other data formats.

One common customer issue is that the og:title value includes both the page title and the site name for social media sharing, but when showing recommendations internally you don’t want to show the site name as well. Including a title field within the JSON object will override any Open Graph tags with the same parameter name.

<script id="liftigniter-metadata" type="application/json">
{
    "reviewCount": 158,
    "rating" : 4.2,
    "title": "A Beautiful Sea"
    "tags": ["beach", "ocean", "sea"]
}
</script>

Notes on Arrays

In the Open graph protocol, to specify an array, you specify each field separately. For instance, suppose an article has tags women, feminism, and politics. The tags would be specified using the Open Graph protocol as follows:

<meta property="article:tag" content="women"/>
<meta property="article:tag" content="feminism"/>
<meta property="article:tag" content="politics"/>

The Open Graph protocol parses the page and picks up all three tags "women", "feminism", and "politics", forming an array from them. LiftIgniter does the same. However, values specified inside the LiftIgniter JSON object take precedence over the values outside.

Note that when using the LiftIgniter JSON object it’s important that you use the correct format for array of strings, rather than just a single comma-separated value string.

"tag" : "men,women" // This is interpreted as a single tag with value "men,women" rather than as two tags.
"tag" : ["men", "women"] // This is interpreted as an array of two tags, as was the likely original intention

Further, if you specify an empty array in the LiftIgniter JSON object, that will also overwrite the array as defined by OG tags outside.

Scraping the DOM

Instead of using an OG tag or liftigniter-metadata tag, you can tell our script to scrape information from anywhere in the DOM that you can pick with a selector, or a JavaScript variable that's accessible through the global context (window).

For example, let's say that there's a HTML tag on a page that looks like:

<div id="item"> Delicious Pasta </div>
<a href="www.cooking123.com">Author's blog</a>
<a rel="author" href="/italian/Chef-James/">Chef James</a>

On each page you would like to scrape the title of the blog, and the author's name. This can be done using a custom configuration when initializing the Javascript.

For each field you want to scrape, you'll need to identify:

• the name: this will be the name of the field in the LiftIgniter inventory ("title", "author", "url", etc).
• the selector: this specifies what part of the page to scrape. Unique CSS IDs tend to work best if you are looking for a single value. If multiple elements on the page share a single .class or #id, multiple values may be returned. This can be handled via transform functions.
• the type: indicates the type of feature to be scraped. We support "text", "attribute", "url", and "var".
• the attribute: If the type is listed as attribute, use this to specify what part of the attribute to scrape for the value (e.g. the src of an image)
• the transformation (optional): this is only used if you want to modify the selected value in some way, and accepts Javascript functions.

var customConfig = {
  config: {
    inventory : {
      features: [
        {
          name: "title",
          selector: "div[id=item]",
          type: "text",
          transform: function(value) {
            return value.trim();
          }
        },
        {
          name: "authorBlog",
          selector: "a[rel=author]",
          type: "attribute",
          attribute: "href"
        }
      ]
    }
  }
}

$p("init","{JS_KEY}", customConfig);

To scrape a variable from the current page window, you can define it in the following way: 

// Take the value of window.metadata.pageUrl
var customConfig = {
  config: {
    inventory: {
      features: [
        {
          name: "url",
          type: "var",
          variable: "metadata.pageUrl" // scrapes window.metadata.pageUrl
        }
      ]
    }
  }
}

$p("init","{JS_KEY}", customConfig);