Serverside Hybrid Universal Integration
      Back to home
      1. Knowledge base
      2. Serverside Hybrid Universal Integration

      How to install the Serverside Hybrid Universal Integration script on your website

      Follow the steps below to install the Serverside Hybrid Universal Integration script on your website.

      The ProfitMetrics Serverside Hybrid Universal Integration is a universal integration which allows for ProfitMetrics to be implemented into any e-commerce platform that is not supported natively. The integration consists of two parts. Part 1 of the integration refers to the sending of orders to ProfitMetrics according to our documentation. Part 2 is to implement the tracking script to capture statistical and marketing-related tracking parameters from the browser and pair these with the orders.

      Alternatively, you can set it up via Google Tag Manager.
      How to install the Serverside Hybrid Universal Integration script in Google Tag Manager.

      See this article if you haven't built your integration with ProfitMetrics yet: Sending orders to profitmetrics serverside


      Part 1: Implement script on All pages

      Part 2: Implement setEmail event to capture email when using a third-party checkout.

      Part 3: Confirm the integration

      Part 1: Implement script on All pages

      When implementing the tracking script on your website it is important that you know which Consent Management Platform (CMP) you are using. ProfitMetrics script automatically supports the following platforms:

      Supported Consent Management Platforms (CMP):

      • Cookieinformation.com
      • Cookiebot.com
      • DanDomain / SmartWeb / ScanNet / WannaFind / HostedShop

      1. Copy the following script and place it the <head></head> section of your website. Remember to replace PUBLIC_ID with your Public ID found in ProfitMetrics under Websites and replace .class-name as described in the next step.

        <!-- ProfitMetrics snippet START-->
        <script>
        window.profitMetrics = {
        pid: 'PUBLIC_ID', // Your Public ID
        }
        </script>
        <script src="https://cdn1.profitmetrics.io/PUBLIC_ID/bundle.js"
        defer></script>
        <!-- ProfitMetrics snippet END-->
      2. The next step is to add the emailInputSelector field like this:
        <!-- ProfitMetrics snippet START-->
        <script>
        window.profitMetrics = {
        pid: 'PUBLIC_ID', // Your Public ID
        emailInputSelector: '.class-name', // Email input CCS selector
        }
        </script>
        <script src="https://cdn1.profitmetrics.io/PUBLIC_ID/bundle.js"
        defer></script>
        <!-- ProfitMetrics snippet END-->
        Replace ".class-name" with a comma-separated list of the CSS selectors of those email input fields. You can right-click and inspect the field or you can use a tool like Selector gadget to quickly click and identify the correct CSS selctor.

        Skærmbillede 2024-01-19 kl. 14.07.46How to Copy an Email Address on a Website - Step 2
        How to Copy an Email Address on a Website - Step 11 (1)

        Final Example: 
        <script>
        window.profitMetrics = {
        pid: 'PUBLIC_ID', // Your Public ID
        emailInputSelector: '.email, .signup_email, #newsletter-input-email', // Email input CCS selector
        }
        }
        </script>
        <script src="https://cdn1.profitmetrics.io/PUBLIC_ID/bundle.js"
        defer></script>
        <!-- ProfitMetrics snippet END-->

      3. If you do not use any of the natively support Consent Management Platforms (CMP) or wish to manually control consent you can add the following two lines and replace true/false with a boolean value depending on the consent state. This script can also be loaded multiple times as consent change but remember to load the bundle.js every time.

        <!-- ProfitMetrics snippet START-->
        <script>
        window.profitMetrics = {
        pid: 'PUBLIC_ID', // Your Public ID
        emailInputSelector: '.class-name', // Email input CCS selector
        cookieStatisticsConsent: true/false, // Replace with boolean value
        cookieMarketingConsent: true/false, // Replace with boolean value
        }
        </script>
        <script src="https://cdn1.profitmetrics.io/PUBLIC_ID/bundle.js"
        defer></script>
        <!-- ProfitMetrics snippet END-->
      4. OPTIONAL: Set cookieDomain to your TLD (Top-level domain) to enable cross-domain tracking for headless implementations and third-party checkouts. Remember to add a '.' before the domain. 

        Warning: Enableing this might cause issues if your site uses a subdomain structure for different countries or languages like en.example.com

        <!-- ProfitMetrics snippet START-->
        <script>
        window.profitMetrics = {
        pid: 'PUBLIC_ID', // Your Public ID
        emailInputSelector: '.class-name', // Email input CCS selector
        cookieStatisticsConsent: true/false, // Replace with boolean value
        cookieMarketingConsent: true/false, // Replace with boolean value
        cookieDomain: null, // Your top-level domain
        }
        </script>
        <script src="https://cdn1.profitmetrics.io/PUBLIC_ID/bundle.js"
        defer></script>
        <!-- ProfitMetrics snippet END-->
        Example: cookieDomain: '.example.com',
      5. Copy and paste the onLoad event and paste it into the script on pages where the customer email is available. This usually includes order confirmation, login, and newsletter signup.
        onLoad event: 
        onLoad: () => {
           const email = 'EMAIL'; // Replace with customer email
           if (email && email.includes('@') && email.includes('.') && !/\s/.test(email)) {
              profitMetrics.setEmail(email);
           }
        }

        Example:

        <!-- ProfitMetrics snippet START-->
        <script>
        window.profitMetrics = {
        pid: 'PUBLIC_ID', // Your Public ID
        emailInputSelector: '.class-name', // Email input CCS selector
        cookieStatisticsConsent: true/false, // Replace with boolean value
        cookieMarketingConsent: true/false, // Replace with boolean value
        cookieDomain: null, // Your top-level domain
        onLoad: () => {
           const email = 'EMAIL'; // Replace with customer email
           if (email && email.includes('@') && email.includes('.') && !/\s/.test(email)) {
             profitMetrics.setEmail(email);
           }
        }
        }
        </script>
        <script src="https://cdn1.profitmetrics.io/PUBLIC_ID/bundle.js"
        defer></script>
        <!-- ProfitMetrics snippet END-->

         

      6. FOR KLARNA: Add the following code to ensure we can get the email from within Klarna Checkout 
        (function() { const init = () => window._klarnaCheckout(api => api.on({ change: data => { if (data.email) { profitMetrics.setEmail(data.email); } } }) ); if (typeof window._klarnaCheckout === 'function') { init(); } else if ([...document.scripts].some(s => s.textContent.includes('_klarnaCheckout'))) { const interval = setInterval(() => { if (typeof window._klarnaCheckout === 'function') { clearInterval(interval); init(); } }, 100); } })();

        Example:

        <!-- ProfitMetrics snippet START-->
        <script>
        window.profitMetrics = {
        pid: 'PUBLIC_ID', // Your Public ID
        emailInputSelector: '.class-name', // Email input CCS selector
        cookieStatisticsConsent: true/false, // Replace with boolean value
        cookieMarketingConsent: true/false, // Replace with boolean value
        cookieDomain: null, // Your top-level domain
        onLoad: () => {
           const email = 'EMAIL'; // Replace with customer email
           if (email && email.includes('@') && email.includes('.') && !/\s/.test(email)) {
             profitMetrics.setEmail(email);
           }
        }
        }

        (function() { const init = () => window._klarnaCheckout(api => api.on({ change: data => { if (data.email) { profitMetrics.setEmail(data.email); } } }) ); if (typeof window._klarnaCheckout === 'function') { init(); } else if ([...document.scripts].some(s => s.textContent.includes('_klarnaCheckout'))) { const interval = setInterval(() => { if (typeof window._klarnaCheckout === 'function') { clearInterval(interval); init(); } }, 100); } })();

        </script>
        <script src="https://cdn1.profitmetrics.io/PUBLIC_ID/bundle.js"
        defer></script>
        <!-- ProfitMetrics snippet END-->

      Part 2: OPTIONAL: Implement setEmail event to capture email when using a third-party checkout.

      1. Copy the following script and paste it AFTER the main script on the order confirmation page and replace example@example.com with a variable containing the customer email. The script will retry to set the customer email every 500 milliseconds ontil the email becomes available. 
        <!-- Start ProfitMetrics - setEmail -->
        <script>
            function _pm_tryemailorderconfirmation() {
                if (null != window.profitMetrics && null != window.profitMetrics.setEmail && typeof window.profitMetrics.setEmail === 'function') {
                    window.profitMetrics.setEmail('example@example.com');
                } else {
                    setTimeout(_pm_tryemailorderconfirmation, 500);
                }
            }
            _pm_tryemailorderconfirmation();
        </script>
        <!-- End ProfitMetrics - setEmail -->

      Part 3: Confirm the integration

      1. Check if the pmStorage cookie exists.
      2. Create a test order and complete it. On the order confirmation page, check if the pmStorage cookie has an "etid" value and / or if the "em" value contains you email. The cookie value should look like this: 
        {"etid":172978336,"pid":"A1B2C3D4E5F6G7H8","referer":null,"cc_statistics":true,"cc_marketing":true,"gacid":"GA1.1.1608251768.1705563035","gacid_source":"gacookie","uid":null,"gclid":null,"fbp":"fb.1.1705563034698.1103141032","fbc":null,"cip":"0.0.0.0","gbraid":"","wbraid":"","ga4SessionId":"5DP76XVKEZ:1705568293","ga4SessionNumber":"DP76XVKEZ5:2","em_md5":null,"em_sha256":null,"em":"example@example.com"}