TRAACKR INTERNAL USE ONLY - DO NOT USE ON A PRODUCTION WEBSITE
For production documentation, visit https://cdn.tkrconnector.com/doc/quickstart.html

πŸ”— Setting up Conversion Tracking for your Ecommerce Website

Traackr helps you drive sales with your influencers. To enable conversion tracking, you first need to install the Traackr Connector code on your website. Once connected you will be able to track the conversions and revenue that come from your influencers' tracking links.

Different ecommerce stores and websites have different steps for conversion tracking. This document covers a few different ways to install the Traackr Connector code on your website and start tracking link conversions and sales generated from your influencer marketing campaigns in Traackr.

πŸ”— Table of Contents

πŸ”— Set up Conversion Tracking for your Website via a Custom Integration

The Traackr Connector code can be installed on any ecommerce site via a custom integration.

πŸ”— Step 1: Add Snippet

πŸ”— Snippet Code

Copy the snippet below and paste it into the <head> tag of your site.

<script type="text/javascript">
    !function(){window.tkrc=window.tkrc||[];var tkrc=window.tkrc;if(!tkrc.initialize)if(tkrc.invoked)window.console&&console.error;else{tkrc.invoked=!0,tkrc.methods=["event"],tkrc.factory=function(t){return function(){for(var e=arguments.length,n=new Array(e),o=0;o<e;o++)n[o]=arguments[o];return n.unshift(t),tkrc.push(n),tkrc}};for(var t=0;t<tkrc.methods.length;t++){var e=tkrc.methods[t];tkrc[e]=tkrc.factory(e)}tkrc.load=function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="".concat("https://cdn.tkrconnector.com/dev/js/tkrc.js");var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)},tkrc.options={},tkrc.load()}}();
</script>

πŸ”— Snippet Options

Depending on how your website is setup additional configuration options may be required.

If your website uses multiple subdomains for the conversion flow you must configure the cookie’s domain.

In your snippet, update tkrc.options={} to include a cookieDomain property set to your root domain.

For example, if your links are for www.example.com, which has a checkout process that happens at checkout.example.com, then example.com should be used for the cookieDomain value:

tkrc.options={
    cookieDomain: 'example.com'
}

πŸ”— Step 2: Add Event Code

With the snippet installed you can start recording conversion events on your site. To track a conversion, call the tkrc.event() method. For example, on a checkout success page you could add the following to the <body> tag on the page:

<script type="text/javascript">
    tkrc.event('Purchase');
</script>

This is the simplest conversion event, including only the conversion type: "Purchase". More details can be provided for conversion events. These details will be visible within your campaign's "Conversions" section in the Traackr platform.

<script type="text/javascript">
    tkrc.event('Purchase', {
        transactionId: YOUR_TRANSACTION_ID,
        value: YOUR_PURCHASE_VALUE,
        valueCurrency: YOUR_PURCHASE_CURRENCY_CODE,
        products: [
            {
                id: YOUR_PRODUCT_ID_OR_NAME,
                quantity: YOUR_QUANTITY_SOLD
            },
            {
                id: YOUR_PRODUCT_ID_OR_NAME,
                quantity: YOUR_QUANTITY_SOLD
            }
        ],
        promoCode: YOUR_PROMO_CODE, // optional
        clientId: TRAACKR_CLIENT_ID // required if promoCode is set.
    });
</script>

Note: If you are using percent-based commissions, the value and valueCurrency properties are required for influencers to receive a commission on the conversion.

The full list of supported conversion event properties is in the appendix at the end of this document.

πŸ”— Set up Conversion Tracking for Shopify

πŸ”— Step 1: Add Snippet

  1. From the Shopify Admin page, navigate to Online Store -> Themes Online Store - Themes

  2. Click the Actions menu for your current theme, then click Edit code Edit Code

  3. In the Layout folder, click theme.liquid

  4. Paste the code snippet inside the <head> section of the code Install Snippet

πŸ”— Step 2: Add Event Code

  1. From the Shopify Admin page, navigate to Settings -> Checkout

  2. Scroll down to the Additional Scripts section, where you should see a box for Order Status Page Event Code

  3. Paste the code snippet in this box as well, followed by the purchase event code. The purchase event code can make use of the Shopify order data using their Liquid tags, e.g.

<script type="text/javascript">
    tkrc.event('Purchase', {
        transactionId: '{{ order_number }}',
        value: {{ total_price | money_without_currency }},
        valueCurrency: '{{ currency }}',
        products: [
            {% for line_item in line_items %}
                {
                    id: '{{ line_item.title }}',
                    quantity: {{ line_item.quantity }}
                },
            {% endfor %}
        ],
        promoCode: YOUR_PROMO_CODE, // optional
        clientId: TRAACKR_CLIENT_ID // required if promoCode is set.

    });
</script>
  1. Note: The code snippet needs to be included in this Additional Scripts box because theme.liquid does not apply to the Checkout page, so the snippet would not otherwise be loaded on the checkout page. With a Shopify Plus plan, it is possible to customize the checkout page theme and avoid loading the script here, but it's not recommended as any automatic updates won't apply to a customized checkout theme. See Checkout Liquid Theme for more info.

  2. Conversion tracking should now be enabled! You can enable Test Mode in Shopify to test out the integration without submitting real transactions. See Testing Shopify Payments.

πŸ”— Set up Conversion Tracking via Google Tag Manager (GTM)

The Traackr Connector code can be installed using the Google Tag Manager for more centralized management of your website's installed scripts. For non-natively integrated ecommerce sites GTM may be your primary way of installing scripts.

πŸ”— Step 1: Add Snippet

Install Snippet

  1. Create a new tag with a name like 'Traackr Connector', and select Custom HTML as the tag type
  2. Paste the code snippet in the box labeled HTML
  3. In the Triggering section, add the All Pages - Page View trigger. This will ensure the snippet is loaded on every page of the site that this Google Tag Manager container is installed on.

πŸ”— Step 2: Add Event Code

Event Code

  1. Create a new tag with a name like 'Traackr Purchase Event' and select Custom HTML as the tag type
  2. Under 'Tag Configuration - Advanced Settings', open the Tag Sequencing menu and select 'Fire a tag before SNIPPET_TAG_NAME fires', then select the snippet tag. Also, check the box that prevents the tag from firing if the snippet tag doesn't load. This will ensure the snippet tag is loaded before attempting to fire any events. You can also achieve this behavior using Prioritization. Tag Sequence
  3. If you've already integrated Google Tag Manager with your e-commerce flow, it's likely that you're using Variables to store cart and order information. If so, you can use those variables within the Purchase event options. Your tag should look something like this:
<script type="text/javascript">
    tkrc.event('Purchase', {
        transactionId: '{{TRANSACTION_ID_VARIABLE}}',
        value: {{PURCHASE_VALUE_VARIABLE}},
        valueCurrency: '{{ISO_CURRENCY_VARIABLE}}',
        products: [
            {
                id: '{{PRODUCT_A_IDENTIFIER_OR_NAME_VARIABLE}}',
                quantity: {{PRODUCT_A_QUANTITY_SOLD_VARIABLE}}
            },
            {
                id: '{{PRODUCT_B_IDENTIFIER_OR_NAME_VARIABLE}}',
                quantity: {{PRODUCT_B_QUANTITY_SOLD_VARIABLE}}
            }
        ],
        promoCode: '{{YOUR_PROMO_CODE}}', // optional
        clientId: '{{TRAACKR_CLIENT_ID}}' // required if promoCode is set.

    });
</script>
Note: `products` (if included) must be an array of objects, with each object representing one product.
  1. If you don't have access to order data within Google Tag Manager via Variables, you can leave out the event options and simply fire the Purchase event. You will still be able to see the total number of conversions in Traackr, but without any product or cost data. Your tag would look like this:
<script type="text/javascript">
    tkrc.event('Purchase');
</script>
  1. Create or attach a trigger to this event that will fire when an order is completed. If you're already using GTM for conversion tracking, you might already have one set up. Otherwise, you'll need to create a trigger that fires when a user has completed a checkout action, i.e the user has landed on an Order Confirmation page.

πŸ”— Verifying Conversion Tracking

A Traackr campaign with link tracking and conversions enabled can be used to test that conversion events are correctly recorded from your website. This could be an existing project or a new temporary one created just for testing.

  1. Add an affiliate link in the project's settings with your website as the destination URL.
  2. Generate a new link using the link settings you just added for an influencer in the project. We'll be deleting this link later to remove any test data.
  3. Open the link you just generated in your browser
    1. It's important, especially if testing multiple independent snippet installations, that you visit the link in an incognito-mode browser window or clear your browser's cookies for your website before testing.
  4. If you're comfortable using your browser's developer console, you can open it now and run tkrc.getAttribution() which will display any stored affiliate link click information. Otherwise, move on to the next step.
  5. Trigger the conversion event you setup in Step 2 of this document.
  6. Within several minutes you should see this conversion appear in your Traackr project's conversions page.
  7. The link you generated for testing can now be deleted, which will remove the associated conversion event data from your campaign.

πŸ”— Troubleshooting

There are a number of things that will determine whether or not Traackr Connector has been properly integrated into your e-commerce workflow. Here are some things to check:

πŸ”— Traackr Campaign Setup

πŸ”— Traackr Connector Integration

The Traackr Connector code snippet should be included on every page of your website. You can verify that the Traackr Connector script is being loaded by opening your by opening the network tab in your browser's devtools, reloading the page, and making sure that the tkrc.js script is found with a 200 status. Common issues include:

When the purchase event is correctly integrated, you should see a successful network request to api.tkrconnector.com/e being made by the browser. If this is not occurring then consider the following:

πŸ”— Appendix

πŸ”— Supported Conversion Event Types and Properties

πŸ”— Type: Purchase

Property Data Type Description Example
transactionId string A unique transaction ID, such as an order confirmation number. "112-9014566-344412398"
value number A non-negative decimal monetary value. 1099.53
valueCurrency string The three-letter iso-4217 currency code of the value field. If value is provided, this field is required. "EUR"
products Object[] An array of JSON objects with information about products associated with the conversion. The supported keys are id, and quantity
[
    {
        "id": "KS93528TUT",
        "quantity": 1
    },
    {
        "id": "FT4101",
        "quantity": 2
    }
]
promoCode String A string representing a promoCode
...
{
    "promoCode": YOUR_PROMO_CODE
}
...
clientID string A string representing the clientId which uniquely identifies your account. If this is not set, the promoCodes are ignored.

If you don’t have your Client ID, ask your Traackr Account Representative.

...
{
    "clientId": TRAACKR_CLIENT_ID
}
...