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:

<svg width="80" height="106" viewBox="0 0 80 106" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.0692 10.9677V47.6796C14.6976 47.9015 13.1444 48.3049 11.6315 48.9907C7.59723 50.8062 4.08741 55.5465 3.15952 59.4799C1.3441 67.145 15.2018 92.3794 35.6354 100.629C48.0408 105.632 57.8038 101.941 64.4604 96.7364C70.1487 92.2785 73.5375 86.7112 74.3645 84.4924C76.2001 79.5504 77.4305 46.4492 76.9868 44.9565C76.1799 42.2333 72.8516 37.9973 68.9182 37.9973C65.7715 37.9973 63.0484 39.8329 61.7574 42.4956V41.1239C61.7574 36.7467 58.1669 33.1562 53.7897 33.1562C50.8043 33.1562 48.2022 34.8103 46.8306 37.251V36.8879C46.8306 32.5107 43.2401 28.9202 38.8629 28.9202C35.9582 28.9202 33.3964 30.4936 32.0046 32.8536V10.9677C32.0046 6.59051 28.4141 3 24.0369 3C19.6597 3 16.0692 6.59051 16.0692 10.9677Z" fill="white" fill-opacity="0.8"/> <path d="M16.0692 47.6796V10.9677C16.0692 6.59051 19.6597 3 24.0369 3C28.4141 3 32.0046 6.59051 32.0046 10.9677V32.8536M16.0692 47.6796C14.6976 47.9015 13.1444 48.3049 11.6315 48.9907C7.59723 50.8062 4.08741 55.5465 3.15952 59.4799C1.3441 67.145 15.2018 92.3794 35.6354 100.629C48.0408 105.632 57.8038 101.941 64.4604 96.7364C70.1487 92.2785 73.5375 86.7112 74.3645 84.4924C76.2001 79.5504 77.4305 46.4492 76.9868 44.9565C76.1799 42.2333 72.8516 37.9973 68.9182 37.9973C65.7715 37.9973 63.0483 39.8329 61.7574 42.4956M16.0692 47.6796V65M61.7574 42.4956V41.1239C61.7574 36.7467 58.1669 33.1562 53.7897 33.1562C50.8043 33.1562 48.2022 34.8103 46.8306 37.251M61.7574 42.4956V48M46.8306 37.251V36.8879C46.8306 32.5107 43.2401 28.9202 38.8629 28.9202C35.9582 28.9202 33.3964 30.4936 32.0046 32.8536M46.8306 37.251C46.8306 37.251 46.8306 43.8023 46.8306 48M32.0046 32.8536V48" stroke="url(#paint0_linear)" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round"/> <defs> <linearGradient id="paint0_linear" x1="40.0388" y1="3" x2="40.0388" y2="103" gradientUnits="userSpaceOnUse"> <stop stop-color="#6A11CB"/> <stop offset="0.497238" stop-color="#3C53EC"/> <stop offset="1" stop-color="#2575FC"/> </linearGradient> </defs> </svg>