A passionate Software and Systems Engineer specialized in DevOps, Systems Engineering, Python, JavaScript, Linux, and Automation.
#python #backend #opensource #ansible #javascript #frontend #devops #automation #linux
If you're selling digital products on platforms like Gumroad or LemonSqueezy, having control over your marketing and traffic data is crucial. Tracking sales from specific referrers is essential to ensure that your data is accurate. However, using short links from your own website instead of the product link directly can sometimes compromise this accuracy.
In this post, I'll show you how to use custom short links with Next.js while still preserving the original referrer information.
Before diving into the code, let's go over some of the benefits of using custom short links with referrer tracking:
Here’s a simple Next.js page component that creates a customizable short link for your Gumroad product. It tracks referrers and allows custom referrer data to be passed through query parameters.
Place it in your Next.js app router directory, for example under app/v2e/page.tsx
:
The short link URL using the code above would be something like https://hilars.dev/v2e?r=optional-referrer.
Here’s a breakdown of what happens when a user opens the link:
headers
object captures the request headers, including the Referer header, which contains the URL of the page the user visited before landing on this page. If no referrer is found, the code defaults to a specific fallback URL (https://hilars.dev/v2e).?r=optional-referrer
), this takes precedence over the browser's Referer header. This feature is useful for creating custom links for different marketing campaigns.http://
or https://
. This format is required by Gumroad for tracking. In my tests, even arbitrary text works as long as it begins with http(s)://.I use short links like these to make my products easier to share on social media. It’s much simpler to share a short link like https://hilars.dev/v2e compared to a long Gumroad URL such as https://builditn0w.gumroad.com/l/chrome-manifest-v2-phaseout/BUILD.
One of the hidden advantages of hosting these short links on your own domain is the SEO benefit. Every time someone shares your link or a search engine crawls it, they’re effectively pointing back to your domain. Over time, these backlinks help improve your website’s authority and search engine ranking.
Additionally, by controlling the URL, you ensure that you have the flexibility to update the destination of the short link in the future. If you ever switch platforms from Gumroad or update the product page, you can simply update the redirect target without losing traffic.