Adding UTM parameter functionality to existing subscription-cart-footer.liquid file
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.
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
- 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:
- 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.
Updated 2 months ago