How to enable Headless Mode in Shopify

Follow the steps below to enable headless mode for Shopify

The headless implementation for Shopify is very easy and consists of 3 parts. Please follow them carefully.

---

Part 1: Contact support@profitmetrics.io to enable headless mode

Part 2: Install the Server-side Hybrid Universal Integration tracking script on your website in one of three ways.

1. 1. Install the Serverside Hybrid Universal Integration for Custom Checkouts (Recommended for custom checkout)
   2. Install the Serverside Hybrid Universal Integration script
   3. Install the Serverside Hybrid Universal Integration script in Google Tag Manager

Part 3: Install the tracking script in Shopify

---

Part 1: Contact support@profitmetrics.io to enable headless mode

Please contact support@profitmetrics.io and send the following email:

Hi ProfitMetrics,

Please enable headless mode for our Shopify store [URL].

We will send you a confirmation as soon as it is enabled.

Part 2 a: Install the Serverside Hybrid Universal Integration for Custom Checkouts and Shopify Consent API (Recommended for custom checkouts)

<!-- Start - ProfitMetrics - Script -->
<script>
// Configuration
const pId = 'YOUR_PUBLIC_ID'; // Your Public ID
const pmEmailInputSelector = '.class-name'; // Comma-separated CSS Selector
const pmEmail = CUSTOMER_EMAIL; // Customer Email variable

let cc_marketing = true;
let cc_statistics = true;

function pmLoadScript() {
    window.profitMetrics = {
        pid: pId,
        cookieStatisticsConsent: cc_statistics,
        cookieMarketingConsent: cc_marketing,
        emailInputSelector: pmEmailInputSelector,
        onLoad: () => {
            if (pmEmail && pmEmail.includes('@') && pmEmail.includes('.') && !/\s/.test(pmEmail)) {
                profitMetrics.setEmail(pmEmail);
            }
        }
    };
    const script = document.createElement('script');
    script.src = `https://cdn1.profitMetrics.io/${pId}/bundle.js`;
    script.defer = true;
    script.onerror = () => console.error('Failed to load ProfitMetrics script.');
    document.head.appendChild(script);
}

function getCookieValue(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i].trim();
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length);
    }
    return null;
}

try {
    const encodedCookieValue = getCookieValue('_cmp_a');
    if (encodedCookieValue) {
        const cookieValue = decodeURIComponent(encodedCookieValue);
        const cookieDecoded = JSON.parse(cookieValue);
        cc_statistics = cookieDecoded?.purposes?.a ?? false;
        cc_marketing = cookieDecoded?.purposes?.m ?? false;
    }
} catch (e) {
    console.error('Error parsing cookie:', e);
}

pmLoadScript();
</script>
<!-- End - ProfitMetrics - Script -->

 

Part 3: Install the tracking script in Shopify

1. Click Settings
   
2. Click "Custom event"
   
3. Click "Add custom pixel"
   
4. Set consent to now required and data not qualify as data sale
5. Type "PM - Headless mode" in Pixel name and click Add pixel
   
6. Copy and paste the following script. Remember to replace PUBLIC_ID with your actual Public ID found in ProfitMetrics > Website
   

   // Configuration
   const PublicID = 'PUBLIC ID'; // Your Public ID
   const pmCookieDomain = null; // Your TLD (Top-level domain) 'example.com' 
   let pmEmail = event.data?.checkout?.email;
   let customerPrivacyStatus = init.customerPrivacy;
   
   // Default consent values
   let cc_statistics = true;
   let cc_marketing = true;
   
   // Function to load the ProfitMetrics script
   async function pmLoadScript() {
     
       window.profitMetrics = {
           pid: PublicID,
           cookieStatisticsConsent: cc_statistics,
           cookieMarketingConsent: cc_marketing,
           onLoad: async function() {
               if (pmEmail && pmEmail.includes('@') && pmEmail.includes('.') && !/\s/.test(pmEmail)) {
                   window.profitMetrics.setEmail(pmEmail);
               }
           }
       };
       
       if (pmCookieDomain){
         window.profitMetrics.cookieDomain = pmCookieDomain.startsWith('.') ? pmCookieDomain : '.' + pmCookieDomain;
       }
   
   
       const script = document.createElement('script');
       script.src = `https://cdn1.profitmetrics.io/${PublicID}/bundle.js`;
       script.defer = true;
       script.onerror = () => console.error('Failed to load ProfitMetrics script.');
       document.head.appendChild(script);
   }
   
   // Subscriptions to analytics events
   analytics.subscribe("page_viewed", async (event) => {
       cc_statistics = customerPrivacyStatus.analyticsProcessingAllowed;
       cc_marketing = customerPrivacyStatus.marketingAllowed;
       await pmLoadScript();
   });
   
   analytics.subscribe("checkout_completed", async (event) => {
       cc_statistics = customerPrivacyStatus.analyticsProcessingAllowed;
       cc_marketing = customerPrivacyStatus.marketingAllowed;
       pmEmail = event.data?.checkout?.email;
       await pmLoadScript();
   });
   
   analytics.subscribe("payment_info_submitted", async (event) => {
       cc_statistics = customerPrivacyStatus.analyticsProcessingAllowed;
       cc_marketing = customerPrivacyStatus.marketingAllowed;
       pmEmail = event.data?.checkout?.email;
       await pmLoadScript();
   });
   
   analytics.subscribe("checkout_shipping_info_submitted", async (event) => {
       cc_statistics = customerPrivacyStatus.analyticsProcessingAllowed;
       cc_marketing = customerPrivacyStatus.marketingAllowed;
       pmEmail = event.data?.checkout?.email;
       await pmLoadScript();
   });
   
   analytics.subscribe("checkout_address_info_submitted", async (event) => {
       cc_statistics = customerPrivacyStatus.analyticsProcessingAllowed;
       cc_marketing = customerPrivacyStatus.marketingAllowed;
       pmEmail = event.data?.checkout?.email;
       await pmLoadScript();
   });
   
   analytics.subscribe("checkout_contact_info_submitted", async (event) => {
       cc_statistics = customerPrivacyStatus.analyticsProcessingAllowed;
       cc_marketing = customerPrivacyStatus.marketingAllowed;
       pmEmail = event.data?.checkout?.email;
       await pmLoadScript();
   });
   
   // Handling visitor consent changes
   api.customerPrivacy.subscribe('visitorConsentCollected', async (event) => {
       if ((cc_statistics === false && cc_statistics !== event.customerPrivacy.analyticsProcessingAllowed) ||
           (cc_marketing === false && cc_marketing !== event.customerPrivacy.marketingAllowed)) {
           cc_statistics = event.customerPrivacy.analyticsProcessingAllowed;
           cc_marketing = event.customerPrivacy.marketingAllowed;
           await pmLoadScript();
       }
   });

   
7. Click Save
   
8. Click Add Custom pixel, and connect again
   
   

Special code for loading Cookiebot inside Custom pixel

// Part 1 - LOAD COOKIEBOT AND SET CONSENT FOR PROFITMETRICS

// Define the Cookiebot ID at the top for easy configuration
const cookiebotID = "YOUR_COOKIEBOT_ID";  // Replace with your actual Cookiebot ID

// Inject the Cookiebot script and handle consent updates
injectCookiebotScript();

// Function to inject the Cookiebot script
function injectCookiebotScript() {
    var script = document.createElement("script");
    script.id = "Cookiebot";
    script.src = `https://consent.cookiebot.com/uc.js`;
    script.setAttribute("data-cbid", cookiebotID);  // Use the cookiebotID variable
    script.type = "text/javascript";
    script.defer = true;

    document.head.appendChild(script);

    // Listen for Cookiebot consent updates
    document.addEventListener("CookiebotOnConsentReady", async function () {
        if (window.Cookiebot && Cookiebot.consent) {
            const C = Cookiebot.consent;
            await loadProfitMetricsWithCookiebotConsent(C);
        }
    });
}

// Part 2 - Load ProfitMetrics with Cookiebot Consent

// Configuration
const PublicID = 'YOUR_PUBLIC_ID'; // Your Public ID
const pmCookieDomain = null; // Your TLD 'example.io'
let pmEmail = null;

// Function to load the ProfitMetrics script with Cookiebot consent
async function loadProfitMetricsWithCookiebotConsent(cookiebotConsent) {
    const cc_statistics = cookiebotConsent.statistics || false;
    const cc_marketing = cookiebotConsent.marketing || false;

    window.profitMetrics = {
        pid: PublicID,
        cookieStatisticsConsent: cc_statistics,
        cookieMarketingConsent: cc_marketing,
        onLoad: async function() {
            if (pmEmail && pmEmail.includes('@') && pmEmail.includes('.') && !/\s/.test(pmEmail)) {
                window.profitMetrics.setEmail(pmEmail);
            }
        }
    };
    
    if (pmCookieDomain) {
        window.profitMetrics.cookieDomain = pmCookieDomain.startsWith('.') ? pmCookieDomain : '.' + pmCookieDomain;
    }

    const script = document.createElement('script');
    script.src = `https://cdn1.profitmetrics.io/${PublicID}/bundle.js`;
    script.defer = true;
    script.onerror = () => {}; // No error log
    document.head.appendChild(script);
}

// Subscriptions to analytics events
analytics.subscribe("page_viewed", async (event) => {
    pmEmail = event.data?.checkout?.email;
    await loadProfitMetricsWithCookiebotConsent(Cookiebot.consent);
});

analytics.subscribe("checkout_completed", async (event) => {
    pmEmail = event.data?.checkout?.email;
    await loadProfitMetricsWithCookiebotConsent(Cookiebot.consent);
});

analytics.subscribe("payment_info_submitted", async (event) => {
    pmEmail = event.data?.checkout?.email;
    await loadProfitMetricsWithCookiebotConsent(Cookiebot.consent);
});

analytics.subscribe("checkout_shipping_info_submitted", async (event) => {
    pmEmail = event.data?.checkout?.email;
    await loadProfitMetricsWithCookiebotConsent(Cookiebot.consent);
});

analytics.subscribe("checkout_address_info_submitted", async (event) => {
    pmEmail = event.data?.checkout?.email;
    await loadProfitMetricsWithCookiebotConsent(Cookiebot.consent);
});

analytics.subscribe("checkout_contact_info_submitted", async (event) => {
    pmEmail = event.data?.checkout?.email;
    await loadProfitMetricsWithCookiebotConsent(Cookiebot.consent);
});

// Handling visitor consent changes
api.customerPrivacy.subscribe('visitorConsentCollected', async (event) => {
    await loadProfitMetricsWithCookiebotConsent(Cookiebot.consent);
});