After registering, this guide will be customized for your account; please do not install the snippets below.
Installation instructions for various popular platforms.
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).
If you use a 3rd party checkout system for your Shopify store, you will need to install purchase tracking in those systems.
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 -->
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.
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 -->
head
tags with this include statement:
{% include 'attribution-base' %}
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 -->
Install these two snippets into your BigCommerce store. These will send pageview and purchase data for Attribution.io to process.
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 -->
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 -->
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.
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:
client-id
: when logged in or a purchase/event is completedtransaction-id
: after a purchasepurchase-amount
: after a purchase
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.
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:
_attio.event({key: 'leadgen', transaction_id: '{{transaction-id}}', client_id: '{{client-id}}'});
_attio.event({key: 'PURCHASE_EVENT_KEY', transaction_id: '{{transaction-id}}', client_id: '{{client-id}}', amount: 123.45});
_attio.event({key: 'aad9986718703ecf', transaction_id: '{{transaction-id}}', client_id: '{{client-id}}'});
_attio.event({key: 'ac73be8f555ce0a4', transaction_id: '{{transaction-id}}', client_id: '{{client-id}}', amount: 123.45});
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.
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
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 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.
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
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.
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 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.
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); }
Create a new snippet called 'Attribution.io Purchase Tracking' and set the scope to Only run on site front-end
. Save and activate it.
// 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: '$order_number', client_id: '$customer_id', amount: $order_total}); </script> <!-- End Attribution.io purchase2 Snippet --> PURCHASESNIPPET; echo $purchase; } } } add_action('woocommerce_thankyou', 'add_attributionio_purchase_tracking', 99); }