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.
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 entiresubscription-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
- From your Shopify Admin, click Online Store and select Themes.
- On the theme you are working with, click Actions and Edit code.
- 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:
- In version 3.0.x:
- Below var data = {};, add the lines of code identified in the Code to add section.
- In 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.