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.