eCardWidget has introduced the custom EventListener. This powerful tool allows web designers to execute their own code when an eCard is sent or shared, offering enhanced interaction and data tracking capabilities. Below is a guide on how to use it, along with some example use cases.
How to Implement the Custom EventListener
Add the EventListener to Your Website's Code:
Place the following code snippet on the same page where you have your eCardWidget embedded where you want to track eCard actions:
document.addEventListener('ecwShareSuccess', function(e) {
// Your custom code here
});
Access eCard Data:
Within the EventListener function, you can access various data points passed by the eCardWidget through
e.detail. This includes sender and recipient info, personal messages, e-commerce totals, and more.
Example Use Cases
Tracking eCard Purchases in Google Analytics:
Track the value of eCards sent from your site by sending purchase events to Google Analytics.
Example code:
document.addEventListener('ecwShareSuccess', function(e) {
gtag('event', 'purchase', {
'value': e.detail.ecomm_total,
'currency': e.detail.ecomm_currency
});
});
Custom Thank-You Messages Post-Share:
Display a custom thank-you message or redirect to a specific page after an eCard is shared.
Example code:
document.addEventListener('ecwShareSuccess', function(e) {
if (e.detail.share_mode === 'email') {
alert('Thank you for sending an eCard!'); // Or redirect:
window.location.href = 'thank-you-page.html';
}
});
Social Media Interaction Tracking:
Monitor which eCards are being shared on social media platforms for a better understanding of user preferences.
Example code:
document.addEventListener('ecwShareSuccess', function(e) {
if (
['facebook', 'twitter', 'linkedin'
].includes(e.detail.share_mode)) {
console.log('eCard shared on social media: ' + e.detail.share_mode);
}
});
Donation Confirmation for Non-Profits:
Non-profits can use this feature to confirm donations made through eCard purchases.
Example code:
document.addEventListener('ecwShareSuccess', function(e) {
if (e.detail.ecomm_total > 0) {
alert('Thank you for your generous donation!');
}
});
Understanding the Data Available in eCardWidget's EventListener
When an eCard is sent or shared, eCardWidget's custom EventListener provides a wealth of data to help you understand user interactions and preferences. Here’s a breakdown of the data available through e.detail in the EventListener:
Form Data: Contains information about the eCard transaction. This includes:
recipients: An array of recipient objects, each containingname,email, andtype(such as 'email').sender: An object detailing the sender'snameandemail.personalMessage: The message included with the eCard.Other settings like
getReadReceipt,optedIn,addMoreCover,setSchedule.
Share Mode: Indicates the method used to share the eCard, such as 'email', 'facebook', 'twitter', 'linkedin', 'sms', 'whatsapp', 'ecard_viewprint', or 'ecard_download'.
E-commerce Data:
ecomm_total: The total value of the transaction (useful for tracking purchases).ecomm_currency: The currency of the transaction, defaulting to 'USD'.ecomm_testmode: Indicates whether the transaction was in test mode.
eCard Details:
price: The price of the eCard, if applicable.filename: The file name of the eCard image.widgetid,ecardid,ownerid: Various identifiers for the eCard and widget.image: The URL of the eCard image.pageTitle,title: The title of the eCard.Additional settings and flags related to the eCard's configuration.
It's recommended to do a console.log(e.details) in the event listener to inspect what data is available to you.
This data can be used to track user behavior, analyze eCard popularity, and integrate with other systems like Google Analytics for deeper insights. By accessing this information, you can tailor your marketing strategies, improve user experience, and make data-driven decisions to enhance your eCardWidget's effectiveness.
This feature is now available to all eCardWidget users. To get started, simply incorporate the EventListener code into your website and customize it according to your needs. For more information or assistance, please visit our support page or contact our customer service team.