Configure Transaction Event in Wingify Data Platform

Overview

The Transaction event in Wingify Data Platform captures detailed purchase information on your website, including revenue, order IDs, shipping costs, taxes, payment methods, and itemized product details.

Standard events capture user interaction behaviors automatically without requiring manual configuration. The Transaction event is a specialized standard event with a fixed set of predefined properties, and it is triggered when a visitor makes a purchase on your website. As transaction structures vary across e-commerce platforms, Wingify lets you define how your website data maps to standard transaction properties.

Configuring the Transaction event provides the following capabilities:

• Centralized E-commerce tracking: Map purchase data once at the account level to make revenue and item-level data available across campaigns and reports.
• Flexible implementation methods: Track the purchase using the JavaScript API or a mapping rule in Selector mode or Expert mode.
• Item-level granularity: Capture details for individual items within a multi-item purchase, such as product name, SKU, price, category, and quantity.

Example Scenario

An e-commerce store wants to track revenue and purchases on its order confirmation page (/checkout/success). Rather than adding custom JavaScript to that page, a developer creates a mapping rule using Selector Mode in Wingify. The rule points to the CSS selectors for the order total, transaction ID, and item count. When the page loads, Wingify reads these elements and automatically sends the transaction event.

Prerequisites

You must have:

• An active Wingify account with access to the Data Platform.
• Basic knowledge of your website's DOM structure and CSS selectors to set up mapping rules via Selector Mode. 
• Technical expertise in JavaScript to add the API code snippet to your website, tag manager, or data layer, and to set up mapping rules via Expert Mode. 
• The Wingify SmartCode installed on all web pages where transactions occur.

Configure Transaction Event

To configure the Transaction event:

1. Log in to your Wingify account.
2. From the left navigation bar, go to Data Platform > Events.
3. Under the Standard events list, select Transaction.

You can configure the Transaction event using one of three methods: 

• JavaScript API
• Selector Mode in Mapping Rules
• Expert Mode in Mapping Rules

You can also capture transaction events from a tag manager's data layer. For more information, see Capture Events from Your Data Layer Using Event Mapping. 

Configure Transaction Event Using JavaScript API

Use this method if you prefer to trigger transaction tracking directly using custom JavaScript in your website source code.

1. Log in to your Wingify account.
2. From the left navigation bar, go to Data Platform > Events.
3. In the Transaction event view, select the API tab.
4. Select a tab based on your preferred code format (for example, JS) to view the auto-generated code snippet.
5. Copy the code snippet and place it on your purchase confirmation page.

6. Replace the placeholder values in the snippet with your dynamic site variables (for example, order ID, revenue, item details).
   
   For example:
   If the confirmation page on your website already stores the order in orderData, replace the placeholders with those fields as shown in the following snippet:

   <script>
   window.Wingify = window.Wingify || [];
   Wingify.event = Wingify.event || function () {Wingify.push(["event"].concat([].slice.call(arguments)))};
   
   // Replace the property values with your actual values
   Wingify.event("vwo_transaction", {
   "tid": orderData.id,
   "tr": orderData.revenue,
   "icn": orderData.itemCount
   });  
   
   </script>
   

Here, orderData is a sample variable from your website.

Configure Transaction Event Using Selector Mode in Mapping Rules

Selector Mode lets you fetch transaction values directly from HTML elements on your website using CSS selectors, without writing custom code. 

To configure mapping rules using Selector mode:

1. Log in to your Wingify account.
2. From the left navigation bar, go to Data Platform > Events.
3. In the Transaction event view, select the Mapping rules tab.
4. Click + Add rule.
5. In the Name field, enter a descriptive name for your rule (for example, Transaction Selector).

6. Under Page URL(s), specify the URL criteria where the rule should execute. 
   To set the URL criteria, you can use the Include or Exclude operator with URL filtering options such as URL ignoring parameters, Contains, Corresponds exactly, and Regular expression.

   Note: If you leave the Page URL section empty, Wingify evaluates the mapping rule on every page across your registered domains where Wingify SmartCode is deployed.
7. From the Implementation mode dropdown, select Selector mode.
8. Configure the required mapping fields by entering the corresponding CSS selectors from your web page:
   • Transaction ID (tid): Enter the selector for the element containing the order ID. (for example - #order-id).
   • Transaction revenue (tr): Enter the selector for the element holding the total price ( #order-total).

   • Number of items (icn): Enter the selector for the element holding the item count. Also, select the calculation method (Default, Sum, or Count). 
     To understand the calculation methods better, consider an order with three products:

     Product	Quantity
     Tshirt	2
     Sneaker	1
     Cap	3

     The order confirmation page also shows a summary line: Total items: 6.

• Default: Use this when the selector points to a single element that already shows the total number of items. Here, the selector targets the Total items line, and Wingify reads the value 6 as is.
• Sum: Use this when the selector matches the quantity element of each product. Wingify adds the values together, so 2 + 1 + 3 returns 6.
• Count: Use this when the selector matches each product row, regardless of quantity. Wingify counts the matched elements, so the three products return 3.

9. (Optional) Click + Add optional variable to map additional transaction properties such as shipping, tax, currency, discount code, payment method, or shipping method.
10. (Optional) To map item-level details, select Array of items from the Optional variables dropdown:
    • Enter the top-level container selector for item elements, for example, .cart-item.
    • Map sub-properties for each item, including Item name, Item SKU, Item quantity, Item price, and Item category, using CSS selectors relative to the item container.
11. Click Save rule.

The transaction event is now configured to capture all the property values based on your URL and selector settings.

Configure Transaction Event Using Expert Mode in Mapping Rules

Expert Mode allows developers to write custom JavaScript within Wingify UI to dynamically extract, transform, and construct the transaction object. 

To configure mapping rules using Expert mode:

1. Follow steps 1-6 mentioned in the previous section. 
2. From the Implementation mode dropdown, select Expert mode.
3. In the Expert mode editor, enter the JavaScript function that returns a structured transaction object containing the required transaction- and item-level properties.
4. Click Save rule.
   Your transaction event is now configured.

Troubleshooting

FAQs

• Is the Transaction event captured automatically, like other standard events?
  No. While it is categorized as a Standard event due to its fixed property structure, you must explicitly configure it using API snippets or Mapping Rules (Selector or Expert Mode).

• What happens if I leave the Page URL section blank when creating a mapping rule?
  Wingify executes the mapping rule logic on all pages across your registered domains where the Wingify SmartCode is present. If the required selectors are found on any page, the transaction event is triggered.

• How many mapping rules can I create for the Transaction event?
  You can create multiple mapping rules to accommodate different checkout flows, domain structures, or implementation methods.

• Does Selector mode record a transaction when a page loads, or only after a user does something?
  Selector mode does not record the transaction when a visitor clicks a button or takes another action. It records the transaction when a visitor opens or lands on a page that matches the Page URL condition. Wingify then reads the selectors you set up and sends the Transaction event. 

Need more help?

For further assistance or more information, contact Wingify Support.