Shopify

Integrating Rimdian with Shopify allows you to collect users navigation, import previous orders & customers and sync your data in real-time with webhooks.

The integration is composed of 3 steps:

Adding the JavaScript SDK on your template
Adding a script in the “order confirmation” page
Creating a Shopify API key and connecting it with Rimdian

Adding the JavaScript SDK

Make sure to read the JavaScript SDK documentation before moving forward.

This integration requires the intervention of a frontend web developer.

Initialisation

The SDK can be initialised at the end of the HTML <body> ... </body> tags of your layout, usually in the template file Layout > theme.liquid

<head>
  ...

  <script src="https://cdn-eu.rimdian.com/js/sdk.min.js" type="text/javascript"></script>
  <script>
	// grabs the current cart
	var currentCart = {{ cart | json}};

    // takes a Shopify cart object and tracks it in Rimdian
    var handleCartForRimdian = function (cart) {
        if (cart.item_count === 0 && !Rimdian.currentCart) return

        Rimdian.onReady(function () {
            var rmdCart = {
                external_id: cart.id ? cart.id : Rimdian.currentSession.external_id + '_cart',
                created_at: Rimdian.currentSession.created_at,
                updated_at: Rimdian.currentSession.updated_at,
                items: []
            }

            cart.items.forEach(function (item) {
                var cartItem = {
                    external_id: ''+item.id,
                    product_external_id: ''+item.product_id,
                    name: item.title ? item.title : item.sku,
                    quantity: item.quantity,
                    price: parseFloat(item.final_price),
                    brand: item.vendor,
                    image_url: item.image
                }
                if (item.sku && item.sku != '') {
                    cartItem.sku = item.sku;
                }
                if (item.variant_id && item.variant_id != '') {
                    cartItem.variant_external_id = ''+item.variant_id;
                    cartItem.variant_title = item.variant_title;
                }
                rmdCart.items.push(cartItem);
            });

            Rimdian.trackCart(rmdCart);
        });
    }

	// watches for cart changes
    const cartObserver = new PerformanceObserver((list) => {
        list.getEntries().forEach((entry) => {
            const isValidRequestType = ['xmlhttprequest', 'fetch'].includes(entry.initiatorType);
            const isCartChangeRequest = /\/cart\//.test(entry.name);
            if (isValidRequestType && isCartChangeRequest) {
                fetch(`${window.location.origin}/cart.js`).then(res => res.clone().json().then(data => {
                    handleCartForRimdian(data)
                }))
            }
        });
    });
    cartObserver.observe({ entryTypes: ["resource"] });

	try {
        Rimdian.init({
            workspace_id: 'WORKSPACE_ID',
			host: 'https://YOUR_TRACKING_SUBDOMAIN.yourwebsite.com',
			cross_domains: ['blog.yourwebsite.com'],
            ignored_origins: [{
                utm_source: 'paypal.com',
                utm_medium: 'referral'
            }]
        });

        // use this block if you are using the default Shopify cookie banner
        Rimdian.onReady(function () {

            Rimdian.setDispatchConsent(true);

            if (Rimdian.currentUser.consent_all === true) return

            var rimdianUserConsent = {
                consent_all: false,
                consent_personalization: false,
                consent_marketing: false,
            }

            // listen to cookie banner
            document.addEventListener("visitorConsentCollected", (event) => {
                if (!event.detail) return
                if (event.detail.marketingAllowed || event.detail.saleOfDataAllowed || event.detail.firstPartyMarketingAllowed || event.detail.thirdPartyMarketingAllowed) {
            		rimdianUserConsent.consent_marketing = true;
                }
				if (event.detail.analyticsAllowed || event.detail.preferencesAllowed || event.detail.firstPartyMarketingAllowed) {
					rimdianUserConsent.consent_personalization = true;
				}
				if (rimdianUserConsent.consent_marketing === true && rimdianUserConsent.consent_personalization === true) {
					rimdianUserConsent = { consent_all: true }
				}
				Rimdian.setUserContext(rimdianUserConsent);
            });

			// ready  CMP value
			var interval = setInterval(function () {
				// Shopify object is not available yet
				if (!window.Shopify || !window.Shopify.customerPrivacy) return

				clearInterval(interval);

				var cmpValue = window.Shopify.customerPrivacy.currentVisitorConsent();
				if (cmpValue) {
                    if (cmpValue.marketing === 'yes') {
           				rimdianUserConsent.consent_marketing = true;
					}
					if (cmpValue.analytics === 'yes' || cmpValue.preferences === 'yes') {
						rimdianUserConsent.consent_personalization = true;
					}
					if (rimdianUserConsent.consent_marketing === true && rimdianUserConsent.consent_personalization === true) {
						rimdianUserConsent = { consent_all: true }
					}
        			Rimdian.setUserContext(rimdianUserConsent);
                }
            }, 300);
        });

        // track pageview & cart updates
        Rimdian.onReady(function () {

            {% if customer %}
			Rimdian.setUserContext({
				external_id: '{{ customer.id }}',
				is_authenticated: true,
				hmac: '{{ customer.id | hmac_sha256: "WORKSPACE_HMAC_KEY" }}'
			});
			{% endif %}

        	var pageviewData = {title: "{{ page_title }}" };

        	{% if product %}
        	var currentProduct = {{ product | json }};
            var currentVariant = {{ product.selected_or_first_available_variant | json }};

			if (currentProduct && currentProduct.id) {
				pageviewData.product_external_id = '' + currentProduct.id;
				pageviewData.product_name = currentProduct.title.replace(/\\"/, '"');
				pageviewData.product_price = currentProduct.price;
            }
			if (currentVariant && currentVariant.id) {
				pageviewData.product_variant_external_id = '' + currentVariant.id;
				pageviewData.product_variant_title = currentVariant.title.replace(/\\"/, '"');
				pageviewData.product_sku = currentVariant.sku;
				pageviewData.product_price = currentVariant.price;
            }
        	{% endif %}

			Rimdian.trackPageview(pageviewData);
			handleCartForRimdian(currentCart);
			Rimdian.dispatch();
        });

    } catch (e) {
        console.error(e);
    }
  </script>
</head>

Adding a script on your “order confirmation” page

It is mandatory to track the order on the client side with the following script to attach the order to the current web session. Without this step, we won’t be able to properly attribute the performance of your marketing efforts.

Checkout pages are controlled by Shopify and are not available in your templates (unless you are a Shopify+ customer).

To track order on the confirmation page, you have to copy and paste the following script into your store Settings > Checkout and accounts > Order status page “Additional scripts”

<script type="text/javascript" src="https://cdn-eu.rimdian.com/js/sdk.min.js"></script>
<script type="text/javascript">
  Rimdian.init({
    workspace_id: 'YOUR_WORKSPACE_ID',
    host: 'https://YOUR_TRACKING_SUBDOMAIN.yourwebsite.com'
  });
  Rimdian.setDispatchConsent(true);

	Rimdian.onReady(function() {
		Rimdian.trackPageview({ title: "Checkout thank you" });

		{%- if checkout.order -%}

		Rimdian.setUserContext({
			external_id: '{{ checkout.order.customer.id }}',
			is_authenticated: true,
			hmac: '{{ checkout.order.customer.id | hmac_sha256: "YOUR_SECRET_KEY" }}'
		});

		var rmdOrderItems = [];

		{%- for item in checkout.order.line_items -%}
		rmdOrderItems.push({
			external_id: '{{ item.id }}',
			product_external_id: '{{ item.product_id }}',
			name: '{%- if item.title == blank -%}{{ item.sku }}{%- else -%}{{ item.title }}{%- endif -%}',
			quantity: {{ item.quantity }},
		{%- if item.sku and item.sku != '' -%}
	sku: '{{ item.sku }}',
		{% endif %}
	{%- if item.variant_id and item.variant_id != '' -%}
	variant_external_id: '{{ item.variant_id }}',
		variant_title: '{{ item.variant.title}}',
			{% endif %}
	price: parseFloat({{ item.final_price }}),
		brand: '{{ item.vendor }}',
			image_url: '{{ item | img_url: '300x300' }}'
			});
	{%- endfor -%}

	Rimdian.trackOrder({
		external_id: '{{ checkout.order.name }}',
		created_at: new Date('{{ checkout.order.created_at }}').toISOString(),
		subtotal_price: parseFloat('{{ checkout.order.subtotal_price }}'),
		total_price: parseFloat('{{ checkout.order.total_price }}'),
		currency: '{{ shop.currency }}',
		items: rmdOrderItems
	});

	Rimdian.dispatch();
	{%- endif -%}
	});
</script>

Creating a Shopify API key for Rimdian

In order to be able to import the previous orders & customers, and receive updates in real-time via webhooks, we need to connect Rimdian to your Shopify store API.

Go to Settings > Apps and sales channels
Click on the button Develop apps for your store
Click on the button Create an app, and name it “Rimdian”
Then click on the button Configure Admin API scopes
Check the following scopes and save: read_orders , read_customers , read_customer_events
Then click on the button Install app
Grab the Admin API access token, API key and API secret key, and paste them into your Rimdian Shopify app.
Then connect your Shopify app in Rimdian