Online Education / Course Platforms article, I discussed online education platforms. In this and subsequent posts, I’ll demonstrate how user activities (conversions, etc.) can be tracked through education platforms. The service used for the following example is Gumroad.
Related platforms I’d also like to add technical content I’ve published on these platforms. Some of the mentioned platforms not only enable direct creation of learning workflows but also provide the ability to present certain assets (items) as files or links. Podia and Thinkific offer some of these options. There are also solutions that focus more directly on sharing digital assets, even if they are not present on the platform itself. Gumroad is one of these.
Gumroad
Gumroad was also one of the platforms I personally use and am satisfied with for my digital products.
The platform allows you to quickly set up and manage your own online store. This way, any type of downloadable material and redirect links can be published both through the platform and via third-party tools.
I’ll provide further details about Gumroad in future posts. In this article, I’ll focus on its widget feature and how purchase actions made through the widget can be tracked.
Gumroad Product Launch
When a product is launched on Gumroad, the corresponding product page (e.g., https://gum.co/<product-id>) becomes accessible via the embed option through third-party applications as well.
Overlay option enables viewing product details and completing purchases without leaving the relevant website. With this option, when the Gumroad button created via JavaScript is clicked, product details can be displayed to the user through an iframe, or the user can be directly redirected to the payment process. Additionally, restrictions such as a single purchase can also be applied to the flow delivered via iframe. If JavaScript from a third party is inactive, the relevant actions will be presented to the user in a new tab.
In Embed mode, product details are directly embedded into the page via JavaScript.
Gumroad Sale Tracking
When products published via Gumroad are displayed on a web page, events occurring within the iframe are also sent via JavaScript as message. Among these messages, a sale notification is included1.
window.addEventListener('message', ev => {
if (ev.data && JSON.parse(ev.data).post_message_name === 'sale') {
//...
}
}, false);Using the above basic code snippet, many operations can be performed. This option can also be implemented as an event via dataLayer2.
window.addEventListener('message', ev => {
if (ev.data && JSON.parse(ev.data).post_message_name === 'sale') {
dataLayer.push({
'event' : 'sale',
'eventCategory' : 'Gumroad',
'eventAction' : 'Purchase',
'eventLabel' : ev.data.order_number,
'eventValue' : ev.data.price
});
}
}, false);A large amount of information about the product is provided in the message content3 4 5. In the code snippet above, the order number is passed via the order_number field, and the product’s sale price is transmitted via the price field, as part of an event definition. Together with the other provided details, the event usage can also be considered a standard transaction event or an expanded e-commerce event (UA and GA4) as defined by Google Analytics6 7.
window.addEventListener('message', ev => {
if (ev.data && JSON.parse(ev.data).post_message_name == 'sale') {
let gumroadData = JSON.parse(ev.data);
let prc = pr => Number(pr.replace(/[^0-9\.-]+/g,""));
// console.log(gumroadData);
// UA
dataLayer.push({
'event': 'purchase',
'ecommerce': {
'purchase': {
'actionField': {
'id': gumroadData.order_number,
'affiliation': gumroadData.affiliate || '',
'revenue': prc(gumroadData.total_price_including_tax_and_shipping),
'tax': prc(gumroadData.sales_tax_amount),
'coupon': gumroadData.offer_code || ''
},
'products': [{
'name': gumroadData.product_name,
'id': gumroadData.product_id,
'price': prc(gumroadData.price),
// 'variant': gumroadData.variants.categories[0].options[0].name,
'quantity': gumroadData.quantity,
'coupon': gumroadData.offer_code || ''
}]
}
}
});
// GA4
dataLayer.push({
'event': 'purchase',
'ecommerce': {
'purchase': {
'transaction_id': gumroadData.order_number,
'affiliation': gumroad_data.affiliate || '',
'value': prc(gumroadData.total_price_including_tax_and_shipping),
'tax': prc(gumroadData.sales_tax_amount),
'currency': gumroadData.currency,
'coupon': gumroadData.offer_code || '',
'items': [{
'item_name': gumroadData.product_name,
'item_id': gumroadData.product_id,
'item_price': prc(gumroadData.price),
// 'item_variant': gumroadData.variants.categories[0].options[0].name,
'quantity': gumroadData.quantity,
'item_coupon': gumroadData.offer_code || ''
}]
}
}
});
}
}, false);That’s all. Now, we can track Gumroad product sales that occur either through our website or via third-party sites, using the Google Tag Manager currently active on the relevant page. Of course, one of the GTM options. You can directly track these actions via various analytics and advertising tools, including Google Analytics and Facebook Analytics.