Capturing Accurate GTM Referral: Custom Variable for API Redirect

With customer data acquisition being the name of the game today, it’s not uncommon for websites to have different forms on different pages that all share the same form IDs — for example, on “Contact Us” pages, “About Us” pages, and “Get a Quote” pages.

But, when all of those forms are redirected through the same API, it quickly becomes challenging to see exactly where that form data is coming from, leaving huge gaps in your customer knowledge base.

Fortunately, we’ve got a solution.

Below, we’ll explain how to track form submissions accurately in GTM using our custom referrer variable, allowing you to see from exactly which landing pages your users are filling out specific forms on your site.

Here at Inflow, we’re pros at diagnosing and solving problems like this in both GTM and GA4. For help with similar issues, or to have our experts review your account for errors, reach out to us today.

How to Create & Use the “referrer_before_thankyou” Variable

When a user fills out a form on your website, it’s often redirected through an API before landing them on a thank you page.

The problem? GTM typically picks up the last page URL the user passed through. In many cases, this is the API URL, which is not very helpful if you want to know exactly which page the user was on when they decided to fill out that form in the first place.

That’s where our GTM variable, “referrer_before_thankyou”, comes in.

It’s designed to show you the exact page a user visited before hitting the thank you page, even with those tricky API redirects.

Below, we’ll walk you through how to use it to improve your GTM tracking and referral traffic attribution.

Step 1: Create a Custom HTML Tag

In your GTM Workspace, select “Tags,” and then click the “New” button.

Open “Tag Types” by clicking on the “Tag Configuration” window.

Select “Custom HTML Tag.”

Google Tag Manager: Choose Tag Type. Custom H T M L Tag.

Name the Tag “Referrer_before_thankyou Cookie JS.” Paste the JavaScript code provided below into the HTML box as displayed in the screenshot.

This script captures and stores the last 10 pages a user has visited on the website in a “navigation stack” cookie. When a user reaches a “thank you” page, the script identifies the page they were on just before and saves it in another cookie named “referrer_before_thankyou.”

This way, even if a form redirects a user through an API, the script can still determine from which previous page the form was submitted.

<script>
function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// Try to retrieve the navigation stack from cookies
var navigationStack = getCookie('navigation_stack');
navigationStack = navigationStack ? JSON.parse(navigationStack) : [];

// Push current URL to the navigation stack
navigationStack.push(window.location.href);

// If the navigation stack is too long, remove the earliest entry
if (navigationStack.length > 10) {
    navigationStack.shift();
}

setCookie('navigation_stack', JSON.stringify(navigationStack), 1);

// On thank you page
if (window.location.pathname.includes('thank-you')) {
    var refBeforeThankYou = navigationStack[navigationStack.length - 2]; // Getting the page immediately before the current page
    if (refBeforeThankYou) {
        setCookie('referrer_before_thankyou', refBeforeThankYou, 1);
    }
}

</script>

Google Tag Manager. Tag Configuration. Tag Type: Custom H T M L. Advanced Settings. Tag firing priority: 100. Triggering: Firing Triggers, All Pages, Page View.

Lastly, set the trigger to “All Pages” and save the Tag.

Step 2: Create the ‘referrer_before_thankyou’ Variable.

In your GTM Workspace, go to “Variables” and click the “New” button.

Open “Variable Types” by clicking on the “Variable Configuration” window.

Google Tag Manager: Variable Configuration.

Choose the “First Party Cookie” variable type.

Google Tag Manager, Choose Variable Type: First-Party Cookie. The value is set to the first value of the first-party cookie with the matching name.

Name the variable “referrer_before_thankyou” and input the cookie name as “referrer_before_thankyou” in the textbox, as shown in the screenshot.

After that, click “Save,” and the variable will have been created successfully.

Google Tag Manager. Variable Configuration. Cookie Name: Referrer Before Thank You.

Step 3: Test the Setup in Preview Mode.

With all components now configured, it’s crucial to validate the setup through GTM’s Preview mode (also known as “debug” mode).

To do this, navigate to your website. Find a form and complete a submission.

Then, hop over to GTM Preview to observe if the “referrer_before_thankyou” variable is catching the accurate page referrer URL, sidestepping the API URL. (If not, double-check that you’ve properly inputted our code!)

Putting It Into Practice: Distinguishing Between Form Submissions in GA4

With the “referrer_before_thankyou” variable in place, differentiating between two forms that share the same ID becomes straightforward in Google Tag Manager (GTM) when setting up your GA4 form tracking tags.

Here’s one common use case for our GTM referrer variable:

Imagine you have a form on both the “Contact Us” page and the “Get a Quote” page of your website, and they both go through the same API redirect after submission, leading to the same thank you page.

For the form on the “Contact Us” page, you’d set up your GA4 form tracking tag to fire based on the condition where the “referrer_before_thankyou” variable matches the URL or URL path of the “Contact Us” page.

Similarly, for the form on the “Get a Quote” page, you’d configure your GA4 tag to trigger when the “referrer_before_thankyou” variable matches the URL or URL path of the “Get a Quote” page.

By using the “referrer_before_thankyou” variable in these conditions, you ensure that even if multiple forms share the same ID and navigate through an API redirect, you’re correctly attributing the form submission to its originating page path.

This approach helps maintain data accuracy, providing you with a clear picture of user engagement across different form interactions on your website.