Purchase Confirmation Pixel

The purchase confirmation pixel allows you to track and analyze customer purchases within your ecommerce website. By integrating this pixel onto your checkout screen, you can gather valuable data and insights on how Alby performs with your website. Follow the steps below to add the purchase confirmation pixel and pass the necessary variables.

Prerequisites

Before proceeding with the installation, make sure you have the following information ready:

1. Your Brand ID (brand_id): This unique identifier connects your website to Alby. You can obtain this ID from your Alby contact.

JavaScript

Inserting the Purchase Confirmation Pixel with JavaScript

To add the purchase confirmation pixel using JavaScript, follow these instructions:

1. Open your website's source code.
2. Locate the checkout screen code or the specific section where the purchase confirmation pixel should be placed.
3. Add the following code inside it:

<script>
  var _ALBY_ORDER_INFO = {
    brand_id: "PLACE_BRAND_ID_HERE",
    order_id: "PLACE_ORDER_ID_HERE",
    order_total: "PLACE_ORDER_TOTAL_HERE",
    product_ids: ["PRODUCT IDS HERE"],
    currency: "PLACE_CURRENCY_HERE",
  };

  var url =
      "https://tr.alby.com/p?" +
      (function (i) {
        if (i instanceof Object) {
          var s = [];
          for (var o in i)
            if (i[o]) {
              var r = i[o],
                e = encodeURIComponent(o) + "=" + encodeURIComponent(r);
              s.push(e);
            }
          return s.join("&");
        }
        return "";
      })(_ALBY_ORDER_INFO),
    cookies = document.cookie.split(";"),
    sessionCookie = cookies.filter(function (i) {
      return i.trim().startsWith("_alby_session=");
    })[0],
    userCookie = cookies.filter(function (i) {
      return i.trim().startsWith("_alby_user=");
    })[0];
  sessionCookie && (url += "&session=" + sessionCookie.split("=")[1]),
    userCookie && (url += "&user_id=" + userCookie.split("=")[1]),
    fetch(url);
</script>

Configuring the Purchase Confirmation Pixel

In the code snippet from earlier, you need to replace the following variables with the appropriate values:

• brand_id: Your Brand ID.
• order_id: A unique identifier for the purchase.
• order_total: The total amount of the purchase, rounded to the nearest whole unit of the respective currency.
• product_ids: A comma-delimited list of variant/child level product IDs shared with Alby through your product catalog integration. Alby wants to observe purchases at a variant level for more robust conversion reporting.
• currency: The currency code (e.g., USD, EUR, GBP) in which the purchase was made.

Save and Publish

Save the changes you made to your source code and publish your website. The purchase confirmation pixel will now be fired on the checkout screen, capturing the necessary data for analysis.

If you encounter any issues or have further questions, don't hesitate to reach out to our support team for assistance.

Google Tag Manager

Inserting the Purchase Confirmation Pixel with Google Tag Manager

1. Access Google Tag Manager: Log in to your Google Tag Manager account.
2. Create a New Tag:
   • Click on "Tags" in the left sidebar.
   • Click on "New" to create a new tag.
   • Name your tag (e.g., Alby Purchase Confirmation Pixel).
3. Choose a Tag Configuration:
   • Click on "Tag Configuration" and select the appropriate tag type (e.g., Custom HTML).
   • Insert the pixel code into the HTML field. The code should look something like this:

<script>
  var _ALBY_ORDER_INFO = {
    brand_id: "PLACE_BRAND_ID_HERE",
    order_id: "PLACE_ORDER_ID_HERE",
    order_total: "PLACE_ORDER_TOTAL_HERE",
    product_ids: ["PRODUCT IDS HERE"],
    currency: "PLACE_CURRENCY_HERE",
  };

  var url =
      "https://tr.alby.com/p?" +
      (function (i) {
        if (i instanceof Object) {
          var s = [];
          for (var o in i)
            if (i[o]) {
              var r = i[o],
                e = encodeURIComponent(o) + "=" + encodeURIComponent(r);
              s.push(e);
            }
          return s.join("&");
        }
        return "";
      })(_ALBY_ORDER_INFO),
    cookies = document.cookie.split(";"),
    sessionCookie = cookies.filter(function (i) {
      return i.trim().startsWith("_alby_session=");
    })[0],
    userCookie = cookies.filter(function (i) {
      return i.trim().startsWith("_alby_user=");
    })[0];
  sessionCookie && (url += "&session=" + sessionCookie.split("=")[1]),
    userCookie && (url += "&user_id=" + userCookie.split("=")[1]),
    fetch(url);
</script>

4. Configuring the Purchase Confirmation Pixel: In the code snippet from earlier, you need to replace the following variables with the appropriate values:

   • brand_id: Your Brand ID.
   • order_id: A unique identifier for the purchase.
   • order_total: The total amount of the purchase, rounded to the nearest whole unit of the respective currency.
   • product_ids: A comma-delimited list of variant/child level product IDs shared with Alby through your product catalog integration. Alby wants to observe purchases at a variant level for more robust conversion reporting.
   • currency: The currency code (e.g., USD, EUR, GBP) in which the purchase was made.

5. Trigger Configuration:

   • Click on "Triggering" and select the trigger that corresponds to your purchase confirmation page or event. If you don't have a trigger set up for this event, you may need to create one.

6. Save Your Tag:

   • Click "Save" to save your tag configuration.

7. Submit Your Changes:

   • Click on "Submit" in the top right corner to publish your changes to Google Tag Manager.

8. Preview and Test (Optional):

   • Use the "Preview" mode in Google Tag Manager to test your tag before publishing it live on your website.

9. Publish Your Tag:

   • Once you're satisfied with your tag setup, click on "Submit" again and then "Publish" to make your changes live.

Your purchase confirmation pixel should now be added to your website using Google Tag Manager.

BigCommerce

Inserting the Purchase Confirmation Pixel with BigCommerce

1. Access Your BigCommerce Store's Dashboard:

   • Log in to your BigCommerce account.

2. Navigate to the Script Manager in BigCommerce:

   • Go to the Storefront in the navigation bar.
   • Click on Script Manager in the submenu.

3. Create and Configure a new script

   • Click on "Create new script" on the right.
   • In "Script Name", name your tag (e.g., Alby Purchase Confirmation Pixel).
   • (Optional) In "Description", give a description to your confirmation pixel.
   • Select "Footer" for placement.
   • Select "Order Confirmation" for location.
   • Select "Essential" for script category.
   • Select "Script" for script type.

4. Add the Purchase Confirmation Pixel:

   • Inside "Script contents" insert the following piece of code.

<script>
  fetch("/api/storefront/order/{{checkout.order.id}}", {
    credentials: "include",
  })
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      var productIds = [];
      for (x in data.lineItems) {
        if (data.lineItems[x] != []) {
          for (y in data.lineItems[x]) {
            productIds.push(data.lineItems[x][y].productId);
          }
        }
      }
      var _ALBY_ORDER_INFO = {
        brand_id: "PLACE_BRAND_ID_HERE",
        order_id: "{{checkout.order.id}}",
        order_total: data.orderAmount,
        product_ids: productIds,
        currency: data.currency.code,
      };
      var url =
          "https://tr.alby.com/p?" +
          (function (t) {
            if (t instanceof Object) {
              var e = [];
              for (var i in t)
                if (t[i]) {
                  var n = t[i],
                    r = encodeURIComponent(i) + "=" + encodeURIComponent(n);
                  e.push(r);
                }
              return e.join("&");
            }
            return "";
          })(_ALBY_ORDER_INFO),
        cookies = document.cookie.split(";"),
        sessionCookie = cookies.filter(function (t) {
          return t.trim().startsWith("_alby_session=");
        })[0],
        userCookie = cookies.filter(function (t) {
          return t.trim().startsWith("_alby_user=");
        })[0];
      if (sessionCookie) url += "&session=" + sessionCookie.split("=")[1];
      if (userCookie) url += "&user_id=" + userCookie.split("=")[1];
      fetch(url);
    });
</script>

4. Configuring the Pixel:

   • Replace "PLACE_BRAND_ID_HERE" with your brand id, this should be given to you by your Alby contact.

5. Publish Your Changes:

   • Once you've confirmed that the pixel is working correctly, save and publish your changes to make them live on your BigCommerce store.

Your purchase confirmation pixel should now be added directly to your BigCommerce store.