> ## Documentation Index
> Fetch the complete documentation index at: https://docs.runconverge.com/llms.txt
> Use this file to discover all available pages before exploring further.

# BigCommerce Web

> Install the BigCommerce Storefront Script

export const Icon = ({name}) => {
  return <div className="h-4 w-4 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100 inline-block align-middle">
            <svg className="w-4 h-4 bg-gray-800 dark:bg-gray-100" style={{
    maskImage: `url('https://mintlify.b-cdn.net/v6.5.1/solid/${name}.svg')`,
    maskRepeat: "no-repeat",
    maskPosition: "center center"
  }} />
        </div>;
};

export const DownloadLink = ({linkText, linkTarget}) => {
  return <a target="_blank" href={linkTarget} download> {linkText} 
    <div className="inline h-3 w-3 fill-gray-500 dark:fill-gray-100 text-gray-500 dark:text-gray-300 ml-1 mr-1">
      <svg className="inline w-3 h-3 bg-gray-500 dark:bg-gray-300 -mt-1" style={{
    maskImage: `url('https://mintlify.b-cdn.net/v6.5.1/solid/download.svg')`,
    maskRepeat: "no-repeat",
    maskPosition: "center center"
  }}></svg> 
    </div>
    </a>;
};

The BigCommerce Website Integration consists of a script that tracks your storefront and checkout events.

***

## Installation instructions

The Converge Website installation for a BigCommerce store consists of:

<Steps>
  <Step title="Create a new Client Source in Converge">
    1. In Converge, click on **Create a new source**
    2. Pick *Client-side* from the modal
    3. Name your pixel: e.g. `{Storename} Storefront`
  </Step>

  <Step title="Configure the storefront script">
    4. Navigate to **Channel Manager** in the BigCommerce Dashboard.

    5. Under Storefronts, click on the <Icon name="ellipsis" />-icon next to the Storefront for which you want to install tracking. Click on **Edit Settings**.

    6. In the storefront settings, click on **Script manager** in the sidebar and then click on **Create a script**.

    7. Choose **Converge** as your script name, choose **Footer** as your Placement and **All pages** as your Location. Make sure the Script category is **Essential** and Script type is **Script**.

    8. Copy the script below
           <Accordion title="Click to see script to copy" icon="clipboard">
             ```html theme={null}
             <script>
             !function(){"use strict";!function(e,t,c,n,s,o,r){e.cvg||(s=e.cvg=function(){s.process?s.process.apply(s,arguments):s.queue.push(arguments)},s.queue=[],(o=t.createElement(c)).async=1,o.src="https://static.runconverge.com/pixels/YOUR_PUBLIC_TOKEN.js",(r=t.getElementsByTagName(c)[0]).parentNode.insertBefore(o,r))}(window,document,"script")}();
             </script>

             <script>
                 (function(){
                     const cartId = "{{cart_id}}";
                     let aliases = [];
                     let profileProperties = {};

                     if (cartId) {
                         aliases.push(`urn:bigcommerce:cart:${cartId}`);
                     }


                     const getCookie = (name) => {
                         const value = `; ${document.cookie}`;
                         const parts = value.split(`; ${name}=`);
                         if (parts.length === 2) {
                             return parts.pop().split(';').shift();
                         }
                         return '';
                     }

                     const setCookie = (name, value) => {
                         document.cookie = `${name}=${value}; path=/;`;
                     }
                     
                     const setupCheckoutEvent = (eventName) => {
                         return fetch('/api/storefront/checkout/{{cart_id}}')
                             .then((response) => response.json())
                             .then((checkout) => {
                                 const cart = checkout.cart;
                                 if (cart.email) {
                                     aliases.push(`urn:email:${cart.email}`);
                                     profileProperties['$email'] = cart.email;
                                 }
                                 if (cart.customerId) {
                                     aliases.push(`urn:bigcommerce:customer:{{settings.store_hash}}:${cart.customerId}`);
                                 }
                                 const address = checkout.billingAddress
                                 profileProperties = {
                                     ...profileProperties,
                                     $first_name: address.firstName,
                                     $last_name: address.lastName,
                                     $phone_number: address.phone,
                                     $city: address.city,
                                     $state: address.stateOrProvince,
                                     $zip_code: address.postalCode,
                                     $country_code: address.countryCode,
                                 }
                                 
                                 cvg({
                                     method: 'track',
                                     eventName: eventName,
                                     properties: {
                                         id: cart.id,
                                         total_price: cart.cartAmount,
                                         total_discount: cart.discountAmount,
                                         total_tax: checkout.taxes.map(t => t.amount).reduce((a, b) => a + b, 0),
                                         coupon: cart.coupons.map(c => c.code),
                                         currency: cart.currency.code,
                                         items: cart.lineItems.physicalItems.map(
                                             l => ({
                                                 product_id: l.productId,
                                                 variant_id: l.variantId,
                                                 name: l.name,
                                                 variant_name: l.variantId,
                                                 sku: l.sku,
                                                 price: l.salePrice,
                                                 discount: l.discountAmount,
                                                 vendor: l.brand.name,
                                                 quantity: l.quantity,
                                                 currency: cart.currency.code
                                             })
                                         ),
                                         ...profileProperties
                                     },
                                     aliases,
                                     profileProperties
                                 })
                             }
                         )
                     }

                     cvg({method: "track", eventName: "$page_load", aliases, profileProperties});

                     const pageType = "{{page_type}}";
                     if (pageType === "product") {
                         const product = {
                             product_id: "{{product.id}}",
                             name: "{{product.title}}",
                             sku: "{{product.sku}}",
                             price: +("{{product.price.with_tax.value}}" || "{{product.price.without_tax.value}}"),
                             currency: "{{product.price.with_tax.currency}}" || "{{product.price.without_tax.currency}}",
                             vendor: "{{product.brand.name}}"
                         };
                         cvg({
                             method: "track",
                             eventName: "Viewed Product",
                             properties: product,
                             aliases,
                             profileProperties
                         });
                         const btn = document.getElementById("form-action-addToCart");
                         if (btn) {
                             btn.addEventListener('click', function (){
                                     cvg({
                                         method: "track",
                                         eventName: "Added To Cart",
                                         properties: {
                                             ...product,
                                             quantity: 1
                                         },
                                         aliases
                                     });
                             });
                         }
                     } else if (pageType === "category") {
                         cvg({
                             method: "track",
                             eventName: "Viewed Collection",
                             properties: {
                                 id: "{{category.id}}",
                                 name: "{{category.name}}",
                                 description: "{{category.description}}",
                                 items: [
                                     {{#each category.products}}
                                         {
                                             product_id: "{{this.id}}",
                                             name: "{{this.name}}",
                                             sku: "{{this.sku}}",
                                             price: +("{{this.price.with_tax.value}}" || "{{this.price.without_tax.value}}"),
                                             currency: "{{this.price.with_tax.currency}}" || "{{this.price.without_tax.currency}}",
                                             vendor: "{{this.brand.name}}"
                                         },
                                     {{/each}}
                                 ].slice(0, 20)
                             },
                             aliases,
                             profileProperties
                         });

                     } else if (pageType === 'cart') {
                         const coupons = {{#if cart.coupons}} {{{json cart.coupons}}} {{else}} [] {{/if}};
                         const codes = coupons.map(c => c.code);
                         const discount = -1 * coupons.map(c => c.discount.value).reduce((a, b) => a + b, 0);
                         cvg({
                             method: "track",
                             eventName: "Viewed Cart",
                             properties: {
                                 total_price: +"{{cart.grand_total.value}}",
                                 total_tax: +"{{cart.taxes.cost.value}}",
                                 total_discount: discount,
                                 currency: "{{cart.grand_total.currency}}",
                                 coupon: codes,
                                 items: [
                                     {{#each cart.items}}
                                         {
                                             product_id: "{{this.product_id}}",
                                             name: "{{this.name}}",
                                             sku: "{{this.sku}}",
                                             price: +"{{this.price.value}}",
                                             currency: "{{this.price.currency}}",
                                             vendor: "{{this.brand.name}}",
                                             quantity: +"{{this.quantity}}"
                                         },
                                     {{/each}}
                                 ]
                             },
                             aliases,
                             profileProperties
                         });

                     } else if (pageType === 'checkout') {
                         if (getCookie('__cvg_started_checkout') !== "{{cart_id}}") {
                             setupCheckoutEvent('Started Checkout');
                             setCookie('__cvg_started_checkout', "{{cart_id}}");
                         }
                         window.addEventListener("click", function(event){ 
                             var id = event.target.id;
                             if (id === 'checkout-customer-continue' ) {
                                 setupCheckoutEvent('Added Contact Info');
                             }
                             if (id === 'checkout-shipping-continue') {
                                 setupCheckoutEvent("Added Shipping Info")
                             }
                             if (id === 'checkout-payment-continue') {
                                 setupCheckoutEvent("Added Payment Info")
                             }
                         });
                     } 
                 })();  
             </script>
             ```
           </Accordion>

    9. Navigate to your Converge dashboard and find the Client-side source you created for BigCommerce. Click on the pixel and copy the tracking token as per the screenshot below.
           <Frame>
             <img src="https://mintcdn.com/converge/ecGnucKsPgTlQzkL/images/sources/funnelish/funnelish-14.png?fit=max&auto=format&n=ecGnucKsPgTlQzkL&q=85&s=7b3e8a0297729324bd75183114fc0f05" alt="funnelish-14" width="2534" height="1300" data-path="images/sources/funnelish/funnelish-14.png" />
           </Frame>

    10. Replace the `YOUR-TRACKING-TOKEN` field in the script pasted with your personal Converge token.
            <Frame>
              <img src="https://mintcdn.com/converge/ecGnucKsPgTlQzkL/images/sources/bigcommerce/bigcommerce-0.png?fit=max&auto=format&n=ecGnucKsPgTlQzkL&q=85&s=51d83fb066087a0e81e566fa82c36224" alt="funnelish-15" width="964" height="366" data-path="images/sources/bigcommerce/bigcommerce-0.png" />
            </Frame>

    11. Once that is done, click on **Save**.
  </Step>

  <Step title="Verify that the integration is working correctly">
    12. Check that the plugin is working correctly by generating some `$page_load`, `Added To Cart`, `Started Checkout` events by visiting the store and seeing that these events arrive in the Source Log.

    <Info>Set up a [Pixel Monitor](/sources/monitoring#pixel-monitor) to automatically verify your pixel stays installed.</Info>
  </Step>
</Steps>

***

## Event spec

This integration auto-tracks the following events on the browser with all properties available according to the [Converge event spec](/sources/converge-spec).

| Event Name                                                  | Event Description                               | Integration |
| ----------------------------------------------------------- | ----------------------------------------------- | ----------- |
| [PageView](/sources/converge-spec#page-view)                | When a customer views a page.                   | Storefront  |
| [Viewed Product](/sources/converge-spec#viewed-product)     | When a customer views a product.                | Storefront  |
| [Added To Cart](/sources/converge-spec#added-to-cart)       | When a customer adds an item to cart            | Checkout    |
| [Started Checkout](/sources/converge-spec#started-checkout) | When a customer initiates the checkout process. | Checkout    |