Methodologies:
App Extension executes code in an external iframe with sandbox mode. It is designed in a safe environment without affecting the parent checkout page. APIs are available to catch events with data objects. After catching an event with data objects, customized codes can perform specific functions by consuming the data objects, e.g. perform purchase tracking.
1. APIs:
Event handler APIs subscribe to the App Extension events, then perform customized scripts for tracking or functions.
1.1: addWildcardEventHandler
Description: Subscribe all events fired
Sample code:
// subscribe all events
itc.addWildcardEventHandler(function(t, payload, additional) {
console.log('itc.addWildcardEventHandler ');
console.dir(t);
console.dir(payload);
console.dir(additional);
});
1.2: addEventHandler
Description: Subscribe a specific event
Sample code:
// subscribe purchase event
itc.addEventHandler('Purchase', function(payload, additional) {
obApi('track', 'Purchase', {
orderValue: additional.total,
currency: payload.currency,
orderId: additional.transaction_id
});
});
2. Events:
A event is fired when a checkout process reached a specific checkpoint throughout the journey.
Bringing customized objects into the App Extension
The app will get a window.opc_customized_attributes objects from product/cart page once triggered and allow access in the App Extension as additional.customized_attributes. Please find the below sample script on the product/cart page:
<script>
window.opc_customized_attributes = {"foo": "data1", "bar": ["123", "abc"]};
</script>
2.1: InitiateCheckout
Description: This event is fired when a customer just lands on the app checkout page
2.2: AddPaymentInfo
Description: This event is fired when a customer adds payment info, e.g. input credit card, after PayPal authorization
2.3: Purchase
Description: This event is fired when a customer completes a purchase
2.4: PostPurchase
Description: This event is fired when a customer just before reaching thank you page with post-purchase upsell offers
