
Quick Start
WELCOME ABOARD!
Everyone on the Ice Cream Social team is excited to have you on board and hope we can start extending your ecommerce reach and increase your conversions! Below is a simple guide to get you up and running with the basics.
QUICK START GUIDE
ICS Cookie Setting Script
Add the following script to your campaign redirect page as header or footer script to make sure conversion tracking works on third-party cookie disabled browsers (i.e. Safari). Your redirect page and ICS initialization page, where the main ICS script is embedded must have the same domain for conversions to track properly on third-party cookie disabled browsers.
<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> |
ICS Ecommerce Setup
On your confirmation page, include the following script which we will provide to you (WORDS_IN_BOLD_MUST_BE_REPLACED):
<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', 'YOUR_PROVIDED_PUBLIC_KEY', 'CAMPAIGN_ID');
ics('addTransaction', { orderId: 'SOME_ORDER_ID', email: 'THE_CUSTOMER_EMAIL', revenue: THE_ORDER_TOTAL, // 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 locale: ‘en-US’, // (default is en-US). Can also be ko-KR, ja-JP, zh, de, fr, fr-CA // ko-Kr (Korean), ja-JP (Japanese), zh(Chinese), de (German), fr (French), fr-CA (French (Canada)) name: 'THE_CUSTOMER_NAME', productName: 'THE_NAME_OF_THE_ITEM_BOUGHT', productUrl: '/THE_URL_SLUG_OF_THE_PRODUCT' }); </script> |
Tracking Referrals On Your Ecommerce Platform
On your product page or page that your are redirecting invites to, include the following script which we will provide to you (WORDS_IN_BOLD_MUST_BE_REPLACED):
<script> (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', 'YOUR_PROVIDED_PUBLIC_KEY', 'CAMPAIGN_ID');
ics(‘pageView’, { identifier: 'SOME_UNIQUE_ID’, // the following items are optional getOrCreateInfluencer: true, // (default is true). Set to false if you do not wish to create an influencer trackByInvite: true, // (default is true). Set to false if you want to track the influencer with ‘'SOME_UNIQUE_ID’ }); </script> |
This will allow us to see if the person who came to your page was someone who clicked an invite link! NOTE: If this script is not included, you may be missing some conversions!
This can also be used to attribute a Page View engagement to an influencer that referrer someone to view a certain page. This behavior is done by default, but you can disable it by setting trackByInvite to false.
This will create an influencer if ICS doesn’t find an influencer with the provided identifier. If it is found, ICS will use the previously created influencer. This can be disabled by setting getOrCreateInfluencer to false, but is not recommended. Influencers will be visible in your admin dashboard.
Tracking Sign Ups On Your Ecommerce Platform
On your product page or page where you might be asking for user enrollments (such as asking for an email or asking them to create an account), include the following script (WORDS_IN_BOLD_MUST_BE_REPLACED):
<script> (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', 'YOUR_PROVIDED_PUBLIC_KEY', 'CAMPAIGN_ID');
ics(‘signUp’, { identifier: 'SOME_UNIQUE_ID_OR_EMAIL’, // the following items are optional getOrCreateInfluencer: true, // (default is true). Set to false if you do not wish to create an influencer trackByInvite: true, // (default is true). Set to false if you want to track the influencer with ‘'SOME_UNIQUE_ID’ }); </script> |
This will allow you to collect information of someone who has signed up. ICS will try to attribute a Sign Up engagement to an influencer who caused a customer or user who has signed up. This behavior is done by default, but you can disable it by setting trackByInvite to false.
This will create an influencer if ICS doesn’t find an influencer with the provided identifier. If it is found, ICS will use the previously created influencer. This can be disabled by setting getOrCreateInfluencer to false, but is not recommended. Influencers will be visible in your admin dashboard.
Tracking Participation On Your Ecommerce Platform
On your promotion page or page where you might be asking for user participations (such as asking for an email or complete a survey), include the following script (WORDS_IN_BOLD_MUST_BE_REPLACED):
<script> (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', 'YOUR_PROVIDED_PUBLIC_KEY', 'CAMPAIGN_ID');
ics(‘participation’, { identifier: 'SOME_UNIQUE_ID_OR_EMAIL’, // the following items are optional getOrCreateInfluencer: true, // (default is true). Set to false if you do not wish to create an influencer trackByInvite: true, // (default is true). Set to false if you want to track the influencer with ‘'SOME_UNIQUE_ID’ }); </script> |
This will allow you to collect information of someone who has signed up. ICS will try to attribute a Sign Up engagement to an influencer who caused a customer or user who has signed up. This behavior is done by default, but you can disable it by setting trackByInvite to false.
This will create an influencer if ICS doesn’t find an influencer with the provided identifier. If it is found, ICS will use the previously created influencer. This can be disabled by setting getOrCreateInfluencer to false, but is not recommended. Influencers will be visible in your admin dashboard.
ICS standalone widget
ICS standalone widget is designed to create influencers without any influencer information passed in from the client-side webpage. All information required to create an influencer will be collected within the widget view.
<script> (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', 'YOUR_PROVIDED_PUBLIC_KEY', 'CAMPAIGN_ID');
ics(‘participation’, { getOrCreateInfluencer: true, trackByInvite: true, }); </script> |
ICS embedded widget
ICS embedded widget is designed to fit an ics widget within a webpage to provide ICS functionalities within the client’s webpage. You will have to enclose <script> within <div> tags as shown below. The parent <div> tag must specify dimensions of the <div> to display ICS widget correctly.
<div style="height: 500px;"> // Set parent <div> tag style. This will determine how ICS widget will display within your website. Minimum height of 500px recommended. <div id="ICS">
<script> document.getElementsByTagName("body")[0].style = "overflow: visible !important";
(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 = document.getElementById("ICS"); frame.src = 'https://app.icecreamsocial.io/?campaignId='+campaignId+'&publicKey='+publicKey; frame.id='SocialIframe', frame.style.cssText = 'position:fixed;height:100%;width:100%;'; bodyChild.parentNode.insertBefore(frame,bodyChild); })(window ,document ,'ics', 'YOUR_PROVIDED_PUBLIC_KEY', 'CAMPAIGN_ID');
ics(‘participation’, { getOrCreateInfluencer: true, trackByInvite: true, }); </script>
</div> </div> |
ICS without the pop up
If for some reason you do not wish to show the ICS widget when calling addTransaction, pageView, signUp, you can add the additional field displayType to ‘none’.
Admin Setup
After creating a campaign, you will be able to click on the
icon to view the campaign settings. There you will be able to configure messages displayed to customers. We also provide you with the ability to insert special tags that will be dynamically replaced if you pass specific values to the ics object (explained in the next section).
Reference
Below is a table for the attributes passed to the ics(ENGAGEMENT_TYPE, ENGAGEMENT_OPTIONS) commands. Each key directly corresponds to the key in the JSON object
* - denotes required key
‘addTransaction’
Key | Value | Description |
orderId * | String | The unique identifier of the order |
email * | String | The purchaser’s email address |
revenue * | Number | The total of the purchaser’s order |
!!! NOTE !!! The following keys below are optional. However, if planning to use their corresponding {{ tags }}, treat them as being required. |
name | String | The customer’s name. It can be a full name, first name, last name, or even an alias. The choice is yours.
Replaces {{ influencer.name }} in email subject and share message in the campaign settings.
Example Email Subject:
Your friend {{ influencer.name }} just sent you a deal. |
productName | String | The name of the product being bought. If there are more than one item, you can choose any of those products. (We recommend choosing the first item in the cart or the most expensive.)
Replaces {{ product.name }} in email subject and share message in the campaign settings.
Example Email Subject:
Your friend {{ influencer.name }} just sent you a deal for {{ product.name }}. |
productUrl | String | The URL slug of the product that people will be redirected to when they click on an invite.
Replaces {{ product.url }} in redirect url in the campaign settings.
Example Store Redirect Url:
https://www.yourstore.comr/shop/{{ product.url }} |
!!! NOTE !!! The following keys below are optional |
locale | String | Change the language of the widget.
Default: en-US Supported: en-US, ko-KR, ja-JP, zh |
!!! NOTE !!! The following keys below are optional, but not recommended to be changed since they turn off certain aspects of data collection or potential data collection. |
getOrCreateInfluencer | Bool | Whether or not ICS should try to create or retrieve an influencer for tracking and attribution. This is true by default.
Pass false to this attribute if you do not wish to create an influencer for a user. This is not recommended, however, since it limits ics data collection. |
trackByInvite | Bool | Whether or not ICS should try to attribute a referring influencer (true) or the current influencer (false) to a ‘pageView’ engagement. This is true by default.
|
displayType | String | How the widget is displayed. This is default to “modal”.
If you wish to not display the widget, pass “none”. However, this is not recommended since a user will not be able to share your content. |
‘pageView’
Key | Value | Description |
identifier * | String | A unique identifier for the current user |
!!! NOTE !!! The following keys below are optional |
locale | String | Change the language of the widget.
Default: en-US Supported: en-US, ko-KR, ja-JP, zh |
!!! NOTE !!! The following keys below are optional, but not recommended to be changed since they turn off certain aspects of data collection or potential data collection. |
getOrCreateInfluencer | Bool | Whether or not ICS should try to create or retrieve an influencer for tracking and attribution. This is true by default.
Pass false to this attribute if you do not wish to create an influencer for a user. This is not recommended, however, since it limits ics data collection. |
trackByInvite | Bool | Whether or not ICS should try to attribute a referring influencer (true) or the current influencer (false) to a ‘pageView’ engagement. This is true by default.
|
displayType | String | How the widget is displayed. This is default to “modal”.
If you wish to not display the widget, pass “none”. However, this is not recommended since a user will not be able to share your content. |
‘signUp’
Key | Value | Description |
identifier * | String | A unique identifier for the current user |
!!! NOTE !!! The following keys below are optional |
locale | String | Change the language of the widget.
Default: en-US Supported: en-US, ko-KR, ja-JP, zh |
!!! NOTE !!! The following keys below are optional, but not recommended to be changed since they turn off certain aspects of data collection or potential data collection. |
getOrCreateInfluencer | Bool | Whether or not ICS should try to create or retrieve an influencer for tracking and attribution. This is true by default.
Pass false to this attribute if you do not wish to create an influencer for a user. This is not recommended, however, since it limits ics data collection. |
trackByInvite | Bool | Whether or not ICS should try to attribute a referring influencer (true) or the current influencer (false) to a ‘signUp’ engagement. This is true by default.
|
displayType | String | How the widget is displayed. This is default to “modal”.
If you wish to not display the widget, pass “none”. However, this is not recommended since a user will not be able to share your content. |
‘participation’
Key | Value | Description |
identifier * | String | A unique identifier for the current user. If you don’t use this field, the widget will show up as a standalone widget. |
!!! NOTE !!! The following keys below are optional |
locale | String | Change the language of the widget.
Default: en-US Supported: en-US, ko-KR, ja-JP, zh |
!!! NOTE !!! The following keys below are optional, but not recommended to be changed since they turn off certain aspects of data collection or potential data collection. |
getOrCreateInfluencer | Bool | Whether or not ICS should try to create or retrieve an influencer for tracking and attribution. This is true by default.
Pass false to this attribute if you do not wish to create an influencer for a user. This is not recommended, however, since it limits ics data collection. |
trackByInvite | Bool | Whether or not ICS should try to attribute a referring influencer (true) or the current influencer (false) to a ‘signUp’ engagement. This is true by default.
|
displayType | String | How the widget is displayed. This is default to “modal”.
If you wish to not display the widget, pass “none”. However, this is not recommended since a user will not be able to share your content. |