After registering, this guide will be customized for your account; please do not install the snippets below.

Platforms

Installation instructions for various popular platforms.

Shopify App Installation

Our Shopify App can install Attribution.io in just one click. After installing the app, you can see your results and manage your account inside the Shopify admin. If you use a 3rd party checkout system (CartHook, One-Click Upsell, etc), please install purchase tracking snippets there (see below).

Shopify App

3rd Party Shopify Checkouts

If you use a 3rd party checkout system for your Shopify store, you will need to install purchase tracking in those systems.

CartHook

Copy and paste this snippet into the CartHook UI to appear on all pages including upsell and thank you pages. 

<!-- Start Attribution.io Snippet -->
<script>
!function(){var t=window._attio=window._attio||[]
t.methods=["setAccount","debug","pageview","event","identity","load","linkDomain","autoRun", "honorDNT"],t.factory=function(e){return function(){return a=Array.prototype.slice.call(arguments)[0]||{},a.command=e,t.push(a),t}};for(var e=0;e<t.methods.length;e++){var n=t.methods[e];t[n]=t.factory(n)}t.load=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=1,e.src="https://cdn.attribution.io/client.js.gz";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)
}
window._attio.setAccount({public_key: 'REPLACE_THIS_VALUE', useShopifyCookies: true});    
if(typeof(window.chData) != undefined && window.chData){
  tx_id = window.chData.order.order_id;
  amt = window.chData.order.total_price;
  items_count = window.chData.order.line_items.length;
  client_id = window.chData.order.customer.email;
  currency = window.chData.order.currency;
  window._attio.event({key: 'purchase', client_id: client_id, transaction_id: tx_id, amount: amt, meta:{items: items_count, currency: currency}});
}
window._attio.load();
}();
</script>
<!-- End Attribution.io Snippet -->

Shopify Installation (Manual)

This guide shows you how to combine the functions of the JavaScript client in addition to Shopify API commands. If you are using the Shopify App you do not need to install any of these snippets.
These snippets provide tracking of pageviews, identity, registrations and purchases. It is not possible to track pageviews on checkout pages unless you are on ShopifyPlus; the order status page will be tracked.

Pageviews, touchpoints and identities

Create a snippet named attribution-base to record records pageviews and touchpoints on all non-checkout pages of your store: 

<!-- Start Attribution.io Snippet -->
<script>
!function(){var t=window._attio=window._attio||[]
t.methods=["setAccount","debug","pageview","event","identity","load","linkDomain","autoRun", "honorDNT"],t.factory=function(e){return function(){return a=Array.prototype.slice.call(arguments)[0]||{},a.command=e,t.push(a),t}};for(var e=0;e<t.methods.length;e++){var n=t.methods[e];t[n]=t.factory(n)}t.load=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=1,e.src="https://cdn.attribution.io/client.js.gz";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)
}
window._attio.setAccount({public_key: 'REPLACE_THIS_VALUE', useShopifyCookies: true});
if(typeof(Shopify) != undefined && Shopify.checkout){
  window._attio.event({key: 'PURCHASE_EVENT_KEY', client_id: Shopify.checkout.customer_id, transaction_id: Shopify.checkout.order_id, amount: Shopify.checkout.total_price, meta:{items: Shopify.checkout.line_items.length, currency: Shopify.checkout.currency}});
}
window._attio.load();
}();
</script>
<!-- End Attribution.io Snippet -->

Add it to template.liquid at the end of your head tags with this include statement: 
{% include 'attribution-base' %}

Purchase

To record purchases, add the same snippet to your 'Additional scripts' section of your checkout settings page (store.myshopify.com/admin/settings/checkout).
If you are on ShopifyPlus, add this directly to the checkout.liquid template. 

<!-- Start Attribution.io Snippet -->
<script>
!function(){var t=window._attio=window._attio||[]
t.methods=["setAccount","debug","pageview","event","identity","load","linkDomain","autoRun", "honorDNT"],t.factory=function(e){return function(){return a=Array.prototype.slice.call(arguments)[0]||{},a.command=e,t.push(a),t}};for(var e=0;e<t.methods.length;e++){var n=t.methods[e];t[n]=t.factory(n)}t.load=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=1,e.src="https://cdn.attribution.io/client.js.gz";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)
}
window._attio.setAccount({public_key: 'REPLACE_THIS_VALUE', useShopifyCookies: true});
if(typeof(Shopify) != undefined && Shopify.checkout){
  window._attio.event({key: 'PURCHASE_EVENT_KEY', client_id: Shopify.checkout.customer_id, transaction_id: Shopify.checkout.order_id, amount: Shopify.checkout.total_price, meta:{items: Shopify.checkout.line_items.length, currency: Shopify.checkout.currency}});
}
window._attio.load();
}();
</script>
<!-- End Attribution.io Snippet -->

BigCommerce Installation

Install these two snippets into your BigCommerce store. These will send pageview and purchase data for Attribution.io to process.

Pageview Tracking

Copy and paste this snippet into the end of your Footer Scripts . 

<!-- Start Attribution.io Snippet -->
<script>
!function(){var t=window._attio=window._attio||[]
t.methods=["setAccount","debug","pageview","event","identity","load","linkDomain","autoRun", "honorDNT"],t.factory=function(e){return function(){return a=Array.prototype.slice.call(arguments)[0]||{},a.command=e,t.push(a),t}};for(var e=0;e<t.methods.length;e++){var n=t.methods[e];t[n]=t.factory(n)}t.load=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=1,e.src="https://cdn.attribution.io/client.js.gz";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)
}
window._attio.setAccount({public_key: 'REPLACE_THIS_VALUE'});
window._attio.load();
}();
</script>
<!-- End Attribution.io Snippet -->

Purchase Tracking

Copy and paste this snippet into the end of your Affiliate Conversion Tracking . 

<!-- Start Attribution.io Snippet -->
<script>
!function(){var t=window._attio=window._attio||[]
t.methods=["setAccount","debug","pageview","event","identity","load","linkDomain","autoRun", "honorDNT"],t.factory=function(e){return function(){return a=Array.prototype.slice.call(arguments)[0]||{},a.command=e,t.push(a),t}};for(var e=0;e<t.methods.length;e++){var n=t.methods[e];t[n]=t.factory(n)}t.load=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=1,e.src="https://cdn.attribution.io/client.js.gz";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)
}
window._attio.setAccount({public_key: 'REPLACE_THIS_VALUE'});
window._attio.event({key:'PURCHASE_EVENT_KEY', client_id: '%%ORDER_EMAIL%%', transaction_id: '%%ORDER_ID%%', amount: %%ORDER_AMOUNT%%});
window._attio.load();
}();
</script>
<!-- End Attribution.io Snippet -->

Google Tag Manager Installation

Add attribution to your site using your existing GTM install. This is easy to get going, but requires understanding of your current GTM setup with regards to events, triggers and variables.

Setup

Data & Variables
Add variables to GTM using Data Layer. If you are using GA this is similar data to the e-commerce suite.
You will need:

  1. client-id: when logged in or a purchase/event is completed
  2. transaction-id: after a purchase
  3. purchase-amount: after a purchase
These variable names are used in the snippet below, please customize them for your GTM setup.

Triggers
Create two triggers: one for every pageview and one for a view of the thank you or confirmation page. Use the "DOM Ready" trigger type for both.

Tags

Create the two tags shown below.

Tag 1: Pageviews and sessions
Using the trigger of "every pageview", fire this custom html tag to collect visits and pageviews: 

<!-- Start Attribution.io Snippet -->
<script>
!function(){var t=window._attio=window._attio||[]
t.methods=["setAccount","debug","pageview","event","identity","load","linkDomain","autoRun", "honorDNT"],t.factory=function(e){return function(){return a=Array.prototype.slice.call(arguments)[0]||{},a.command=e,t.push(a),t}};for(var e=0;e<t.methods.length;e++){var n=t.methods[e];t[n]=t.factory(n)}t.load=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=1,e.src="https://cdn.attribution.io/client.js.gz";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)
}
window._attio.setAccount({public_key: 'REPLACE_THIS_VALUE'});
window._attio.load();
}();
</script>
<!-- End Attribution.io Snippet -->

Tag 2: Events and Identities
Using the trigger of the "thank you pageview", fire this custom html tag, which uses the client-id and {{transaction-id}} variables:

Lead Gen lead gen 
_attio.event({key: 'leadgen', transaction_id: '{{transaction-id}}', client_id: '{{client-id}}'});
purchase2 purchase also 
_attio.event({key: 'PURCHASE_EVENT_KEY', transaction_id: '{{transaction-id}}', client_id: '{{client-id}}', amount: 123.45});
Registration User registers for an account 
_attio.event({key: 'aad9986718703ecf', transaction_id: '{{transaction-id}}', client_id: '{{client-id}}'});
Purchase User completes a purchase 
_attio.event({key: 'ac73be8f555ce0a4', transaction_id: '{{transaction-id}}', client_id: '{{client-id}}', amount: 123.45});

Segment Installation

Add attribution using your existing segement data. This is a convenient way to get started if you already have segment installed and your key events firing.

1. Segment Webhook

Add the integration called 'Webhook' and set the "Webhook URL" to: 

https://api.attribution.io/segment/REPLACE_THIS_VALUE

Set your 'Shared secret' (under "Advanced Settings") value to: 

REPLACE_THIS_VALUE

2. Create Event Types

Create matching events in Attribution.io for the events you would like to pass through. Set the event public key to match the name of the event in segment.

For example if you us this code for tracking an event in Segment analytics.track('PurchaseCompleted') then create an event in attribution with public key of PurchaseCompleted.

HubSpot

HubSpot can be used for many things: page hosting, form hosting, call-to-action buttons, etc. The way these features are setup and how they integrate with other parts of your stack determine how to best install attribution.io.

HubSpot CTA on a subdomain

A common setup is to host your website on one service (e.g. WordPress) and use HubSpot to power leads or forms via a CTA button. As long as the HubSpot pages are on a hosted subdomain (e.g. welcome.example.com), then the JavaScript client works without any problems or complexity.

Here's an outline for getting setup

1. Pageview tracking

A. Place the pageview tracking script in the header or footer of every public page on your main site.

B. Place the pageview tracking script in the header or footer template for your HubSpot pages.

2. Events and Identities

Place both the identity and event snippets in the footer of your thank-you pages. You can use HubSpots request variables to pass in a transaction ID, as below. Unfortunately due to a HubSpot limitation, the customer ID is not available on thank-you pages, so we will have to use the submission ID. This prevents double counting, but does a bad job of building identities: 

<script>
_attio.event({event_key: 'lead_gen', client_id: '{{request.query_dict.submissionGuid}}', transaction_id: '{{ request.query_dict.submissionGuid }}'});
</script>

WordPress / WooCommerce Installation

WordPress is a common CMS used to host sites and stores. It's easy and safe to install Attribution.io tracking snippets. Let us know if we can help you get your install going.

It is recommended to use the Snippet Manager plugin to easily add and safely manage your snippets without affecting your theme.

Pageview tracking

Create a new snippet called Attribution.io Pageview Tracking and set the scope to Only run on site front-end. Save and activate it. 

// A WordPress/WooCommerce function to track pageviews
if( !function_exists('add_attributionio_pv_tracking')){
  function add_attributionio_pv_tracking(){
  $snippet = <<<BASESNIPPET
  <!-- Start Attribution.io Snippet -->
<script>
!function(){var t=window._attio=window._attio||[]
t.methods=["setAccount","debug","pageview","event","identity","load","linkDomain","autoRun", "honorDNT"],t.factory=function(e){return function(){return a=Array.prototype.slice.call(arguments)[0]||{},a.command=e,t.push(a),t}};for(var e=0;e<t.methods.length;e++){var n=t.methods[e];t[n]=t.factory(n)}t.load=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=1,e.src="https://cdn.attribution.io/client.js.gz";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)
}
window._attio.setAccount({public_key: 'REPLACE_THIS_VALUE'});
window._attio.load();
}();
</script>
<!-- End Attribution.io Snippet -->
BASESNIPPET;
  echo $snippet;
  }
add_action('wp_head', 'add_attributionio_pv_tracking', 99);
}

Purchase Tracking with WooCommerce

Create a new snippet called 'Attribution.io Purchase Tracking' and set the scope to Only run on site front-end. Save and activate it.

purchase2 Snippet purchase also 

// A WordPress/WooCommerce function to track purchases
if( !function_exists('add_attributionio_purchase_tracking')){
  function add_attributionio_purchase_tracking($order_id){
  if(function_exists('is_woocommerce') && is_checkout()){
    $order = wc_get_order( $order_id );
    if($order){
    $order_number = $order->get_order_number();
    $order_total = $order->get_total();
    $customer_id = $order->get_customer_id();
  $purchase = <<<PURCHASESNIPPET
<!-- Start Attribution.io purchase2 Snippet -->
<script>
_attio.event({key: 'PURCHASE_EVENT_KEY', transaction_id: 'UNIQUE_TRANSACTION_ID', client_id: 'CLIENT_ID', amount: 123.45, meta:{any: 'value'}});
</script>
<!-- End Attribution.io purchase2 Snippet -->
PURCHASESNIPPET;
    echo $purchase;
     }
    }
  }
  add_action('woocommerce_thankyou', 'add_attributionio_purchase_tracking', 99);
}