How to add Joyned to your Shopify store - with transaction tracking

How to add Joyned to your Shopify store - with transaction tracking

How to add Joyned to your Shopify store

Step 1: Log in to your Shopify admin site

Step 2: In the left-hand toolbar, click on “Online store”

image

Step 3: In the menu that appears, click on "Themes"

image

Step 4: Click on “Actions” and in the dropdown menu choose "Edit code"

image

Step 5: Click on “{/} theme.liquid”

image

Step 6: In the code that is generated, find the </body> section

image

Here, just above the “</body>” section, add the Joyned script tag, selected from the list below.

  • If your website supports different languages, and you want the Joyned tool to be available in those languages, Joyned needs to be embedded with a separate script for each language. Click below for the appropriate language script.
⚠️

We advise that you don’t add the code to pages where users might write PIIs, like check-out pages, forms etc.

The end result should look like this:

image

Step 7: Save and refresh your site to see the results

Select which language to deploy

Joyned deployment scripts

🌐
Arabic
Catalan
🇨🇳
Chinese Simplified
🇨🇿
Czech (Czech Republic)
🇩🇰
Danish (Denmark)
🇳🇱
Dutch
🇳🇱
Dutch - informal
🇬🇧
English
🇫🇮
Finnish (Finland)
🇫🇷
French
🇩🇪
German
🇨🇭
German (Switzerland)
🇮🇱
Hebrew
🇮🇱
Hebrew - Fashion
🇮🇹
Italian (Italy)
🇯🇵
Japanese (Japan)
🇰🇷
Korean (Korea)
🇳🇴
Norwegian
🇵🇱
Polish (Poland)
🇵🇹
Portuguese (Portugal)
🇷🇴
Romanian
🇷🇺
Russian (Russia)
🇪🇸
Spanish (Spain)
🇸🇪
Swedish (Sweden)
🇺🇦
Ukrainian (Ukraine)

Adding our tracking code

If you have opted for enabling transaction tracking, you will also have to add our tracking code, so we can track and report to you which session ended with a purchase.

Steps:

  1. Copy our tracking code to your clipboard with cmd + c on a Mac or ctrl + c on a PC.
  2. {% if first_time_accessed %}
    <script>
    var transactionId = '{{ order_number }}';
    var value = '{{ total_price | money_without_currency }}';
    var productId = '{{ product.id }}';
    
    const analyticsData = JSON.parse(localStorage.getItem('gamitee-analytics-data'));
    if (analyticsData) {
        const req = new XMLHttpRequest();
        req.open('POST', 'https://analytics.gamitee.io/report-transaction');
        req.setRequestHeader('Content-Type', 'application/json');
        req.send(JSON.stringify({
            analyticsData: analyticsData,
            transactionId: transactionId,
            value: value,
    	productId: productId
        }));
    }
    </script>
    {% endif %}

  3. From your Shopify admin, go to Settings > Checkout.
  4. Under Order processing, go to the Additional scripts text box.
  5. Paste your tracking code from your clipboard with cmd + v on a Mac or ctrl + v on a PC.
  6. Final results should look like this:
  7. image

Enabling our service

After the deployment of the code, contact your CSM to enable the service.

⚠️

After adding the code users still won’t be able to see our service, as it is disabled by default by us.

While the service is live but disabled we will run a few last tests to make sure that everything works perfectly and we will notify you before enabling the service on our end.

Questions?

Want to contact our customer success team?

We get it, people need people.

Feel free to contact your CSM, or email us and we’ll get back to you ASAP: team@Joyned.co

References: