Call Conversion Script Function

info

The are two common ways to implement our conversion script:

1. Send order information directly after the site has loaded. For example on a "Thank you for your order" page.
2. Send order information after some event has been triggered, e. g. the payment confirmation of some payment service.

We describe both integration methods below.

Send ordered products on page load

The product objects below adhere to the specified payload format mentioned on the Conversion script function page.

This code will be inside your normal JavaScript environment.

<script>
  const sendBoughtProducts = async (products) => {
    const bikes = products.filter(product => product.productType === 'bike');
    for (const bike of bikes) {
      await oz.conversion.sendPurchaseInformation(bike);
    }
  };
</script>

Place this script on your conversion page (e.g. thank you page)

<script
  type="module" 
  src="https://widget3.smartfit.online/?apiKey={{ ADD YOUR API KEY }}"
  onload="sendBoughtProducts({{ YOUR PRODUCTS }})"
></script>

Send bought products after some event

First make sure the loader script is loaded on your website.

<script type="module" src="https://widget3.smartfit.online/?apiKey={{ ADD YOUR API KEY }}"></script>

This code will be inside your normal JavaScript environment.

<script>
  // This is a placeholder for some payment service or similar
  // which triggers the event to send the bought products
  paymentService.addEventListener('paymentConfirmed', async () => {
    const bikes = products.filter(product => product.productType === 'bike');
    for (const bike of bikes) {
      await oz.conversion.sendPurchaseInformation(bike);
    }
  });
</script>

Integration in Google Tag Manager

Due to multiple limitations in the language features of Google Tag Manager (or GTM in short) multiple adjustments to the above examples are required. Generally you need to create a "Custom HTML" tag and copy the following into it:

<script>
    function sendBoughtProducts() {
        var ecommerce = {{SmartFit Ecommerce}}; // This is a variable from your GTM environment
        // We assume the following structure:
        /* var ecommerce = {
            currency: 'EUR',
            items: [
                {
                    price: 1234.56,
                    quantity: 1,
                    size: '45 cm',
                    name: 'Axess SCREE 2023',
                    code: '123456789',
                    productType: 'bike'
                },
                {...}
            ]
        }; */
        var bikes = ecommerce.items
            .filter(function(item) { return item.productType === 'bike' }) // We only want to send bikes
            .map(function(item) {
                return {
                    currency: ecommerce.currency,
                    productCode: item.code,
                    price: item.price,
                    quantity: item.quantity,
                    purchasedSize: item.size,
                    productType: 'bike',
                    productTitle: item.name
                }
            });

        // No we send the information for each bike
        bikes.map(function(bike) {
            return oz.conversion.sendPurchaseInformation(bike);
        });
      }

    // We need the following code to load our conversion script on your site.
    // (A simple script tag with an onload event does not work in GTM unfortunately)
    var script = document.createElement('script');
    script.type = 'module';
    script.addEventListener('load', function(event) {
        sendBoughtProducts();
    });
    script.src="https://widget3.smartfit.online/?apiKey={{ ADD YOUR API KEY }}";
    document.getElementsByTagName('head')[0].appendChild(script);
</script>