Contact Support
Guides

Headless Implementation FAQ

Suggest Edits

Overview

This article covers the most commonly asked questions about using Elevar with headless websites, including setup requirements, tracking issues, and troubleshooting strategies.

What Does “Headless” Mean?

A headless website is one where the front end (what users see) is decoupled from the back end (where the data and business logic live). Unlike traditional websites—where both layers are tightly connected—headless sites can use any framework for the front end and communicate with the back end via APIs.

If you'd like to learn more about headless concepts in general, check out the following articles:

What’s Different About Auditing a Headless Site?

Most auditing steps are the same as a traditional Shopify store, with two key differences:

  • We must audit for common headless tracking issues (see the section Common Tracking Issues below).
  • Your development team needs to build and implement a custom Data Layer on all non-checkout pages.

How Is Work Divided Between My Team and Elevar?

Your Team Is Responsible For:

  • Implementing a custom Data Layer across all non-checkout pages.
  • Ensuring compatibility with your front-end framework (React, Gatsby, Hydrogen, etc.).

Elevar Handles:

  • The Shopify checkout page Data Layer.
  • Shopify API integrations.
  • Google Tag Manager (GTM) tag configuration and QA.

Does the Elevar Chrome Extension Work on Headless Sites?

Yes, the Chrome Extension works on headless sites, but with one limitation:

  • Pageview triggers will not work because headless sites load content dynamically without full page reloads.
  • You can still use other GTM triggers: click, form submission, and element visibility.

Why Are There Additional Costs for Headless Sites?

Two primary reasons:

  • Custom QA Work: Your Data Layer implementation requires multiple rounds of review to ensure tracking accuracy.
  • Additional Troubleshooting: Headless implementations often introduce unique issues (e.g., session splitting or attribution loss) that require extra auditing.

What Are Common Tracking Issues on Headless Sites?

  • Ghost Referrals: Session splitting due to missing landing page attribution.
  • Checkout Configuration Issues: Causes inflated direct traffic.
  • Missing Ecommerce Events: Critical events like add_to_cart often go untracked without a proper Data Layer.

What Is a Ghost Referral?

Ghost referrals occur when session data is lost as a shopper navigates your headless site. This typically happens if the original referral source (e.g., Paid Search) isn't persisted through navigation events. As a result, Google Analytics may split one user into multiple sessions and incorrectly attribute conversions to Organic or Direct traffic.

How to Check for Ghost Referral Issues:

  • Begin in GA4 and navigate to to User Explorer within the Audiences settings.
  • Apply a segment with:
    • Transactions = 1
    • Sessions > 2
    • Set the date range to one day at a time (analyze 4–5 different days).
  • Look for cases where a user's source changes mid-session (e.g., from "Paid Search" to "Organic Search").

How to Fix Ghost Referrals

  • Ensure you’re using Google Tag Manager for tracking.
  • Elevar will help implement a ghost referral fix customized for your specific headless framework and routing logic.

How Can My Checkout Configuration Cause Tracking Issues?

If your checkout is built using the myshopify.com domain or uses Shopify’s Storefront API via myshopify.com/api/graphql, it may lead to:

  • High Direct Traffic: Third-party payment processors redirect users to myshopify.com thank-you pages, which breaks session attribution.
  • Facebook Domain Verification Issues: Facebook's iOS 14.5 updates require domain verification—myshopify.com cannot be verified.
  • Affiliate and 3rd-Party Cookie Loss: Many trackers rely on first-party cookies that don't persist across domains, impacting attribution and remarketing audiences.

How to Fix the myshopify.com Checkout Issue:

Shopify recommends updating your API request endpoint:

This ensures your checkout flow stays on your domain, preserving cookies, attribution, and domain verification.

Does Anything Change If I Use Shopify Hydrogen?

Not significantly, 99% of the implementation remains the same.

Exception: Shopify Hydrogen includes a script-blocking setting that may interfere with GTM or Elevar scripts. This must be disabled.

How to Do A/B Testing on a Headless Site

Since there are no true pageviews, use a custom Data Layer event (e.g., routeChange) to simulate page navigation. This custom event can then act as the activation trigger for A/B test variants.

How to Properly Generate a Checkout URL:

Avoid using the myshopify.com domain when generating checkout URLs. Using myshopify.com leads to:

  • High Direct Traffic: Thank-you pages revert to myshopify.com.
  • Facebook Domain Verification Issues: You can't authenticate myshopify.com.
  • Cookie Loss: Affiliates and other trackers won’t persist across domains.

For correct Implementation:

Updated 14 days ago