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

      How to install the Serverside Hybrid Universal Integration script

      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


      Step 1: Implement script on All pages

      Step 2: Implement onLoad event when email is available.

      Step 3: Implement setEmail event to capture email when using a third-party checkout.

      Step 4: Confirming 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', // The ProfitMetrics website 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', // The ProfitMetrics website ID
        emailInputSelector: '.class-name', // finds email input fields
        }
        </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', // The ProfitMetrics website ID
        emailInputSelector: '.email, .signup_email, #newsletter-input-email', // finds email input fields
        }
        }
        </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', // The ProfitMetrics website ID
        emailInputSelector: '.class-name', // finds email input fields
        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-->

      Part 2: Implement onLoad event when email is available.

      1. 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', // The ProfitMetrics website ID
        emailInputSelector: '.class-name', // finds email input fields
        cookieStatisticsConsent: true/false, // Replace with boolean value
        cookieMarketingConsent: true/false, // Replace with boolean value
        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-->

      Part 3: 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 4: Debugging and confirming 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"}