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 Custom Pixel 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.

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
   

   // Start - ProfitMetrics Serverside Hybrid Universal Integration - (v2)
   // Configuration
   const pmPublicID = 'YOUR_PUBLIC_ID'; // Your Public ID
   const pmEmailInputSelector = '.class-name'; // Comma-separated CSS Selector
   const pmEmail = event.data?.checkout?.email;
   const pmCookieDomain = ''; // Your top-level domain for cross subdomain tracking
   
   // Default consent
   let cc_statistics = true;
   let cc_marketing = true;
   
   // Update consent
   function updateConsent(){
       if (!customerPrivacyStatus || 
         customerPrivacyStatus.analyticsProcessingAllowed === undefined || 
         customerPrivacyStatus.marketingAllowed === undefined) {
       try {
         const cmp_a = browser.cookie.get('_cmp_a');
         const cookiedecoded = JSON.parse(decodeURIComponent(cmp_a));
         cc_statistics = cookiedecoded?.purposes?.a ?? cc_statistics;
         cc_marketing = cookiedecoded?.purposes?.m ?? cc_marketing;
       } catch (e) {
         // Handle any errors that might occur
       }
     } else {
       cc_statistics = customerPrivacyStatus.analyticsProcessingAllowed;
       cc_marketing = customerPrivacyStatus.marketingAllowed;
     }
   }
   
   // Load bundle.js
   function pmLoadScript() {
       window.profitMetrics = {
           pid: pmPublicID,
           cookieStatisticsConsent: cc_statistics,
           cookieMarketingConsent: cc_marketing,
           emailInputSelector: pmEmailInputSelector,
           onLoad: () => {
               if (pmEmail && pmEmail.includes('@') && pmEmail.includes('.') && !/\s/.test(pmEmail)) {
                   profitMetrics.setEmail(pmEmail);
               }
           }
       };
   
       if (pmCookieDomain) {
           window.profitMetrics.cookieDomain = pmCookieDomain.startsWith('.') ? pmCookieDomain : '.' + pmCookieDomain;
       }
   
       const script = document.createElement('script');
       script.src = `https://cdn1.profitMetrics.io/${pmPublicID}/bundle.js`;
       script.defer = true;
       script.onerror = () => console.error('Failed to load ProfitMetrics script.');
       document.head.appendChild(script);
   }
   
   // Visitor Consent Collected
   api.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
       customerPrivacyStatus = event.customerPrivacy;
       updateConsent();
       pmLoadScript();
       })
     
   // Event - Page view
   analytics.subscribe("page_viewed", async event => {
       updateConsent();
       pmLoadScript();
       });
   
   // Add payment method
   analytics.subscribe("payment_info_submitted", async event => {
       updateConsent();
       pmLoadScript();
       });
       
   // Begin checkout
   analytics.subscribe("checkout_started", async event => { 
       updateConsent();
       pmLoadScript();
       });
   
     // Event - Page view
     analytics.subscribe("checkout_completed", async event => {
       updateConsent();
       pmLoadScript();
       });
   
   // End - ProfitMetrics Serverside Hybrid Universal Integration - (v2)

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