You can easily integrate using an HTML/javascript tag for websites or a REST/JSON API call for server-side or mobile apps. To show dynamic content to users, website and mobile apps must make dynamic API calls each time a user views a page. These are done with either a REST/JSON API call or a HTML/javascript tag. For more information, see the Live Content API guide. 

  Note

You can use Blueshift's JavaScript library to track events in the browser. It is designed to be compatible in node and browser contexts, as well as cross platform build systems like Expo. You can import and integrate blueshift.js into your builds.

Integrating HTML and Popup slots

  Important

To integrate with HTML widgets you must include the blueshift.live() initialization call and set up the <div> tag to define where the HTML widget is to be dynamically inserted.

live_html_slot_integration.png

The division/section tag

Include the data-bsft-slot attribute in the <div> tag and assign the slot name as the attribute value.

The blueshift.live() call after initialization looks for all "div" elements with the "data-bsft-slot" attribute and makes a call to Blueshift servers for inserting dynamically recommended content in an iframe inside the div.

For example, the following <div> tag is defined for the slot “product_banner”.

<div data-bsft-slot='product_banner'></div>

Javascript call

Here is an example for calling blueshift.live() in the initialization Javascript. You can add this call on the event-tracking pixel you may have already included on the page.

The blueshift.live() call takes slot context as parameters including the slot name and attributes.

  • seed_item_ids: Array of catalog items the user is viewing or interacting with and is used as a basis for recommendation. This is useful for recommending content like: "users who saw this item, also bought these items".
  • exclude_item_ids: An array of catalog item IDs that should be excluded from recommendation results.
  • exclude_categories: An array of categories to exclude from recommendation results

For example:

<script type="text/javascript">
window._blueshiftid='5dfe3c9aee8b375bcc616079b08156d9';window.blueshift=window.blueshift||[];if(blueshift.constructor===Array){blueshift.load=function(){var d=function(a){return function(){blueshift.push([a].concat(Array.prototype.slice.call(arguments,0)))}},e=["identify","track","click","pageload","capture","retarget","live"];for(var f=0;f<e.length;f++)blueshift[e[f]]=d(e[f])};}
blueshift.load();
blueshift.live();
blueshift.pageload();
if(blueshift.constructor===Array){(function(){var b=document.createElement("script");b.type="text/javascript",b.async=!0,b.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.getblueshift.com/blueshift.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c);})()}
</script>

If you have multiple slots on the page you can customize the exclude_item_ids and seed_item_ids for each slot.

For example:

blueshift.live({
    product_banner: {
      exclude_item_ids: ["9780141325293"],
      seed_item_ids: ["9780141325293"],
      exclude_categories: ["Fiction > SciFi"]
    },
    product_category_bottom: {
      exclude_item_ids: ["9780141325293"],
      seed_item_ids: ["9780141325293"],
      exclude_categories: ["History > Unknown"]
    }
  });

Integrating JSON Slots

For JSON slots, call the required API to render the content in the slot.

live_json_slot_integration.png

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.