Understanding user behavior across different domains is essential for businesses aiming to provide a seamless user experience on their digital platforms. Amplitude’s cross-domain tracking feature enables businesses to track anonymous user behavior across multiple domains by leveraging device IDs. This guide will walk you through setting up cross-domain tracking between two sites, using a practical example of a main website and a subdomain application, focusing on passing the deviceId through URL parameters.

What You Need to Know

Amplitude identifies anonymous users by their device IDs, which need to be passed between domains during navigation. For successful cross-domain tracking, the device ID generated on Site 1 must be transferred to Site 2 as a URL parameter. The Amplitude SDK on Site 2 can automatically parse this deviceId if it’s included in the URL query parameters.

Here’s an overview of the process:

1. On Site 1 (Source): Identify the user’s device ID using Amplitude’s getDeviceId() function.
2. Navigation: Pass the device ID to Site 2 via a URL parameter when the user clicks a call-to-action (CTA) button.
3. On Site 2 (Destination): Initialize the Amplitude SDK, which will automatically use the deviceId from the URL if provided.

Implementing on Site 1

Step 1: Identifying CTA Buttons

First, ensure all relevant CTA buttons on your website (Site 1) have a specific class for easy identification. If you’re using a web builder like Webflow, you can do this by selecting each CTA button and adding a class name in the style panel, such as cta-button.

Step 2: Attaching Event Listeners

Next, attach an event listener to each CTA button that triggers when the user clicks on it. This event listener will execute a function to pass the deviceId to Site 2.

<script>
document.querySelectorAll('.cta-button').forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault(); // Prevent the default action
var deviceId = amplitude.getInstance().getDeviceId(); // Get the device ID
var destinationUrl = this.getAttribute('href') + "?deviceId=" + encodeURIComponent(deviceId); // Append the device ID to the URL
window.location.href = destinationUrl; // Redirect the user to Site 2
});
});
</script>

Implementing on Site 2

On Site 2 (the destination), ensure the Amplitude SDK is initialized correctly to automatically fetch the deviceId from the URL parameters.

amplitude.getInstance().init('YOUR_API_KEY');

If the deviceId is present in the URL, the SDK will automatically use it, allowing for consistent tracking across domains.

Example Scenario: Webflow Website to a Subdomain App

Imagine you have a main marketing website hosted on Webflow (www.example.com) and an application on a subdomain (app.example.com). You want to track user interactions starting from the marketing website to the application seamlessly.

On the Webflow site, you identify all CTA buttons leading to the app and add a cta-button class. Using the provided JavaScript code, you modify the CTA button’s behavior to append the deviceId to the destination URL.

On the subdomain app, ensure the Amplitude SDK is initialized as shown above. As users arrive at your app from the marketing website, their interactions continue to be tracked under the same deviceId, providing a unified view of their journey in your Amplitude dashboard.

Conclusion

Cross-domain tracking with Amplitude enhances your ability to understand user behavior across different domains, offering insights into the user journey from initial engagement to conversion. By following the steps outlined in this guide, you can set up a seamless tracking system that captures user interactions accurately, helping you make informed decisions based on comprehensive data.

This method ensures that user engagement is meticulously tracked across domains, providing valuable insights into user behavior and interaction patterns.