1. Log in to your shopify admin account.
2. Click the “Online Store” setting to go to “Themes” option.
3. Click the “Actions” button then select the “edit code” option to insert custom JavaScript code that sets first-party cookies for proper ICS invite tracking on browsers that have third-party cookies disabled by default.
4. Open “theme.liquid” code file.
5. Insert the following code above </body> closing tag and save.
<script>
function setICSCookies(){
var ICSRegex = /invite=([a-zA-Z0-9%]+)/;
var queryString = location.search;
var ICSQueryString = queryString.match(ICSRegex);
if (ICSQueryString) {
document.cookie = 'invite=' + ICSQueryString[ICSQueryString.length - 1] +'; Max-Age=30000000;' + 'Path=/';
}
}
setICSCookies();
</script>
6. Click “Settings” to go to Settings page
7. Click “Checkout” to go to checkout setting page
8. Scroll down to the “Order Processing” section and locate “Additional scripts” text box.
We want to insert ICS script here so that ICS script will be triggered after a qualifying order is processed.
9. Add ICS script to “Additional scripts” in the following format. See “ICS Quickstart Guide” for more information on how to customize ICS script further.
*important field. These should be enclosed in single quotes
campaignId - This number should match the campaignId on ICS admin. If you want to run a different campaign on order confirmation, you should change this value.
publicKey - You should be able to access your public key in your campaign setting page. See below.
<script>
var ICSCookie = null;
var ICSCookieObject = null;
function getICSCookie() {
var allCookies = document.cookie;
var regex = /invite=([a-zA-Z0-9%]+)/;
var matches = allCookies.match(regex);
if (matches) {
ICSCookie = matches[0];
}
};
getICSCookie();
ICSCookieObject = Object.fromEntries(new URLSearchParams(ICSCookie));
(function(i,s,r,publicKey,campaignId,a,m,frame,bodyChild){
i['IceCreamSocialObject'] = r;
i[r] = i[r] || function(){( i[r].q = i[r].q||[]).push(arguments)}, i[r].l = +new Date();
a = s.createElement('script'), m = s.scripts[0];
a.async = a.src = 'https://app.icecreamsocial.io/js/ics.js';
m.parentNode.insertBefore(a,m);
frame = s.createElement('iframe'), bodyChild = s.body.firstChild;
frame.src = 'https://app.icecreamsocial.io/?campaignId='+campaignId+'&publicKey='+publicKey;
frame.id='SocialIframe', frame.style.cssText = 'position:fixed;height:0%;width:0%;z-index:9999;border: 0';
bodyChild.parentNode.insertBefore(frame,bodyChild);
})(window ,document ,'ics', publicKey, campaignId);
ics('addTransaction', {
locale: 'en-US',
orderId: {{ order.order_number }},
email: '{{ order.email }}',
revenue: {{ order.subtotal_price | money_without_currency}},
// inviteCookie field is necessary to pass ICSCookie to track conversions properly on browsers with third-party cookies disabled.
inviteCookie: ICSCookieObject.invite,
// the following items are optional
name: '{{customer.name}}',
productName: '{{ order.line_items.first.title }}',
productUrl: '{{ order.line_items.first.url }}'
});
</script>
10. Once ICS script is activated, ICS widget will pop up on the order confirmation page as shown below. You may wrap ICS script in conditional statements to only trigger if desired conditions of the purchases are met.
Update Note
5/24/2020
- “money_without_currency” filter applied to the ICS script used for “Additional scripts” in the checkout setting to ensure proper subtotal amount. Shopify changed their code recently so that without this filter, a subtotal of $10.00 would be passed into ICS script as 1000 (integer). With this filter, a subtotal of $10.00 would be passed into ICS script as 10.00 (number).
- Safari third-party cookies ban fix
- This fix is to respond to browsers that have third-party cookies disabled by default and make sure conversion tracking works properly.
- ICS now requires you to add an ICS cookie script in the “theme.liquid” code file to set a first-party ICS cookie. This script will grab ICS invite cookie value from query string parameters and set the values as a first-party under shopify domain.
- ICS now requires you add the updated ICS script to the “Additional scripts” in the checkout setting to convert first-party ICS invite cookie value into a string and pass it in as “inviteCookie” that can be used to track conversion properly.
0 Comments