Add Checkout (Order) Tracking | Asklo Help Center

Note: If you opt for 1-Click Integration with Shopify, you do not need to implement steps in this guide.

Use this guide if:

If you have manually integrated Asklo on your Shopify Store.
If you are on a non-Shopify (All other platforms).

⏳ Estimated Implementation Time: 60 Minutes

🌐 Implement On: Post Purchase/Thank You For Purchase Page

To ensure that checkout data is sent to Asklo, you need to implement a specific script on your thank you page or post-purchase page. This step is crucial for attributing conversions to Asklo.

Below is an example script that you need to add, along with explanations on how to populate the required details for each checked-out (purchased) item.

Script Example

<script>
  const session = localStorage.getItem("klevu-moi-session");
  const sessionData = session ? JSON.parse(session) : null;
  const payload = [
      {
          eventTimestampMs: Date.now(),
          event: "CHECKOUT",
          eventVersion: "1.0",
          userProfile: {
              sessionId: sessionData?.context?.sessionId,
              klevuUUID: sessionData?.context?.visitorId
          },
          items: {{replace with products array}}.map(item => ({
              orderId: {{replace with order Id}},
              orderLineId: {{replace with order line Id}},
              itemId: {{replace with Item Id}},
              itemName: {{replace with product name}},
              itemGroupId: {{replace with group Id}},
              itemVariantId: {{replace with variant Id}},
              unitPrice: {{replace with price of product}},
              currency: {{replace with currency}},
              units: {{replace with quantity}}
          }))
      }
  ];

  console.debug("Sending to API with payload: ", JSON.stringify(payload));

  fetch('https://pqa-analytics.service.ksearchnet.com/events/collect', {
      method: 'POST',
      headers: {
          'X-Widget-ID': "REPLACE_YOUR_WIDGET_ID",
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*'
      },
      body: JSON.stringify(payload),
      redirect: 'follow'
  }).then(response => console.debug('Success:', response))
    .catch(error => console.debug('Error:', error));
</script>

Populating the Script with Data

Replace the placeholders in the script with actual data from your checkout process. Here’s a breakdown of what needs to be replaced:

{{replace with products array}}: Replace this with an array of product objects that were purchased.
{{replace with order Id}}: Replace this with the unique order ID.
{{replace with order line Id}}: Replace this with the unique order line ID for each product.
{{replace with Item Id}}: Replace this with the unique item ID.
{{replace with product name}}: Replace this with the product name.
{{replace with group Id}}: Replace this with the product group ID.
{{replace with variant Id}}: Replace this with the product variant ID.
{{replace with price of product}}: Replace this with the price of the product.
{{replace with currency}}: Replace this with the currency code (e.g., USD).
{{replace with quantity}}: Replace this with the quantity purchased.

Example Implementation

Here’s an example of how you might populate the script:

<script>
  const session = localStorage.getItem("klevu-moi-session");
  const sessionData = session ? JSON.parse(session) : null;
  const products = [
      {
          orderId: "123456",
          orderLineId: "1",
          itemId: "SKU123",
          itemName: "Product Name",
          itemGroupId: "Group1",
          itemVariantId: "Variant1",
          unitPrice: 29.99,
          currency: "USD",
          units: 1
      },
      {
          orderId: "123456",
          orderLineId: "2",
          itemId: "SKU124",
          itemName: "Another Product",
          itemGroupId: "Group1",
          itemVariantId: "Variant2",
          unitPrice: 19.99,
          currency: "USD",
          units: 2
      }
  ];

  const payload = [
      {
          eventTimestampMs: Date.now(),
          event: "CHECKOUT",
          eventVersion: "1.0",
          userProfile: {
              sessionId: sessionData?.context?.sessionId,
              klevuUUID: sessionData?.context?.visitorId
          },
          items: products.map(item => ({
              orderId: item.orderId,
              orderLineId: item.orderLineId,
              itemId: item.itemId,
              itemName: item.itemName,
              itemGroupId: item.itemGroupId,
              itemVariantId: item.itemVariantId,
              unitPrice: item.unitPrice,
              currency: item.currency,
              units: item.units
          }))
      }
  ];

  console.debug("Sending to API with payload: ", JSON.stringify(payload));

  fetch('https://pqa-analytics.service.ksearchnet.com/events/collect', {
      method: 'POST',
      headers: {
          'X-Widget-ID': "REPLACE_YOUR_WIDGET_ID",
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*'
      },
      body: JSON.stringify(payload),
      redirect: 'follow'
  }).then(response => console.debug('Success:', response))
    .catch(error => console.debug('Error:', error));
</script>

Using Klevu Catalog