Example JavaScript API Usage

The JavaScript API allows custom eCommerce websites to connect to Rejoiner's application. When considering a custom integration, there are three customer types to consider for tracking. Depending on how your custom checkout is structured, you may need to adjust the examples to suit your needs. In the article below, we've provided samples of how the Rejoiner JavaScript should be employed when tracking each type of customer.

Customer Types

Required Information

All required integration data is located on the Implementation page inside of the application. Please copy your:

  • Site ID
  • Domain


Signed In & Returning Customers

For every tracking scenario, the Rejoiner JavaScript tag is comprised of 1-3 components, outlined below. For signed in & returning customers, an email address should be passed programmatically via the JavaScript API. Data for signed in & returning customers is usually sent on the cart page, as users are already identifiable at that point. Your use case may differ.

1
Main (required) 
<script type='text/javascript'>
var _rejoiner = _rejoiner || [];
_rejoiner.push(['setAccount', 'your site id here']);
_rejoiner.push(['setDomain', '.yourdomain.com']);
(function() {
    var s = document.createElement('script'); s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://s3.amazonaws.com/rejoiner/js/v3/t.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>
	
2
setCartData endpoint - Send aggregate data about the transaction. Note email being passed here as part of the setCartData endpoint.
<script type='text/javascript'>
    _rejoiner.push(['setCartData', {
        'value': '799.96', 
        'totalItems': '4',
        'email': 'customer@example.com', //customer email address
        'returnUrl': 'https://yourdomain.com/regeneratecart?id=231234' //link to regenerate cart
    }]);
	
3
setCartItem endpoint - Sends details about specific items in the cart. Note: setCartData and setCartItem calls should be made within the same set of <script> tags. Multiple items should be looped over within the tag.
_rejoiner.push(['setCartItem', {
        'name': 'Item Name',
        'product_id': 'ITM1', //required
        'price': '199.99', 
        'product_url': 'http://yoursite.com/productpage', //absolute url
        'category': 'televisions', 
        'item_qty': '2', 
        'qty_price': '399.98', 
        'image_url': 'http://yoursite.com/path/to/image.jpg' //absolute url
    }]);
_rejoiner.push(['setCartItem', {
        'name': 'Item Name',
        'product_id': 'ITM2', //required
        'price': '199.99', 
        'product_url': 'http://yoursite.com/productpage', //absolute url
        'category': 'televisions', 
        'item_qty': '2', 
        'qty_price': '399.98', 
        'image_url': 'http://yoursite.com/path/to/image.jpg' //absolute url
    }]);
</script>
	

Guest Customers

Since guest customers don't have email addressesavailable when they start checkout, the setCartData endpoint will be adjusted to track when/if a guest has entered an email before abandoning.

1
Main (required) 
<script type='text/javascript'>
var _rejoiner = _rejoiner || [];
_rejoiner.push(['setAccount', 'your site id here']);
_rejoiner.push(['setDomain', '.yourdomain.com']);
(function() {
    var s = document.createElement('script'); s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://s3.amazonaws.com/rejoiner/js/v3/t.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>
	
2
setCartData endpoint - Sends aggregated data about a transaction. Note that  email is not being passed here as part of the setCartData endpoint. This is because our JavaScript can detect when an email address is entered into your checkout form as soon as the customer blurs a field.
<script type='text/javascript'>
    _rejoiner.push(['setCartData', {
        'value': '799.96', 
        'totalItems': '4',
        'returnUrl': 'https://yourdomain.com/regeneratecart?id=231234' //link to regenerate cart
    }]);
	
3
setCartItem endpoint - Sends details about specific items in the cart. Note:  setCartData and  setCartItem calls should be made within the same set of  <script> tags. Multiple items should be looped over within the tag.
_rejoiner.push(['setCartItem', {
        'name': 'Item Name',
        'product_id': 'ITM1', //required
        'price': '199.99', 
        'product_url': 'http://yoursite.com/productpage', //absolute url
        'category': 'televisions', 
        'item_qty': '2', 
        'qty_price': '399.98', 
        'image_url': 'http://yoursite.com/path/to/image.jpg' //absolute url
    }]);
_rejoiner.push(['setCartItem', {
        'name': 'Item Name',
        'product_id': 'ITM2', //required
        'price': '199.99', 
        'product_url': 'http://yoursite.com/productpage', //absolute url
        'category': 'televisions', 
        'item_qty': '2', 
        'qty_price': '399.98', 
        'image_url': 'http://yoursite.com/path/to/image.jpg' //absolute url
    }]);
</script>
	

Converted Customers

It's important that Rejoiner is notified when a customer completes an order on your website. Doing so requires the addition of one endpoint in your main Rejoiner tag. Note:  sendCartData and sendCartItem calls should not be made on pages where sendConversion is employed.

1
Main (required) - Note the additional sendConversion call below.
<script type='text/javascript'>
var _rejoiner = _rejoiner || [];
_rejoiner.push(['setAccount', 'your site id here']);
_rejoiner.push(['setDomain', '.yourdomain.com']);
_rejoiner.push(['sendConversion']);
(function() {
    var s = document.createElement('script'); s.type = 'text/javascript';
    s.async = true;
    s.src = 'https://s3.amazonaws.com/rejoiner/js/v3/t.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();
</script>
		

Visual Example

This is a simplified representation of an eCommerce checkout flow correlating to the correct usage of our JavaScript.

Note: For enhanced conversion tracking, you may also employ our REST API. Full technical documentation is  available here.

Still need help? Contact Us Contact Us