1. Once you are in your store management dashboard, click on the “Storefront” tab.
2. Once you are in the “Storefront” setting, click on “Script Manager” tab.
3. Click on the “Create a Script” button.
4. Enter an appropriate name and description for the script
- Set location on page to “Head”
- Set select pages where script will be added to “Order confirmation”
- Set “Script category” to “Essential”
- Set script type to “Script”
5. Copy and paste the following ICS script in the “script contents” input box. See “ICS Quickstart Guide” for more information on how to customize ICS script further. This script initializes ICS widget on order confirmation pages. Once you have entered the entire script, save the script.
*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 : universal whitelisted publicKey is d49bcd55f6954e86ab91730a5ea87d04 but an affiliate user can create and assign a unique one for each client from the ICS admin page.
<script>
fetch('/api/storefront/order/{{checkout.order.id}}', {credentials: 'include'})
.then(function(response) {
return response.json();
})
.then(function(myJson) {
var order = myJson;
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.orderId,
email: order.billingAddress.email,
revenue: order.orderAmount,
// 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: order.billingAddress.firstName + ' ' + order.billingAddress.lastName
});
});
</script>
6. Create another script by clicking on “Create a Script” button.
7. Enter appropriate name and description for the script
- Set location on page to “Head”
- Set select pages where script will be added to “All pages”
- Set “Script category” to “Essential”
- Set script type to “Script"
8. Copy and paste the following ICS script in the “script contents” input box. This script will enable conversion tracking on browsers with third-party cookies disabled by setting ICS cookies as first-party cookies. Once you have entered the entire script, save the script.
<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>
9. You are good to go!
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.
0 Comments