Adding UTM parameter functionality to existing subscription-cart-footer.liquid file

To use the UTM parameter functionality, you will need to have version 3.0 (or later) of the subscription-cart-footer.liquid file in Shopify. If you installed Recharge prior to December 2019 or have customized your subscription-cart-footer.liquid file, you can opt to include just the UTM parameter code rather than update the entire file.

📘

Platform:

• Recharge Checkout on Shopify

Before you start

• This guide is for merchants that want to maintain their existing subscription-cart-footer.liquid file and have a version that is equal to or later than 3.0. If you have an older version, it is recommended that you update the entire subscription-cart-footer.liquid file. Reach out to Recharge support for a copy of the latest version.
• This guide is recommended for merchants with experienced developers that can make the changes or customizations. As this is a customization, it is not officially supported as per the Recharge design and integration policy.

Step 1 - Access your subscription-cart-footer.liquid file

1. From your Shopify Admin, click Online Store and select Themes.
2. On the theme you are working with, click Actions and Edit code.
3. Locate subscription-cart-footer.liquid snippet and click the file to open the code viewer.

Step 2 - Adjust the getAttributes() function

In the subscription-cart-footer.liquid file, find the following code snippet. In the default, non-customized file, it would be located around line 140:

function getAttributes() {
			// Find and return cart attributes
			var attribute_selectors = [
					'[name*="attributes"]',
				],
				attributes = document.querySelectorAll(attribute_selectors.join(',')),
				attributes_to_update = Array.prototype.slice.apply(attributes),
				attributes_filtered = filterValues(attributes_to_update);
			var attribute_data = {};
			attributes_filtered.forEach(function(attribute) {
				var name = attribute.getAttribute('name'),
					value = attribute.value;
				attribute_data[name] = value;
			});
			return {
				attributes: attribute_data
			};
		}

In this function, add the following lines of code:

• Versions 3.0.x:
  • Below var data = {};, add the lines of code identified in the Code to add section
• Versions 3.1.x:
  • Below var attribute_data={}, add the lines of code identified in the Code to add section

Code to add

utm_attributes = getUTMAttributes(),
    attributes_from_url = new URLSearchParams(decodeURIComponent(window.location.search));
for (let pair of attributes_from_url) {
    if (attributeRegEx.test(pair[0])) {
        var attributeName = pair[0]
            .match(attributeNameRegex)[0];
		attributeName = attributeName.substring(1, attributeName.length -1);
		attribute_data[attributeName] = attributes_from_url.get(pair[0]);
	}
}

The final result should look like this (example in v3.1):

var attribute_data = {},
	utm_attributes = getUTMAttributes(),
	attributes_from_url = new URLSearchParams(decodeURIComponent(window.location.search));
for (let pair of attributes_from_url) {
	if (attributeRegEx.test(pair[0])) {
		var attributeName = pair[0]
			.match(attributeNameRegex)[0];
		attributeName = attributeName.substring(1, attributeName.length -1);
		attribute_data[attributeName] = attributes_from_url.get(pair[0]);
	}
}

Step 3 - Add the if statement

Find the following code snippet inside the getAttributes() function. This might look slightly different between versions:

attributes_filtered.forEach(function(attribute) {
				var name = attribute.getAttribute('name'),
					value = attribute.value;
				attribute_data[name] = value;
			});

Under the code snippet, create a new line and enter the following if statement:

if (utm_attributes) {
				Object.keys(utm_attributes).forEach(function(key) {
					attribute_data[key] = utm_attributes[key];
				});
			}

Step 4 - Add the getUTMAttributes() function

Right after the function getAttributes() is closed with the } character, add a line break, and add the following function:

function getUTMAttributes() {
			// Retrieve UTMAttributes from Shopify cookie
			var shopifyCookieRegEx = /^_shopify_sa_p/;
			var utmRegEx = /^utm_/;
			var timestampRegEx = /^_shopify_sa_t/;
			var utmParams = {};
			var shopifyCookie = "";
			var timestamp = "";
			document.cookie.split(";")
					.map(function(s){
						return s.trim();
					})
					.forEach(function(s){
						if (shopifyCookieRegEx.test(s)) {
							shopifyCookie = s;
						}
						if (timestampRegEx.test(s)) {
							timestamp = decodeURIComponent(s.split("=")[1]);
						}
						return;
					});
			var utmValuesFromCookie = shopifyCookie.split("=")[1];
			decodeURIComponent(utmValuesFromCookie)
				.split("&")
				.forEach(function(s){
					var key = s.split("=")[0];
					var val = s.split("=")[1];
					if (utmRegEx.test(key)) {
						return utmParams[key] = val;
					}
					return;
				});
			if (!Object.keys(utmParams).length) {
				return undefined;
			}
			utmParams.utm_timestamp = timestamp;
			utmParams.utm_data_source = "shopify_cookie";
			return utmParams;
		}

Step 5 - Save the file and get started

Once the modifications above are done, hit Save and the new UTM functionalities will be available in your subscription-cart-footer.liquid file.