Crescendo Lab Web SDK (0.1.0)

Download OpenAPI specification:

The Crescendo Lab Web SDK enables seamless integration of analytics and tracking into your website. This documentation provides detailed installation instructions, event tracking guidance, and best practices for maximizing the SDK's benefits.

📞 Support

For integration assistance or inquiries, contact us at help@cresclab.com.

⚙️ Installation

To get started, copy the following code into your website’s <head> tag. This script initializes the Crescendo Lab SDK on your site.

For Taiwan and Thailand region, please copy the below code and replace the <CL-WEB-CHANNEL-ID> with your unique Crescendo Lab ID.

<!-- Crescendo Lab SDK -->
<link rel="stylesheet" href="https://websdk.cresclab.com/latest/default-ui/dist/default.css" />
<script>
  window.onClWidgetScriptLoad = function () {
    window.clWidget = window.createClWidget({
      clWebChannelId: "<CL-WEB-CHANNEL-ID>",
    });
  };
</script>
<script src="https://websdk.cresclab.com/latest/default-preset/dist/iife/production/window.global.js" defer></script>
<!-- End Crescendo Lab SDK -->

For Japan region, please copy the below code and replace the <CL-WEB-CHANNEL-ID> with your unique Crescendo Lab ID.

<!-- Crescendo Lab SDK -->
<link rel="stylesheet" href="https://websdk.jp.cresclab.com/latest/default-ui/dist/default.css" />
<script>
  window.onClWidgetScriptLoad = function () {
    window.clWidget = window.createClWidget({
      clWebChannelId: "<CL-WEB-CHANNEL-ID>",
    });
  };
</script>
<script src="https://websdk.jp.cresclab.com/latest/default-preset/dist/iife/jp/window.global.js" defer></script>

🌐 Event Tracking General Guidelines

Our SDK allows robust tracking of user interactions and e-commerce activities. Use descriptive and consistent event names, and include relevant properties for context.

Event Names: Use descriptive and consistent names for your events to easily identify them in your analytics dashboard.
Properties (props): Include relevant properties with each event to provide context and detailed information.

🏄 Web Browsing Events

Event Payload

Provide detailed information of event property:

Field	Type	Required	Description
props	String	Yes	Event properties.
props.page_path	String	Yes	URL path of the page.
props.page_title	String	Yes	Title of the page.

Page View

Send a page_view event whenever a customer visits a page on your website. This helps track user navigation and page popularity.

clWidget.clSdk.clRe.record("page_view", {
  props: {
    page_path: "/tw/channels/acquire",
    page_title: "行銷工具快速增粉獲客！讓 LINE 等多渠道擴大客源｜漸強實驗室",
  },
});

💰 E-commerce Events

Comprehensive tracking supports monitoring of product interactions and transactions. Key events and the Item object structure are detailed below.

Event Payload

Provide detailed information of event property:

Field	Type	Required	Description
props	Object	Yes	Event properties.
props.currency	String	No	Currency code (ISO 4217) used for the transaction.
props.transaction_id	String	Yes*	Unique identifier for the transaction.
props.revenue	Number	Yes*	Total revenue generated from the transaction.
props.tax	Number	No	Tax amount for the transaction.
props.shipping	Number	No	Shipping cost for the transaction.
props.coupon	String	No	Coupon code applied.
props.items	Array	Yes	Array of `Item` objects.

Notes:

Required Fields: items is mandatory.
Yes*: transaction_id and revenue are required for the purchase event.
Other Fields: You can skip these fields, if there is no value for it.

🛠️ Item Object

Provide detailed information for each item to enhance tracking and retargeting:

Field	Type	Required	Description
item_id	String	Yes	Unique identifier for the item. This should be the same one with the product feed.
item_name	String	Yes	Name of the item.
link	String	No*	URL to the item's page.
image_link	String	No*	URL to the item's image.
price	Number	No*	Price of the item.
description	String	No	Description of the item.
affiliation	String	No	Store or affiliation name.
coupon	String	No	Coupon code applied.
discount	Number	No	Discount amount or percentage.
index	Number	No	Position of the item in a list.
item_brand	String	No	Brand of the item.
item_category	String	No	Primary category of the item.
item_category2	String	No	Secondary category.
item_category3	String	No	Tertiary category.
item_category4	String	No	Quaternary category.
item_category5	String	No	Quinary category.
item_list_id	String	No	Identifier for the list in which the item appears.
item_list_name	String	No	Name of the list.
item_variant	String	No	Variant of the item.
location_id	String	No	Identifier for the location where the item is available.
quantity	Number	No	Quantity of the item involved in the event.

Notes:

Required Fields: item_id and item_name are mandatory.
No*: Providing link, image_link, price enhances the quality of data, especially for retargeting and detailed analytics.
Other Fields: You can skip these fields, if there is no value for it.

View Items

Highly recommended if you use MAAC Retargeting

Track the number of times each product is viewed using the view_items event. This helps in understanding product popularity and user interests.

clWidget.clSdk.clRe.record("view_items", {
  props: {
    currency: "TWD",
    items: [
      {
        item_id: "SKU_67890",
        item_name: "MAAC CRM and Marketing Automation Tool",
        description: "MAAC is a comprehensive CRM and marketing automation tool designed for LINE.",
        affiliation: "Cresclab",
        coupon: "NEW_USER",
        discount: 5.0,
        index: 1,
        item_brand: "Cresclab",
        item_category: "Software",
        item_category2: "Marketing",
        item_category3: "CRM",
        item_category4: "Automation",
        item_category5: "LINE Integration",
        item_list_id: "featured_products",
        item_list_name: "Featured Products",
        item_variant: "standard",
        link: "https://www.cresclab.com/en/product/maac",
        image_link: "https://www.cresclab.com/images/maac-product.png",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 49.99,
        quantity: 1.0,
      },
    ],
  },
});

Add to Cart / Remove from Cart

Highly recommended if you use MAAC Retargeting

Track cart interactions with add_to_cart and remove_from_cart events.

clWidget.clSdk.clRe.record("add_to_cart", {
  props: {
    currency: "TWD",
    items: [
      {
        item_id: "SKU_67890",
        item_name: "MAAC CRM and Marketing Automation Tool",
        description: "MAAC is a comprehensive CRM and marketing automation tool designed for LINE.",
        affiliation: "Cresclab",
        coupon: "NEW_USER",
        discount: 5.0,
        index: 1,
        item_brand: "Cresclab",
        item_category: "Software",
        item_category2: "Marketing",
        item_category3: "CRM",
        item_category4: "Automation",
        item_category5: "LINE Integration",
        item_list_id: "featured_products",
        item_list_name: "Featured Products",
        item_variant: "standard",
        link: "https://www.cresclab.com/en/product/maac",
        image_link: "https://www.cresclab.com/images/maac-product.png",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 49.99,
        quantity: 1.0,
      },
    ],
  },
});

clWidget.clSdk.clRe.record("remove_from_cart", {
  props: {
    currency: "TWD",
    items: [
      {
        item_id: "SKU_67890",
        item_name: "MAAC CRM and Marketing Automation Tool",
        description: "MAAC is a comprehensive CRM and marketing automation tool designed for LINE.",
        affiliation: "Cresclab",
        coupon: "NEW_USER",
        discount: 5.0,
        index: 1,
        item_brand: "Cresclab",
        item_category: "Software",
        item_category2: "Marketing",
        item_category3: "CRM",
        item_category4: "Automation",
        item_category5: "LINE Integration",
        item_list_id: "featured_products",
        item_list_name: "Featured Products",
        item_variant: "standard",
        link: "https://www.cresclab.com/en/product/maac",
        image_link: "https://www.cresclab.com/images/maac-product.png",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 49.99,
        quantity: 1,
      },
    ],
  },
});

Begin Checkout

Track the start of the checkout process with the begin_checkout event.

clWidget.clSdk.clRe.record("begin_checkout", {
  props: {
    currency: "TWD",
    items: [
      {
        item_id: "SKU_67890",
        item_name: "MAAC CRM and Marketing Automation Tool",
        description: "MAAC is a comprehensive CRM and marketing automation tool designed for LINE.",
        affiliation: "Cresclab",
        coupon: "NEW_USER",
        discount: 5.0,
        index: 1,
        item_brand: "Cresclab",
        item_category: "Software",
        item_category2: "Marketing",
        item_category3: "CRM",
        item_category4: "Automation",
        item_category5: "LINE Integration",
        item_list_id: "featured_products",
        item_list_name: "Featured Products",
        item_variant: "standard",
        link: "https://www.cresclab.com/en/product/maac",
        image_link: "https://www.cresclab.com/images/maac-product.png",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 49.99,
        quantity: 1,
      },
    ],
  },
});

Purchase

Highly recommended if you use MAAC Retargeting

Capture completed transactions with the purchase event, including transaction details.

clWidget.clSdk.clRe.record("purchase", {
  props: {
    transaction_id: "T_12345",
    revenue: 25.42,
    tax: 4.9,
    shipping: 5.99,
    currency: "TWD",
    coupon: "SUMMER_SALE",
    items: [
      {
        item_id: "SKU_67890",
        item_name: "MAAC CRM and Marketing Automation Tool",
        description: "MAAC is a comprehensive CRM and marketing automation tool designed for LINE.",
        affiliation: "Cresclab",
        coupon: "NEW_USER",
        discount: 5.0,
        index: 1,
        item_brand: "Cresclab",
        item_category: "Software",
        item_category2: "Marketing",
        item_category3: "CRM",
        item_category4: "Automation",
        item_category5: "LINE Integration",
        item_list_id: "featured_products",
        item_list_name: "Featured Products",
        item_variant: "standard",
        link: "https://www.cresclab.com/en/product/maac",
        image_link: "https://www.cresclab.com/images/maac-product.png",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 49.99,
        quantity: 1,
      },
      {
        item_id: "SKU_54321",
        item_name: "CAAC Customer Service and Chatcommerce Tool",
        description: "CAAC is an enterprise customer service platform for LINE.",
        affiliation: "Cresclab",
        coupon: "WELCOME_CAAC",
        discount: 10.0,
        index: 2,
        item_brand: "Cresclab",
        item_category: "Software",
        item_category2: "Customer Service",
        item_category3: "Chatcommerce",
        item_category4: "Automation",
        item_category5: "LINE Integration",
        item_list_id: "featured_products",
        item_list_name: "Featured Products",
        item_variant: "standard",
        link: "https://www.cresclab.com/en/product/caac",
        image_link: "https://www.cresclab.com/images/caac-product.png",
        location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
        price: 59.99,
        quantity: 1,
      },
    ],
  },
});