1. Log in to your Shopify admin account (https://accounts.shopify.com/store-login)


2. Select Online Store and then select Themes


3. Select the Actions button then select the Edit code option in the dropdown 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. Select Settings


7. Select Checkout to go to the checkout settings page


8. Scroll down to the Order Processing section and locate the “Additional scripts” text box. We want to insert the ICS script here so that the ICS script will be triggered after a qualifying order is processed.


9. Add the 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', 'YOURpublicKey', YOURcampaignId);

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 the ICS script is activated the ICS widget will pop-up on the order confirmation page as shown below. You may wrap the ICS script in conditional statements so that it only triggers if desired conditions 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.