Installing ServerTrack on Shopify

Introduction

Installing ServerTrack on your Shopify store enables server-side tracking for Facebook CAPI, TikTok ePIG, and GA4. This guide covers the step-by-step installation process for Shopify stores.

Prerequisites

Before installing ServerTrack on Shopify, make sure you have:

• Created a ServerTrack account and Server Deck
• Set up and verified your custom tracking domain (e.g., data.yoursite.com)
• Admin access to your Shopify store
• Your ServerTrack tracking script code from the dashboard

Step 1: Get Your Tracking Script

• Log in to your ServerTrack dashboard
• Select your Server Deck
• Go to the Installation section
• Copy the entire tracking script code

Your script will look like this:

<script>
(function(w, d, u, k) {
    w.ServerTrack = w.ServerTrack || {};
    w.serverTrackQueue = [];
    w.st = function() { w.serverTrackQueue.push(arguments); };
    var s = d.createElement('script'); s.async = 1; 
    s.src = u + '?key=' + k; 
    var h = d.getElementsByTagName('script')[0]; h.parentNode.insertBefore(s, h);
})(window, document, 'https://data.yoursite.com/tracker.js', 'YOUR_AUTH_KEY');
</script>

Step 2: Access Theme Editor

• Log in to your Shopify admin panel
• Navigate to Online Store → Themes
• Find your active theme (the one currently published)
• Click the "Actions" dropdown (three dots)
• Select "Edit Code"

Step 3: Edit theme.liquid

• In the theme editor, locate Layout folder in the left sidebar
• Click on theme.liquid file
• This is the main layout file that wraps all pages

Step 4: Add the Tracking Script

Find the </head> tag in theme.liquid and add the ServerTrack script just before it:

• Use Ctrl+F (or Cmd+F on Mac) to search for </head>
• Position your cursor just before the closing </head> tag
• Paste your ServerTrack tracking script
• The code should look like this:

    <!-- Other head content -->
    
    <!-- ServerTrack Tracking Script -->
    <script>
    (function(w, d, u, k) {
        w.ServerTrack = w.ServerTrack || {};
        w.serverTrackQueue = [];
        w.st = function() { w.serverTrackQueue.push(arguments); };
        var s = d.createElement('script'); s.async = 1; 
        s.src = u + '?key=' + k; 
        var h = d.getElementsByTagName('script')[0]; h.parentNode.insertBefore(s, h);
    })(window, document, 'https://data.yoursite.com/tracker.js', 'YOUR_AUTH_KEY');
    </script>
    
  </head>

• Click "Save" in the top right corner

Step 5: Verify Installation

After saving, verify the script is installed correctly:

Method 1: View Page Source

• Visit your Shopify store's homepage
• Right-click and select "View Page Source" (or press Ctrl+U)
• Search for "ServerTrack" or "tracker.js"
• You should see your tracking script in the HTML

Method 2: Browser Console

• Open your store in a browser
• Open Developer Tools (F12)
• Go to the Console tab
• Type: window.st and press Enter
• You should see a function, not "undefined"

Method 3: Network Tab

• Open Developer Tools (F12)
• Go to the Network tab
• Reload the page
• Filter by "tracker.js"
• You should see a successful request to your tracking domain

Shopify Plus Setup

If you're on Shopify Plus, you have additional options:

Checkout.liquid (Plus Only)

For Shopify Plus stores, you can also add tracking to the checkout process:

• Go to Settings → Checkout
• Scroll to "Additional scripts" section
• Add the ServerTrack script there for checkout tracking

However, the main script in theme.liquid is sufficient for most tracking needs.

Implementing Event Tracking

After installing the script, you'll need to implement event tracking in your theme. Common Shopify events include:

Purchase Event

Add this to your checkout.liquid or order confirmation page:

<script>
{% if first_time_accessed %}
  var userData = {
    em: "{{ checkout.email }}",
    ph: "{{ checkout.shipping_address.phone }}",
    fn: "{{ checkout.shipping_address.first_name }}",
    ln: "{{ checkout.shipping_address.last_name }}",
    ct: "{{ checkout.shipping_address.city }}",
    country: "{{ checkout.shipping_address.country_code | downcase }}"
  };

  var contents = [];
  {% for line_item in checkout.line_items %}
  contents.push({
    id: "{{ line_item.product_id }}",
    quantity: {{ line_item.quantity }},
    item_price: {{ line_item.price | divided_by: 100.0 }}
  });
  {% endfor %}

  st('track', 'Purchase', {
    currency: "{{ checkout.currency }}",
    value: {{ checkout.total_price | divided_by: 100.0 }},
    transaction_id: "{{ checkout.order_id }}",
    content_ids: [{% for line_item in checkout.line_items %}"{{ line_item.product_id }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
    contents: contents
  }, userData);
{% endif %}
</script>

Add to Cart Event

For the add to cart event, you can use Shopify's AJAX API or add custom JavaScript to the product form.

Testing

• Complete a test purchase on your store
• Go to your ServerTrack dashboard → Event Logs
• You should see the Purchase event appear within 10-30 seconds
• Check that the event status is "success" or "pending"

Common Issues

Script Not Loading

• Verify your domain is verified in ServerTrack
• Check that the script URL matches your verified domain
• Ensure there are no JavaScript errors in the browser console

Events Not Being Tracked

• Verify the script is installed correctly (check page source)
• Ensure ServerTrack script loads before your event tracking code
• Check that your Server Deck status is "Active"
• Review event logs in ServerTrack dashboard for errors

Next Steps

After installation:

• Configure your platform integrations (Facebook, TikTok, GA4) in ServerTrack
• Implement standard events (Purchase, AddToCart, ViewContent)
• Test events using the Live Event Debugger
• Monitor event logs to ensure everything is working

For event implementation guides, see our Tracking Purchase Events guide.