Embedded Product Reviews (Deprecated)

📘

This documentation covers our pre August 2020 implementation. We strongly recommend upgrading to our latest JavaScript implementation to take advantage of performance improvements and additional features. Our migration guide can be found here.

With embedded reviews, the important thing is that we can track when the user actively takes action to read the reviews.

If the user needs to click on a product review badge to reach the reviews, that’s enough as the “click” event triggered by clicking the reviews product badge will give us the information we need.

If the reviews are just embedded in the page and the user can access them without having to click on a badge, then it is more difficult to track this action.

We describe below the different scenarios and how to make sure we can track the user has read the reviews associated to a product.

📘

Remember - If you use the standard Reevoo widgets, the tracking associated to Embedded Product Reviews is set up automatically. If you implement your own Embedded Product Reviews using our API, you need to trigger the tracking events manually by following the instructions below.

In all cases make sure you include in your page the Reevoo Javascript library where the embedded reviews are displayed.

Scenario 1 - Clicking on the product reviews badge

If the only way to get to the reviews is by clicking on a product reviews badge then this is the most straightforward as the user needs to click the badge to get to the reviews. In this case as long as you’ve added the relevant onclick event to your badge, as explained in the first section of this document, then the required tracking information will be collected

Scenario 2 - Clicking on a tabbed component tab

In this case, the user can get to the reviews just by clicking the reviews tab, so we need to trigger the event on the tab onclick. You can do this as in the snippet below:

<div 
  onclick="reevooMark(
    'trackBadgeClick', 
    'TRKREF', 
    { 
      contentType: 'reviewable', 
      reviewableContext: { sku: 'SKU' } 
    }
  );"
>
  PRODUCT REVIEWS TAB
  <script>
    if (typeof window.afterReevooMarkLoaded === 'undefined') { 
      window.afterReevooMarkLoaded = []; 
    }
    afterReevooMarkLoaded.push(function() { 
      reevooMark(
        'trackBadgeDisplay', 
        'TRKREF', 
        { 
          contentType: 'reviewable', 
          reviewableContext: { sku: 'SKU' }
        }
      ); 
    });
  </script>
</div>

Note how on the snippet above we include both the ‘trackBadgeDisplay’ and ‘trackBadgeClick’ event. The “tab” in this case takes the place of a badge. So the ‘trackBadgeDisplay’ event lets us know that reviews are available to read on the page. The ‘trackBadgeClick’ event lets us know that the user took action to read the reviews.

Automotive example

If your products are identified by model and manufacturer instead of sku, you can use the snippet below instead:

<div 
  onclick="reevooMark(
    'trackBadgeClick', 
    'TRKREF', 
    { 
      contentType: 'reviewable', 
      reviewableContext: { 
        manufacturer: 'MAKE', 
        model: 'MODEL' 
      } 
    }
  );"
>
  PRODUCT REVIEWS TAB
  <script>
    if (typeof window.afterReevooMarkLoaded === 'undefined') { 
      window.afterReevooMarkLoaded = []; 
    }
    afterReevooMarkLoaded.push(function() { 
      reevooMark(
        'trackBadgeDisplay', 
        'TRKREF', 
        { 
          contentType: 'reviewable', 
          reviewableContext: { 
            manufacturer: 'MAKE', 
            model: 'MODEL' 
          }
        }
      ); 
    });
  </script>
</div>

In all cases, make sure you replace TRKREF, SKU, MAKE and MODEL by the appropriate values associated to your organisation and product.

Scenario 3 - Directly accessible reviews

This is the most complicated use case to get right. The reviews are available and visible in your page from the moment the page loads. The user does not need to take any action to read the reviews, in most cases they just need to scroll down to the section of the page where the reviews are visible.

In this case we recommend the following:

Step 1

You should include the following snippet somewhere in your page. This snippet will trigger the “rendered” event, which lets Reevoo know there are reviews available in the page.

<script>
  if (typeof window.afterReevooMarkLoaded === 'undefined') { 
    window.afterReevooMarkLoaded = []; 
  }
  afterReevooMarkLoaded.push(function() { 
    reevooMark(
      'trackBadgeDisplay', 
      'TRKREF', 
      { 
        contentType: 'reviewable', 
        reviewableContext: { sku: 'SKU' }
      }
    ); 
  });
</script>

In case your products are identified by “Manufacturer” and “Model”, use the following snippet instead.

<script>
  if (typeof window.afterReevooMarkLoaded === 'undefined') { 
    window.afterReevooMarkLoaded = []; 
  }
  afterReevooMarkLoaded.push(function() { 
    reevooMark(
      'trackBadgeDisplay', 
      'TRKREF', 
      { 
        contentType: 'reviewable', 
        reviewableContext: { 
          manufacturer: 'MAKE', 
          model: 'MODEL'  
        }
      }
    ); 
  });
</script>

Make sure you replace TRKREF, SKU, MAKE and MODEL in the snippets above by the appropriate values associated to your organisation and product.

Step 2

Then, you also need to let us know when the user has read reviews. For that you need to trigger a “click” event in that scenario. To trigger a click event you will need to implement more complex logic where you track when the user scrolls to the area of the page where the reviews are visible. Then you need to track the time the user spends in that area of the page. When the user has been in the reviews section for more than ten seconds you should trigger the “click” event using the following javascript call:

onclick="reevooMark(
  'trackBadgeClick', 
  'TRKREF', 
  { 
    contentType: 'reviewable', 
    reviewableContext: { sku: 'SKU' } 
  }
);"

Step 2- Automotive example

In case your products are identified by “Manufacturer” and “Model”, use the following snippet instead.

onclick="reevooMark(
  'trackBadgeClick', 
  'TRKREF', 
  { 
    contentType: 'reviewable', 
    reviewableContext: {
      manufacturer: 'MAKE', 
      model: 'MODEL'
    } 
  }
);"

Again make sure you replace TRKREF, SKU, MAKE and MODEL in the snippets above by the appropriate values associated to your organisation and product.