Articles in this section

See more

Required Code Implementation

Avatar
RS Team
  • Updated
Follow

You need to make the following changes to start using ReSci SMS: 

  1. Disable your existing mobile website email modal
  2. Add The Tracking Code & Purchase Pixel To Your Website

Disable Your Existing Email Modal

Before you implement the ReSci modal, you must turn off any email capture modal you have for your mobile web only. The email capture should still be live on your desktop experience unless you plan to use ReSci SMS on the desktop experience as well.

 

Add The Tracking Code & Purchase Pixel

Please reference the section below that corresponds best to your eCommerce platform:

Optional: Keep your modals semi-persistent and accessible with our new Bubble Modal functionality.

Shopify Instructions

For Shopify-based clients, you will need to add our tracking code & purchase pixel to your Shopify admin separately, using the instructions below. Both code snippets must be added to properly track purchases.

For the tracking code, please follow these instructions:

  1. In your Shopify admin, click Online Store. Then, click Themes.
  2. Make sure you are working in the most "Current Theme" (the one at the top). Click the Action drop-down and select Edit Code.
  3. Open the theme.liquid file from the left column.
  4. Paste the code snippet shown below the <head> tag in the theme.liquid code section. You can usually find this under the Layout folder. Replace [CLIENT ID] with the client ID provided by your ReSci account manager. Do not include the square brackets.
  5. Click Save.
<script type="text/javascript">
/* <![CDATA[ */
(function(){if(window.voyage)return;window.voyage={q:[]};var fns=['init', 'track'];
for(var i=0;i<fns.length;i++){(function(fn){window.voyage[fn]=function(){
this.q.push([fn,arguments]);}})(fns[i])}})();voyage.init('[CLIENT ID]', { popup: true });
/* ]]> */
</script>
<script async src="https://d252nz9qxgid5e.cloudfront.net/voyage.production.js"></script>

For the purchase pixel, please follow these instructions:

  1. Go to the Shopify Admin. Then go to Settings > Checkout > Order processing and find the section labeled Additional Scripts.
  2. Copy the code shown below and paste it into the Additional Scripts section. Replace [CLIENT ID] with the client ID provided by your ReSci account manager. Do not include the square brackets.
  3. Click Save.
{% if first_time_accessed %}
<script async src="https://d252nz9qxgid5e.cloudfront.net/voyage.production.js"></script>
 <script type="text/javascript">
 /* <![CDATA[ */
 (function(){if(window.voyage)return;window.voyage={q:[]};var fns=['init', 'track'];
 for(var i=0;i<fns.length;i++){(function(fn){window.voyage[fn]=function(){
 this.q.push([fn,arguments]);}})(fns[i])}})();voyage.init('[CLIENT ID]', { popup: true });
 /* ]]> */
 </script>
 <script type="text/javascript">
 voyage.track('Purchase', { amountCents: {{ order.total_price }} });
 </script>
{% endif %}

 

WooCommerce Instructions

If you use WooCommerce (WordPress), please follow these instructions:

  1. In your WordPress dashboard, hover over Plugins and click Add New.
  2. Search for Code Snippets.
  3. Click Install Now under Code Snippets and then activate the plugin.
  4. From the WordPress dashboard menu, hover over Snippets and click Add New.
  5. Give it a title, paste the code snippet shown below in the Code text area. Replace [CLIENT ID] with the client ID provided by your ReSci account manager. Do not include the square brackets.
  6. Click Activate.
<?php
add_action( 'woocommerce_thankyou', 'voyage_purchase' );
function voyage_purchase( $order_id ) {
 $order = wc_get_order( $order_id );
?>
 <script type="text/javascript">
 /* <![CDATA[ */
 (function(){if(window.voyage)return;window.voyage={q:[]};var fns=["init", "track"];
 for(var i=0;i<fns.length;i++){(function(fn){window.voyage[fn]=function(){
 this.q.push([fn,arguments]);}})(fns[i])}})();voyage.init("[CLIENT ID]", { popup: false });
 /* ]]> */
 </script>
 <script async src="https://d252nz9qxgid5e.cloudfront.net/voyage.production.js"></script>
 <script type="text/javascript">
 voyage.track("Purchase", { amountCents: <?php echo $order->get_total()*100; ?> });
 </script>
<?php
}

 

BigCommerce Instructions

If you use BigCommerce, please follow these instructions for the tracking code:

  1. In your BigCommerce dashboard, go to Store Front > Script Manager.
  2. Click Create New Script and title it.
  3. Select Head under Location on page.
  4. Select Store pages under Select pages where script will be added.
  5. Select Script under Script type.
  6. Paste the code snippet shown below in the Script Contents text area. Replace [CLIENT ID] with the client ID provided by your ReSci account manager. Do not include the square brackets.
  7. Click Save.
<script type="text/javascript">
/* <![CDATA[ */
(function(){if(window.voyage)return;window.voyage={q:[]};var fns=['init', 'track'];
for(var i=0;i<fns.length;i++){(function(fn){window.voyage[fn]=function(){
this.q.push([fn,arguments]);}})(fns[i])}})();voyage.init('[CLIENT ID]', { popup: true });
/* ]]> */
</script>
<script async src="https://d252nz9qxgid5e.cloudfront.net/voyage.production.js"></script>

 

For the purchase pixel, please follow these instructions:

  1. Go to Advanced Settings > Data Solutions (formerly web analytics), and click Connect next to Affiliate Conversion Tracking.
  2. Paste the code snippet shown below in the Conversion Tracking Code text area. Replace [CLIENT ID] with the client ID provided by your ReSci account manager. Do not include the square brackets.
  3. Click Connect. Note: you may receive a message saying the code is invalid. You can safely ignore this message.
<script type="text/javascript">
/* <![CDATA[ */
(function(){if(window.voyage)return;window.voyage={q:[]};var fns=['init', 'track'];
for(var i=0;i<fns.length;i++){(function(fn){window.voyage[fn]=function(){
this.q.push([fn,arguments]);}})(fns[i])}})();voyage.init('[CLIENT ID]', { popup: false });
/* ]]> */
</script>
<script async src="https://d252nz9qxgid5e.cloudfront.net/voyage.production.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var amount = '%%ORDER_SUBTOTAL_IN_CENTS%%'
voyage.track('Purchase', { amountCents: amount });
/* ]]> */
</script>

 

Other Platform Implementation Instructions

If you do not use any of the above platforms, you will need to add our tracking code & purchase pixel code to both your general website header as well as your purchase confirmation page.

For the tracking code, add the code below to your main website's global tag:

<script type="text/javascript">
/* <![CDATA[ */
(function(){if(window.voyage)return;window.voyage={q:[]};var fns=['init', 'track'];
for(var i=0;i<fns.length;i++){(function(fn){window.voyage[fn]=function(){
this.q.push([fn,arguments]);}})(fns[i])}})();voyage.init('[CLIENT ID]', { popup: true });
/* ]]> */
</script>
<script async src="https://d252nz9qxgid5e.cloudfront.net/voyage.production.js"></script>

For the purchase pixel, add the code below to your purchase confirmation page.

Note: You will need to replace [AMOUNT_CENTS] with the total value of the purchase in cents.

<script type="text/javascript">
voyage.track('Purchase', { amountCents: [AMOUNT_CENTS] });
</script>

 

Related articles

Comments

0 comments

Please sign in to leave a comment.