Implementing Browser and Server Side Tracking on Shopify Using GTM and Meta CAPI | Adnan's Random bytes

Skip to content

Adnan's Random bytes

Programming, Productivity, Entrepreneurship and Life Hacks

Table of Contents

Toggle

A few months back, a friend of mine who runs multiple online stores called me after a long time. After the usual chit-chat, I asked about how his online sites were doing. He told me that he had recently started a new site; his first time on Shopify and running Ad campaigns did not yield any results. Previously, he had used OpenCart and WooCommerce for other sites.<br>Around February/March, I had completed a course on implementing website tracking, with a particular focus on server-side tracking using Google Analytics 4 (GA4), Google Tag Manager (GTM), and Stape. Since I was looking for an opportunity to apply what I had learned in a real-world project, I offered to review his setup and see if I could identify any issues. He agreed and gave me access to the store.<br>The store was set up by a mutual friend who was running a digital agency and was in the performance marketing space. In fact, right after completing the course, I had made a call to the same friend(the performance marketing specialist) to hand me a website where I could test and verify what I had learned in the course.  I offered him free-of-cost service and even asked him to collabrate so that he could see my implementation. For some reason, he got defensive and wondered what I could possibly implement that he hadn’t already. He said he had already implemented CAPI that was recording events. In short, he did not hand over a website<br>Most probably, he thought that I was entering his territory when I said I would improve Ads’ performance and thought I could steal his clients away. I will discuss in a while why a GTM(Google Tag Manager) tracking specialist is not an enemy but a friend of performance marketing experts and could work hand-in-hand as an assistant to improve both ROAS and the shopping store’s performance.<br>Alright, so after getting all necessary access to Shopify, GA4, Tag Manager, and Meta Business Suite, I began my inspection.<br>Before I get into details, allow me to explain what tracking is, its importance, what are server and client side tracking and how the job of a tracking specialist complements the job of a performance marketing specialist.<br>What Is Tracking<br>Tracking is the process of capturing and measuring specific user behaviors on your website or app(e:g., button clicks, page views, or purchases). GA4 and GTM are the tools most commonly used to carry out these tasks. GTM acts as a data collector while acts as a data receiver and reporting engine. There are two types of tracking when it comes to the implementation of website tracking: client-side or browser-side and server-side.<br>Client/Browser side tracking<br>It collects user behavior(clicks, page views, file downloads, or purchases) directly from the user’s browser(web or mobile) using JavaScript. The information is collected by Google Tag Manager(GTM), which then becomes available for GA4, Meta Pixel, TikTok Pixel, and other platforms. It is the de facto standard used by almost all websites that implement GA4, Meta Pixel, and others.<br>Server-side tracking<br>In server-side implementation, the data is moved from the user’s browser to your own server, which, then, after processing, is forwarded to GA4, Meta, or TikTok by using their respective conversion APIs. You could use server-side tracking tools like Stape, Taggrs, or the respective CAPIs of different platforms. In our case, it is Meta’s CAPI that was implemented to track server-side events in Meta Business Suite.<br>Client-side tracking vs Server-side Tracking<br>Now that you know what each kind of tracking is, let’s talk about a bit of comparison:<br>FeatureClient-Side TrackingServer-Side TrackingHow it WorksData collection is done directly in the

user’s browser via JavaScriptData is sent from the user’s browser to your own cloud server first, which then processes it and forward to 3rd party platforms(Meta, TikTok, etc)Data AccuracyLower. Easily blocked by Ad blockers, privacy browsers(e.g., Brave), and browser policies like ITPHigher. The data moves through your own domain, bypassing standard Ad blockers and extensionsSite PerformanceCould be degraded because 3rd party JavaScript tracking code is installed on your site, thus could increase the page load timeFaster. The browser loads a lightweight tracking script; the rest of the work is done by your serverCookie LifespanShort. Safari/Firefox restrict 3rd party cookies to 1 to 7 daysMore reliable with first-party cookiesTechnical ComplexityLow. Very accessible for marketers; usually involves pasting a snippet into the header or using a basic tag manager.High. It requires backend configuration and a custom subdomain and ongoing server maintenance costsThe bottom line is, if you need a quick zero-cost setup, client-side is the default, but if your goal is to set...