Add conversion script

The are two common ways to implement our conversion script:

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

We describe both integration methods below.

Send bought products on page load

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

This code will be inside your normal JavaScript environment.

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

This will include our conversion script to your website.

<script
  src="https://widgets.onlinesizing.bike/conversion.js"
  onload="sendBoughtProducts(products)"
></script>

Send bought products after some event

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 () => {
    await smartfit.conversion.initialize({ apiKey: 'YOUR_API_KEY_HERE' });
    const bikes = products.filter(product => product.productType === 'bike');
    for (const bike of bikes) {
      await smartfit.conversion.sendPurchaseInformation(bike);
    }
  });
</script>

This will include our conversion script to your website.

<script src="https://widgets.onlinesizing.bike/conversion.js"></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 SmartfitApiKey = '<API_KEY_HERE>'; // <= Enter your OZ API key here

            smartfit.conversion.initialize({ apiKey: SmartfitApiKey }).then(function() {

              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
              Promise.all(bikes.map(function(bike) {
                  return smartfit.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 = 'text/javascript';
    script.addEventListener('load', function(event) {
        sendBoughtProducts();
    });
    script.src = 'https://widgets.onlinesizing.bike/conversion.js';
    document.getElementsByTagName('head')[0].appendChild(script);
</script>