Page Comparison

Overview

This page contains a guide to integrate Add to Cart on product page.

...

Note: We used to have a separate library to perform this task (EmpathyTAG), but it made the integration process more complex, so we decided to include this behavior into this Overlay version.

Anchor
1.1 1.1

Add to Cart on Product Page for versions 1.1, 1.2 and 1.3

Note: Add to Cart used to be named Conversion in the Overlay, so most documentation for older versions will still be referencing this name.

The workflow is:

1. Run the Overlay
2. When a click is done in the Overlay, it adds the needed information to the local storage, and a hash to the url to know that there is something in the local storage that must be read.
3. When the product page is loaded, a piece of code that reads this information is executed. This snippet also adds onClick event to the Add to Cart button. This event executes a function that does two different things:
   1. EmpathyBroker Tracking: It sends information to Empathy BrokerEmpathyBroker, so this conversion will be available from EmpathyBroker statistics.
   2. TrackConversionCallback: When the EmpathyBroker Tracking is executed, it executes another callback with custom code that lets you add the Google Analytics Tracking.

Overlay Initialization

If you have the Overlay initialization piece of code, you have to modify it to tell it that it has to execute product page tracking steps, using the parameter "conversionOnProduct":

<script>
  function clickCallback(data) {
    // GA Code
  }

  function searchCallback(data) {
    // GA Code
  }

  EmpathyOverlay.config('YOUR_EB_SEARCH_URL', {
    lang: 'en',
    displayLang: 'en',
    scope: 'default',
    defaultCurrency: 'EUR',
    customTrackSearch: searchCallback,
    customTrackClick: clickCallback,
    conversionOnProduct: true
  }, document.getElementById('eb-root'));
</script>

...

The available fields in "data" are:

For more data contact us.

...

The available fields in "overlayProduct" are:

For more data contact us.

...