Enhancing Gumroad Sales with Google Tag Manager Transaction Tracking

I would like to add a technical note related to my previous post about education and course platforms. In addition to creating direct training streams, some of the platforms mentioned in the post can also generate assets as files or links; Podia and Thinkific are two of these course platforms. On the other hand, we can give Gumroad as an example of a platform that concentrates more directly on asset sharing than others.

Gumroad

Gumroad was one of the platforms that I used and enjoyed for selling digital products.

The platform allows you to quickly create and manage an online store. In this way, all kinds of downloadable materials and redirection links can be published both on the platform and on 3rd party tools.

Of course, I'll continue to refer to the specifics of Gumroad in the future, but in this post, I will concentrate on how to use the widget feature of Gumroad and the track purchase event related to it.

Gumroad and Releasing a Product

When a product is released on Gumroad, a page for the product is created (eg https://gum.co/<product-id>) and this created page also becomes accessible via 3rd party applications with the embed option.

When a product is released on Gumroad, a unique page is created for that product with a URL in the format of https://gum.co/<product-id>. This page can be used to showcase the product and provide information about it to potential customers. Additionally, Gumroad offers an embed option that enables the product page to be embedded in external sources like websites or blogs.

The Overlay option allows users to view product details and complete purchases without leaving the relevant page. With this option, when the Gumroad button created via JavaScript is clicked, the user can either view the product details through an iframe or be redirected to the payment step. Moreover, limitations can be added to the flow passed through the iframe, such as limiting the quantity of a product. If JavaScript is not active in third-party applications, the relevant processes will be presented to the user in a new tab.

In the Embed option, product details are embedded directly into the page via JavaScript.

Gumroad Sales Tracking Process

If the products published on Gumroad are presented through a web page, the events inside the iframe with JavaScript are also transmitted as a message. These messages include a notification of the sales transaction¹.

window.addEventListener('message', ev => {
  if (ev.data && JSON.parse(ev.data).post_message_name === 'sale') {
    //...
  }
}, false);

It is possible to do many logical things (event triggering, showing messages, changing an element style, etc.) using the basic code part above. dataLayer is also one of these options², of course.

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);

There are also a lot of product-related parameters about the product presented in the relevant message content^{3 4 5}. In the example code snippet above, the order number is transmitted with order_number, and the selling price of the product is transmitted with price as an event parameter. Along with the other parameters provided, we can consider the use of an event as a standard purchase event or a customized event for different tracking needs ^{6 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': gumroadData.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 we do. Now, we are ready to track Gumroad product sales through our website or third-party websites via the Google Tag Manager, and create tags to transmit sales data to many tracking and advertising tools, such as Google Analytics and Facebook Meta and CAPI.