Page location doesn’t match real locations Shopify checkout

Edited

When you set up a client-side trigger with a pageview on a specific link like /checkout, Shopify might generate a dynamic link. This can reduce your control over tracking and cause various checkout links to be inaccurately reported in GA4.

Situation

For example, instead of the expected URL like: https://test.io/checkouts/cn/Z2NwLWV1cm9wZS13ZXN0NDowMUo0VlJCM01UNFg3MDNLQlRINzQyUENURw/information?locale=de

The page location might appear as:
https://test.io/wpm@7b1a351bw93483290pb097165dm8e75d0b4/custom/web-pixel-112722265@9/sandbox/modern/checkouts/cnZ2NwLWV1cm9wZS13ZXN0NDowMUo0VlJCM01UNFg3MDNLQlRINzQyUEN.

This causes tracking issues and makes it difficult to accurately measure checkout activities in Google Analytics 4.

Solution

To resolve this issue in GA4 via Google Tag Manager (GTM), follow these steps:

Step 1: Create a New Variable in GTM

    1.    Go to your GTM container.

    2.    Click Variables in the left-hand menu.

    3.    Click New.

    4.    Choose Custom JavaScript.

Step 2: Add the Custom JavaScript Function

Paste the following code:

function() {
    var currentUrl = window.location.href;
    var sandboxPattern = /\/wpm@[a-zA-Z0-9]+\/custom\/web-pixel-\d+@[a-zA-Z0-9]+\/sandbox\/modern/;

    if (sandboxPattern.test(currentUrl)) {
        return currentUrl.replace(sandboxPattern, '');
    } else {
        return currentUrl;
    }
}

    1.    Name the variable, for example, Page Location.

    2.    Save the variable.

Step 3: Update the GA4 Tag

    1.    Go to your GA4 configuration tag in GTM.

    2.    In the Fields to Set section, add a new field.

    3.    Enter page_location as the field name.

    4.    Select the Page Location variable you just created.

    5.    Save the changes and publish your container.

Step 4: Test

Use GTM’s preview mode to test your implementation. Verify that the modified URL is sent correctly as page_location in your GA4 tag. This ensures the dynamic elements are removed and your tracking is consistent and accurate.

This fix adjusts the original page_location value before sending it to GA4, ensuring correct and uniform tracking of your Shopify checkout process.