Pay Later messaging analytics
Integrate your analytics platform
DocsCurrentLast updated: April 12th 2022, @ 9:22:12 am
When you integrate Pay Later messaging, you can also integrate your analytics platform and add events related to Pay Later messaging.
The PayPal JavaScript SDK accepts optional callback function properties.
Events
The following table lists events that can be tracked by your analytics platform:
Options | Type | Description |
---|---|---|
onRender | Function | Callback function called immediately after each message is successfully rendered to the DOM. |
onClick | Function | Callback function called immediately after each message is selected. |
onApply | Function | Callback function called immediately after clicking on an apply link or button. |
Example
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script
src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=messages">
</script>
</head>
<body>
<div class="pp-message"></div>
<script>
paypal.Messages({
amount: 500,
pageType: 'product-detail',
style: {
layout: 'text',
logo: {
type: 'primary',
position: 'top'
}
},
onRender: () => {
console.log('render')
},
onClick: () => {
console.log('click')
},
onApply: () => {
console.log('apply')
}
})
.render('.pp-message');
</script>
</body>
In the previous example, you create a message object by calling the paypal.Messages
function with a configuration object that includes optional properties for onRender
, onClick
, and onApply
.
The functions in this example log in the console that an event has occurred. Refer to your analytics platform's documentation to learn how to log when a custom event has occurred. Put that code in the function body of the event hook properties of the messages configuration object.
You can also possible add event hooks using inline HTML attributes.
Note: Like other inline HTML attributes, the event handlers added in HTML override any defined by the JavaScript API.
Example
<div
data-pp-message
data-pp-onrender="console.log('Callback called on render')"
data-pp-onclick="console.log('Callback called on click')"
data-pp-onapply="console.log('Callback called on apply')"
></div>