Sharing product information

Get the most out of your widget by sharing product information in DOM nodes

The default configuration of the widget is typically set up by the Videoly team: Our engineers create an account and scan your product page to allow the widget to work properly. 

We highly recommend adding product information to your site and sharing this information in invisible DOM nodes to make us absolutely confident that data is reliable, consistent and you're getting the most out of our matching process.  

This data includes, but is not limited to: 

  • Product title
  • Shop's internal product ID
  • GTIN
  • SKU
  • Brand 
  • Category tree.

(Read more about what information Videoly collects here.) 

Sharing product information has two main benefits:

  • Better coverage: when product information sections are identical and available on all product pages, we will be able to show as many videos as possible
  • Content consistency: Changes in titles won't cause the creation of new products
  • Nothing to worry about when making changes: if you decide to change your product page layout or migrate to a new online platform, the Videoly widget will require either minimum or no adjustments at all

How to set it up?

You'll need to add a few lines of code, the aforementioned invisible DOM nodes. These lines can be located anywhere in your HTML layout. 

You can add the following to your product page template and we'll immediately take this into use:

<div id="videoly-product-title" style="display:none;">Clean product title here without SEO things</div>
<div id="videoly-product-id" style="display:none;">12345678ABC</div> 
<div id="videoly-product-sku" style="display:none;">LEGO12345-AB23</div>
<div class="videoly-product-gtin" style="display:none;">5702016603842</div>
<div class="videoly-product-mpn" style="display:none;">21319</div>

Data provided in the placeholders is a primary source of product information for the widget. Previously configured selectors set up by our team will be overridden. 

When implementing the lines above, make sure the values of ID attributes remain the same on all product pages, while the content of the div element changes depending on the product page.

Collecting add-to-cart conversions

Videoly can measure the value of videos by collecting clicks on the add-to-cart button. Here, you can add the class name "videoly-atc-btn" to notify Videoly to monitor the button:

<div class="btn-addtocart btn-default videoly-atc-btn">Add to Cart</div>

Was this article helpful?