Setting up Google Analytics

Here's how you can install Google Analytics to your online store.

Written By Finqu Tuki

Updated at April 21st, 2022

This article will show you how to add Google Analytics to your Finqu online store.

To make the installation process easier, we have created custom codes for you that you can find below. A purchase event is added to the thank-you page's code, which provides information about orders' sums and items to Google Analytics. We've also added cross-domain tracking to the codes because the checkout page uses a different domain than the store.

All you need to do is add your GA tracking ID and domains to the codes and then add the codes to your online store.

Edit the tracking codes

You can connect Google Analytics to your Finqu online store with the tracking codes further down on this page. When you add them, you need to make the following changes to the codes:

  • TRACKINGCODE –> Replace this with your own Google tracking code (UA-code or GA4 measurement ID).

  • www.yourdomain.com --> Replace this example domain with your domain.

  • abcdefgh.finqucheckout.com --> Replace this one with your own checkout page's URL address. You can see the address on the browser's address bar if you proceed to the checkout page.

  • If you use Google Tag Manager, add your GTM code between the single quotation marks in a row that says var gtm = ''The result should look something like this: var gtm = 'GTM-XXXXXXX'
    (If you're not using Google Tag Manager, you can leave this unedited).

Adding the tracking code to the online store

Here is how you can add the Google Analytics code to your online store:

  1. Go to Online store > Snippets.

  2. Click Add in the Javascript (JS) section. An editor will appear on the page.

  3. Paste the tracking code (below) into the editor.

  4. Add your ID and domains into the tracking code.

  5. Click Save.

var ua = 'TRACKINGCODE';
var domains = [
    'www.yourdomain.com',
    'abcdefgh.finqucheckout.com'
];

function loadScript(src, callback) {
    var s,
        r,
        t;
    r = false;
    s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = src;
    s.onload = s.onreadystatechange = function() {
        if (!r && (!this.readyState || this.readyState == 'complete')){
            r = true;
            callback();
        }
    };
    t = document.getElementsByTagName('script')[0];
    t.parentNode.insertBefore(s, t);
}

loadScript('https://www.googletagmanager.com/gtag/js?id=' + ua, function() {
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', ua, {
        'link_attribution': true,
        'linker': {
            'domains': domains
        }
    });
});

 

Adding the tracking code to the checkout page

It's also helpful to add the tracking code to the online store's checkout page because it allows you to track customers' orders and conversions in your online store.

The procedure is quite similar to what it was with the online store, but in this one, you should remember to add the code to the checkout section (on step 2). Also, use the code below that's designed especially for the checkout page.

  1. Go to Settings > Checkout.

  2. Click Add in the Javascript (JS) section.

  3. Choose Both from the Target page menu.

  4. Click Confirm, and next, an editor will appear on the page.

  5. Paste the tracking code (below) into the editor.

  6. Add your ID and domains into the tracking code.

  7. Click Save.

var ua = 'TRACKINGCODE';
var gtm = '';
var domains = [
    'www.yourdomain.com',
    'abcdefgh.finqucheckout.com'
];

window.dataLayer = window.dataLayer || [];

function gtag() {
    dataLayer.push(arguments);
}

function loadScript(src, callback) {
    var s,
        r,
        t;
    r = false;
    s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = src;
    s.onload = s.onreadystatechange = function() {
        if (!r && (!this.readyState || this.readyState == 'complete')) {
            r = true;
            callback();
        }
    };
    t = document.getElementsByTagName('script')[0];
    t.parentNode.insertBefore(s, t);
}

function gtagSettings() {
    gtag('js', new Date());
    if (gtm) {
            gtag('config', gtm);
    }

    gtag('config', ua, {
        'link_attribution': true,
        'linker': {
            'accept_incoming': true,
            'domains': domains
        }
    });
}

function gtagPurchaseEvent() {
    gtag('event', 'purchase', {
        "transaction_id": "{{ checkout.order.id }}",
        "affiliation": '{{ checkout.order.channel_name | escape }}',
        "value": {{ checkout.order.total }},
        "currency": "{{ checkout.order.currency | upcase }}",
        "tax": {{ checkout.order.tax_amount }},
        "shipping": {{ checkout.order.shipping_costs }},
        "items": [
            {% for item in checkout.order.items %}
                {
                    "id": "{{ item.id }}",
                    "name": '{{ item.name | escape }}',
                    "variant": '{{ item.specifier | join:',' }}',
                    "list_position": {{ forloop.index }},
                    "quantity": {{ item.quantity }},
                    "price": '{{ item.price }}'
                {% if forloop.last == true %} } {% else %} }, {% endif %}
            {% endfor %}
        ]
    });
}

 

Adding the purchase event

You can also add the code to your online store's checkout page, which allows you to monitor customers' purchases on Google analytics. There are two codes:

The first code (to the front page in checkout):

  1. Go to Settings > Checkout.

  2. Click Add in the Javascript (JS) section.

  3. Choose Frontpage from the Target page menu.

  4. Click Confirm, and next, an editor will appear on the page.

  5. Paste the code (below) into the editor. You don't need to make any changes to this code.

  6. Click Save

loadScript('https://www.googletagmanager.com/gtag/js?id=' + ua, function() {
    gtagSettings();
});

 

The second code (to the thank you page in checkout)

  1. Go to Settings > Checkout.

  2. Click Add in the Javascript (JS) section.

  3. Choose Thank you page from the Target page menu.

  4. Click Confirm, and next, an editor will appear on the page.

  5. Paste the code (below) into the editor. You don't need to make any changes to this code.

  6. Click Save

loadScript('https://www.googletagmanager.com/gtag/js?id=' + ua, function() {
    gtagSettings();
    gtagPurchaseEvent();
});