Implementation of Automated Comparisons Libraries in Commerce

How do I implement an Automated Comparison?

The Automated Comparison depends on a customized JavaScript library that you implement directly within your content. For a more technical description on how to implement this into your content, check out our Developer Center guide. To get started, make sure that you're able to modify the code on your page. If you are unable to, you will not be able to implement this automated solution. 

Next, you will need to insert this updated JavaScript into your content. If you have previously installed any JavaScript from Sovrn for your Commerce integration, feel free to remove it and keep the below JavaScript instead.

<script type="text/javascript">     
  var vglnk = {         
    key: <api key>,         
    automatedLibrary: {             
      selector: '.card',             
      urlSelector: '.card-title a',             
      widgetPlacementSelector: '.widgetDisplay',             
      widgetSwap: 'inside',             
      geolocation: false,                             
      widgetType: 'price-comparison',             
      templateId: 'table1'         
    }     
  };     
  (function (d, t) {         
    var s = d.createElement(t);         
    s.type = 'text/javascript'; 
    s.async = true;         
    s.src = '//cdn.viglink.com/api/vglnk.js';        
    var r = d.getElementsByTagName(t)[0];         
    r.parentNode.insertBefore(s, r);     
  }(document, 'script')); 
</script>

Here's a breakdown of some of the important parameters you should keep in mind about where the widgets are placed (full breakdown of the parameters available here):

• urlSelector - identifies where on the page the link lives. Usually appears as an <a> tag in your code.

• widgetPlacementSelector - identifies where on the page the Price Comparison widget lives in the CSS.

• widgetSwap - optional parameter that identifies how the widget appears relative to the widgetPlacementSelector parameter.

Additionally, some of the parameters in the JavaScript snippet will modify the appearance of the widget in the page (full breakdown of the parameters available here):

• geolocation - modifies the results that appear on the widget based on the reader's location.

• resultsLimit - limits how many product options can appear for a given product link.

• excludedMerchants - tells the system what merchants you would like to avoid making widgets for.

• widgetType - specifies what type of widget you would like to appear (i.e. buttons, in-text, etc). 

• data-template - optional, but templatizes the appearance of your widgets. Click here to learn how to design a template for your widgets.

How do I create a template for my widgets to follow?

You can make a new template by going to the Price Comparison page in your platform or by clicking here. In the top right-hand corner, click the blue "+ Create price comparison" button to get started. 

You will be prompted to select a site and geography for your Price Comparison. Feel free to select which site you're building the template for - you can ignore the geography for the time being. 

Next, submit a test link to base your Price Comparison test off of. You're simply using the link to design your template, so it doesn't matter what product you select! Make sure you select a link to a merchant that Sovrn supports. Click on "Search" when you're ready to build your template.

To make your template, select the "Template layout" dropdown menu to get started. Click on the arrow in the dropdown menu and click "Create a new template" to get started. You will be prompted to name your template - enter a name under "Template name" and click "Save" when you are finished.

You should now see a "Customize" arrow appear at the bottom of the list of options in the left column under "Configure and preview." Click on "Customize" to edit the template. You can modify the template using the following settings:

• Font: the style that the text will appear in your Price Comparison

• Font color: the color that the text will appear as in your Price Comparison

• Font size: the size that the text will appear as in your Price Comparison

• Call to action text: the text that will appear in the buttons/links to your product

• Button font size: the size that the text will appear as in the buttons/links to your product

• Button font color: the color that the call to action text will appear as to your product

• Button background color: the color of button within your Price Comparison

Additionally, if you would like more customization, you can click "Edit CSS" to open up a code editor that allows you to manually code your template. Make sure to click "Save" in the code editor if you do modify any code!

Once you are satisfied with the appearance of your template, click on the "Save template" button at the bottom of the column on the left-hand side. Text should appear in the bottom right-hand corner of your screen stating "Your template has successfully been saved." when the template is finished.

If you ever need to modify your template in the future, select the template you'd like to modify under the "Template layout" dropdown menu and modify the appearance of your template to your liking. Click on the "Save template" button at the bottom of the column on the left-hand side. Text should appear in the bottom right-hand corner of your screen stating "Your template has successfully been saved." when the template is updated.

How do I implement a template layout into my Automated Comparisons?

The Automated Comparison relies on a data-template parameter to follow a specific template layout. You can find this parameter in the platform when you try to publish a one-off Price Comparison. 

Once you've created a Price Comparison in the Platform that utilizes your desired template, click on the "Get code" button at the bottom of the screen. In the popup that appears, under "Price comparison code", look for the data-template parameter. This should appear towards the end of the code snippet. 

This data-template parameter can then be appended to the data-template parameter in your JavaScript code. Note that whenever you need to implement a new template, you will need to change the data-template parameter. Modifications made to the existing template will not change the data-template parameter - only completely new templates will need updating!

Can I implement Automated Comparisons across different formats in my content?

If your site utilizes multiple formats for displaying content, you can utilize Automated Comparisons across these different mediums. Note that for each format of displaying content, you will need to implement a new form of the JavaScript on the page. At this time, you cannot use one JavaScript snippet for multiple formats. 

To implement this across multiple formats, simply repeat the above steps for each format needed. Make sure that the proper JavaScript library is being called to the page - if the JavaScript library is looking for a format different from what is listed in the snippet, it may cause the Automated Comparisons to load improperly or fail to load at all.

I still need help.

Feel free to reach out to our support team if you have any additional questions or concerns about getting started with your Automated Libraries.