# Shopify

### What is the Shopify Custom Pixel <a href="#what-is-the-shopify-custom-pixel" id="what-is-the-shopify-custom-pixel"></a>

Shopify Custom Pixel is a feature that allows merchants to create and integrate custom tracking pixels on their Shopify store. These pixels help track specific events, user behavior, and conversions, providing valuable data for analytics and marketing purposes. Unlike standard pixels, custom pixels offer greater flexibility, enabling merchants to tailor their tracking to meet specific business needs or integrate with third-party services not natively supported by Shopify. This feature is particularly useful for advanced marketing strategies and detailed customer insights.

To get started swiftly, ensure you have the following prerequisites:

* Shopify Site
* JENTIS Account
* At least one container within the JENTIS Account

### Installation Steps <a href="#installation-steps" id="installation-steps"></a>

#### Shopify Store: Custom Pixel <a href="#shopify-store-custom-pixel" id="shopify-store-custom-pixel"></a>

1. **Log into your Shopify account.**
2. Navigate to **Settings > Customer Events.**
3. Press **Add custom pixel** and define a good name f.e. **JENTIS**.
4. Set the settings the following way:

<figure><img src="/files/IKUXebeuvYbnvYrd9Tjk" alt=""><figcaption></figcaption></figure>

5. Add in the Codeblock the following code:

{% code overflow="wrap" lineNumbers="true" %}

```javascript
window.jentisApp = window.jentisApp || {};
//Instruct JENTIS to set all cookies via an alternative method.
window.jentisApp.cookieSettingMethod = window.jentisApp.cookieSettingMethod || setShopifyCookie;

window.jentis = window.jentis || {};
window.jentis.shopifyApp = window.jentis.shopifyApp || {};
window.jentis.shopifyApp.isJentisLoaded = false;
window.jentis.shopifyApp.dcp = window.jentis.shopifyApp.dcp || {};

// Please adapt the DCP-Configuration to your needs!
window.jentis.shopifyApp.dcp.domain = "intercontinentalgrid.org";
window.jentis.shopifyApp.dcp.hash = "9sc4rl";
window.jentis.shopifyApp.dcp.short = "shopify-teststore-001";
window.jentis.shopifyApp.dcp.filehash = "gbujzl";
window.jentis.shopifyApp.dcp.environment= "live";

window.jentis.shopifyApp.analytics = window.jentis.shopifyApp.analytics || [];
window.jentis.shopifyApp.customerPrivacy = window.jentis.shopifyApp.customerPrivacy || [];
window.jentis.shopifyApp.createObservableArray = function(baseArray) {
    var observableArray = {
        array: baseArray,
        observers: []
    };
    
    observableArray.addObserver = function(observer) {
        this.observers.push(observer);
        for (var i = 0; i < this.array.length; i++) {
            observer(this.array[i]);
        }
    };
    
    observableArray.push = function() {
        var items = Array.prototype.slice.call(arguments);
        var result = Array.prototype.push.apply(this.array, items);
        for (var i = 0; i < this.observers.length; i++) {
            this.observers[i].apply(null, items);
        }
        return result;
    };
    
    return observableArray;
}

window.jentis.shopifyApp.customerPrivacy = window.jentis.shopifyApp.createObservableArray(window.jentis.shopifyApp.customerPrivacy);
window.jentis.shopifyApp.analytics = window.jentis.shopifyApp.createObservableArray(window.jentis.shopifyApp.analytics);

this.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
    window.jentis.shopifyApp.customerPrivacy.push(event);
});

var initialPrivacy = init && init.customerPrivacy;
if (initialPrivacy) {
    window.jentis.shopifyApp.customerPrivacy.push({
        customerPrivacy: initialPrivacy
    });
}

analytics.subscribe('all_events', (event) => {
  window.jentis.shopifyApp.analytics.push(event);
});

window.jentis.shopifyApp.loadJENTISScript = function() {
    (function(cdnBaseUrl, projectId, workspace, version) {
        var PKEY = "jts_preview_version";
        var V = "_";

        try {
            version = window.sessionStorage.getItem(PKEY)|| window.localStorage.getItem(PKEY) || version;
        } catch (e) {}

        var hasVersion = version !== V;
        var cdnhost = hasVersion ? cdnBaseUrl + "/get/" + workspace + "/web/" + version + "/" : cdnBaseUrl + "/";
        var env = hasVersion || workspace === "live" ? "" : "?env=" + workspace;

        window.jentis = window.jentis || {};
        window.jentis.config = window.jentis.config || {};

        var cfg = window.jentis.config.frontend = window.jentis.config.frontend || {};
        cfg.cdnhost  = cdnhost;
        cfg.vers     = version;
        cfg.env      = workspace;
        cfg.project  = projectId;
        cfg.version = "2";

        window._jts = window._jts || [];

        var f = document.getElementsByTagName("script")[0];
        var j = document.createElement("script");
        j.async = true;
        j.src = cdnhost + window.jentis.shopifyApp.dcp.filehash + ".js" + env;
        f.parentNode.insertBefore(j, f);

    })("https://" + window.jentis.shopifyApp.dcp.hash + "." + window.jentis.shopifyApp.dcp.domain,window.jentis.shopifyApp.dcp.short,window.jentis.shopifyApp.dcp.environment, "_");
}

function setupJentisTrackingCode() {

    if (
        typeof window.jentis.shopifyApp.isJentisLoaded !== 'undefined' &&
        !window.jentis.shopifyApp.isJentisLoaded
    ){
        window.jentis.shopifyApp.loadJENTISScript();
        window.jentis.shopifyApp.isJentisLoaded = true;
    }
}

function setShopifyCookie(cookie){
    if(
        typeof browser !== 'undefined' &&
        typeof browser.cookie !== 'undefined' &&
        typeof browser.cookie.set === 'function'
    ){
        browser.cookie.set(cookie);
    }
}

setupJentisTrackingCode();
```

{% endcode %}

In the previous code, make sure to replace the following values with the according values from your container settings:

```javascript
// Please adapt the DCP-Configuration to your needs!
window.jentis.shopifyApp.dcp.domain = "intercontinentalgrid.org";
window.jentis.shopifyApp.dcp.hash = "9sc4rl";
window.jentis.shopifyApp.dcp.short = "shopify-teststore-001";
window.jentis.shopifyApp.dcp.filehash = "gbujzl";
window.jentis.shopifyApp.dcp.environment= "live";
```

You can find your container settings in your JENTIS platform under **Settings > Containers.**

<figure><img src="/files/rFOefOpg8mxSsNNmnpt9" alt=""><figcaption></figcaption></figure>

6. **Save** the custom pixel.

#### JENTIS Platform: Install the Shopify Plugin <a href="#jentis-platform-install-the-shopify-plugin" id="jentis-platform-install-the-shopify-plugin"></a>

1. Open your JENTIS platform and navigate to **Server Tag Manager > Plugins.**
2. Click on **Add New Plugin**.
3. Select the **Shopify Datalayer-Bridge**.
4. Define a good **name** and connect it to the right **container.**

#### JENTIS Platform: Create a Variable <a href="#jentis-platform-create-a-variable" id="jentis-platform-create-a-variable"></a>

In the JENTIS Platform, you might need to create an additional variable to retrieve the correct currency from the webpage.

By default, Tools in JENTIS use the Currency global variable. The value (e.g., EUR) set into this global variable is a constant available for all tools in the same Container.

However, based on the visitor's browser localization, your webpage could automatically change prices and currencies on product-related pages. For example, a user visiting [www.example.de](http://www.example.de/) from the United Kingdom, but instead of redirecting to the UK domain, Shopify changes the currency from EUR to GBP and the prices accordingly. The global currency variable will still give EUR, leading to data discrepancies in your analytics tools.

To overcome this situation, you must use the following code to create a Client-side Javascript variable that will dynamically retrieve the most up-to-date currency value from the webpage.

In your JENTIS Platform, go to **Server Tag Manager** → **Variables**. Click on **Add New Variable** → **Client-side** → **Client-side Javascript Code**, and copy-paste the following code:

```javascript
function(oArgs){
   
  if (
    typeof window.ShopifyAnalytics !== "undefined" &&
    typeof window.ShopifyAnalytics.meta !== "undefined" &&
    typeof window.ShopifyAnalytics.meta.currency !== "undefined"
  ){
    return window.ShopifyAnalytics.meta.currency;
  }
  
  if (
    typeof window.Shopify !== "undefined" &&
    typeof window.Shopify.currency !== "undefined" &&
    typeof window.Shopify.currency.active !== "undefined"
  ){
    return window.Shopify.currency.active;
  }
  
function findKey(obj, targetKey) {
  if (typeof obj !== 'object' || obj === null) return null;

  for (var key in obj) {
    if (key === targetKey) {
      return obj[key];
    }

    if (typeof obj[key] === 'object') {
      var result = findKey(obj[key], targetKey);
      if (result !== null) return result;
    }
  }

  return null;
}
  
  var allProducts = window.jentis.tracker.getDatalayer(true, "product");
  if (typeof allProducts !== "undefined" && allProducts.length > 0) {
    var result = "";
    
    for (var i = 0; i < allProducts.length; i++) {
      if ( typeof allProducts[i].shopify !== "undefined" ) {
        result = findKey(allProducts[i].shopify, "currencyCode") || "";
        if (result){
         return result;
        }
      }
    }
    
  }

  if(typeof oArgs.accountvars.currency !== "undefined") {
    return oArgs.accountvars.currency;
  };

  return "";
}
```

Make sure to click the ‘**Add**' button.

Use this variable to replace the default Currency global variable in all the necessary Tags. If you are satisfied with the outcome, **publish your changes**.

#### JENTIS Platform: Connect the CMP-Bridge <a href="#jentis-platform-connect-the-cmp-bridge" id="jentis-platform-connect-the-cmp-bridge"></a>

{% hint style="danger" %}
**The JENTIS CMP-Bridge** serves as a connector that transfers consent from the main website's consent banner via the Customer Privacy API to the Shopify Sandbox environment. This means you will still need to use your preferred CMP (e.g., Cookiebot) on the Shopify website and extend it with custom code to integrate the Customer Privacy API, as documented by your CMP vendor (e.g., [Cookiebot Shopify Installation Guide](https://support.cookiebot.com/hc/en-us/articles/360006184253-Shopify-installation)).
{% endhint %}

In the JENTIS Shopify CMP-Bridge, you need to configure which vendors are linked to specific Customer Privacy API groups as passed by your original CMP vendor on the page. This ensures proper consent synchronization and adherence to your privacy configuration.

1. Open your JENTIS platform and navigate to **Legal Hub** → **Consentbars.**
2. Connect the **Shopify** CMP-Bridge with the **container**.
3. Afterward, open the corresponding vendors under **Legal Hub** → **Vendors** and edit the CMP-Settings.
   1. Predefined Vendor Categories are analytics, marketing, and preferences.

### Tracked Events by the Shopify Plugin: <a href="#tracked-events-by-the-shopify-plugin" id="tracked-events-by-the-shopify-plugin"></a>

The Shopify Plugin automatically tracks the following events:

* `pageview`
* `search`
* `cartview`
* `productlist`
* `productview`
* `addtocart`
* `removefromcart`
* `checkout`
* `order`

This comprehensive tracking allows you to gain valuable insights into your Shopify store's performance.

### Technical Information <a href="#technical-information" id="technical-information"></a>

#### Preview Mode <a href="#preview-mode" id="preview-mode"></a>

To run the preview mode, copy and paste your debug link from the preview session into the browser and execute it. After the page has loaded, remove all preview link URL parameters and reload the page. The preview should now load correctly. If not, please reload the page again.

#### How to access the custom\_event information? <a href="#how-to-access-the-custom_event-information" id="how-to-access-the-custom_event-information"></a>

We have added a property called 'shopify' to all JENTIS DataLayer commands. This property contains the original event information passed from Shopify. If certain information is not provided in the default JENTIS DataLayer, you can access the 'shopify' property to retrieve the necessary details yourself.

#### Current URL

In custom pixel you can only get a deviated URL: `document.location.href = "https://yourshop.myshopify.com/web-pixels@0e8c7c7aw41bd75a1p837d7fd4m8b145375/custom/web-pixel-129040453@22/sandbox/modern/collections/all"`

However an easy and general solution is to create a variable to return the correct URL: `window.location.protocol + "//" + window.location.hostname + window.location.search`

### Q\&A <a href="#q-and-a" id="q-and-a"></a>

**Q: Can I access the payment method during checkout?**

A: No, the payment method can only be accessed during the checkout\_completed event.

***

If you have any questions or suggestions, contact us through our [Helpdesk](https://jentis.atlassian.net/servicedesk/customer/portal/1/group/1/create/220).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jentis.com/data-capture/shop-system-setup/shopify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.