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: Modify Klarna Checkout (Only required for customers using Klarna Checkout)

Part 4: 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

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-->

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.46

How to Copy an Email Address on a Website - Step 2

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-->

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-->

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',

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-->

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

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: Modify Klarna checkout iframe

If you are using Klarna checout the customer email is stored within an iFrame and not easily accessibly. You need to modify the Klarna checkout iFrame to call the setEmail function.

Copy the code below

window._klarnaCheckout(function(api) {
     api.on({
          'change': function(data) {
               profitMetrics.setEmail( data.email );
          }
     });
});

Paste it inside the Klarna Checkout iFrame. If you use an app, plugin or module to load the Klarna checkout you might need ti implement this in a different way. Contact ProfitMetrics and / or Klarna support for help

Part 4: Confirm the integration

Check if the pmStorage cookie exists.

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"}