{"id":24533,"date":"2025-01-12T15:10:38","date_gmt":"2025-01-12T15:10:38","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/cookie-access-with-shopify-checkout-and-sgtm\/"},"modified":"2025-01-12T15:10:38","modified_gmt":"2025-01-12T15:10:38","slug":"cookie-access-with-shopify-checkout-and-sgtm","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=24533","title":{"rendered":"Cookie Access With Shopify Checkout And SGTM"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<p>In this guide, I\u2019ll show you how to add first-party cookie values <strong>client-side<\/strong>, which your <a href=\"https:\/\/www.simoahava.com\/analytics\/server-side-tagging-google-tag-manager\/\">server-side Google Tag Manager<\/a> processes can then access.<\/p>\n<p>You might be wondering: \u201cWhy bother?\u201d. After all, if server-side GTM is running <em>same-site<\/em> with the website sending the requests, why can\u2019t it just read the cookies on its own, right?<\/p>\n<p>Well, true. But there are cases where the website and web server <em>seem<\/em> to be same-site but are in fact not. One such case is Shopify\u2019s <a href=\"https:\/\/help.shopify.com\/en\/manual\/checkout-settings\/customize-checkout-configurations\/checkout-extensibility\">Checkout Extensibility<\/a>.<\/p>\n<p>If your Shopify checkout pages are running in this sandbox, then requests sent from the checkout page to a web server will not carry any cookies. Similarly, if you try to set cookies in the server response, it will not work either. Zooming in on the response, you\u2019ll see a warning like this:<\/p>\n<div style=\"aspect-ratio: 1392 \/ 420;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/shopify-cookies-problem.jpg\" title=\"Shopify cookies problem\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"420\" width=\"1392\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/shopify-cookies-problem.jpg#ZgotmplZ\" alt=\"Shopify cookies problem\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>The yellow background (in Chrome DevTools) indicates that the cookie was treated as a <strong>third-party cookie<\/strong>.<\/p>\n<blockquote>\n<p>If you check the info on the error, you\u2019ll see that it recommends setting the <code>SameSite<\/code> attribute correctly to allow handling third-party cookies. This is NOT the solution. You do not want to deal with third-party cookies as this is not (technically) a cross-site setup.<\/p>\n<\/blockquote>\n<p>So, if you want server-side Google Tag Manager to read first-party cookies for Google Ads and Meta Conversions API, you\u2019re out of luck.<\/p>\n<p>However, there <strong>is<\/strong> a way to sort this out, and that is to \u201cfake\u201d cookies by sending the cookie values in the client-side request.<\/p>\n<blockquote>\n<p>Caveat: I\u2019m not a Shopify user or a Shopify expert. I know there are other approaches, such as using the parent page to handle the tracking or by adding dedicated apps directly to Shopify. The advice in this article pertains to the situation where you want to use server-side Google Tag Manager for your ad tech needs.<\/p>\n<\/blockquote>\n<p>                <span class=\"simmer\"><br \/>\n  <span class=\"close\">X<\/span><\/p>\n<p>\n    <span class=\"fa fa-md fa-bell\"\/><br \/>\n    <strong>The Simmer Newsletter<\/strong>\n  <\/p>\n<p>\n    Subscribe to the <a href=\"https:\/\/www.simoahava.com\/newsletter\/\">Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n  <\/p>\n<p>  <\/span><\/p>\n<h2 id=\"how-it-works\">How it works<\/h2>\n<p>Since the sandbox restriction only applies to network requests between the site and the web server, you still have access to cookies <strong>set with JavaScript<\/strong> on the website itself.<\/p>\n<p>The solution is then to grab the cookie values client-side, attach them to the network request as event parameters, and then map or transform them server-side into a format that the vendor tags can read.<\/p>\n<div style=\"aspect-ratio: 2210 \/ 68;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/gcl-aw.jpg\" title=\"gcl-aw cookie\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"68\" width=\"2210\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/gcl-aw.jpg#ZgotmplZ\" alt=\"gcl-aw cookie\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<div style=\"aspect-ratio: 1988 \/ 48;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/_fbc.jpg\" title=\"_fbc cookie\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"48\" width=\"1988\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/_fbc.jpg#ZgotmplZ\" alt=\"_fbc cookie\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>In the examples of this article, we\u2019ll use the <code>_gcl_aw<\/code> and <code>_fbc<\/code> cookie values for the Google Ads click identifier and the Facebook click identifier, respectively.<\/p>\n<p>The Google Ads Conversion tag in server-side Google Tag Manager reads the click identifier from either the URL (as the <code>gclid<\/code> parameter) or from the <code>_gcl_aw<\/code> cookie. Since we don\u2019t have access to cookies in server-side GTM, we\u2019ll need to manipulate the page URL to include the <code>gclid<\/code> by using a <a href=\"https:\/\/www.simoahava.com\/analytics\/transformations-server-side-google-tag-manager\/\">Transformation<\/a>.<\/p>\n<p>The <a href=\"https:\/\/tagmanager.google.com\/gallery\/#\/owners\/stape-io\/templates\/facebook-tag\">Facebook Conversions API tag<\/a> (we\u2019re using the Stape template) has multiple ways of sourcing the click identifier. We\u2019ll use a simple tag setting to attach it to the conversion events, and we\u2019ll also make sure a Transformation removes the parameter from any other tag types.<\/p>\n<h2 id=\"what-about-google-analytics-4\">What about Google Analytics 4?<\/h2>\n<p>Google Analytics 4 relies on client-side processing for generating the event request. Thus server-side GTM doesn\u2019t actually need to access any cookies for GA4 hits to work.<\/p>\n<p>One notable exception is if you\u2019ve configured your server-side GA4 <strong>Client<\/strong> to use the \u201cServer Managed\u201d identity setting, which enables the <a href=\"https:\/\/www.simoahava.com\/analytics\/fpid-cookie-google-analytics-server-side-tagging\/\">FPID cookie for GA4 hits<\/a>.<\/p>\n<blockquote>\n<p>You <strong>must<\/strong> revert this setting to \u201cJavaScript Managed\u201d if you want to do <strong>cross-domain tracking<\/strong> with your Shopify checkout properly. FPID relies on cookies read and written over the network, and due to Shopify\u2019s sandbox restrictions, this is not possible on your checkout page.<\/p>\n<\/blockquote>\n<div style=\"aspect-ratio: 864 \/ 308;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/server-managed-fpid.jpg\" title=\"server-managed \"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"308\" width=\"864\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/server-managed-fpid.jpg#ZgotmplZ\" alt=\"server-managed \"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Make sure you switch this setting if you want cross-domain tracking to work properly.<\/p>\n<p>In the examples of this article, we\u2019ll be using Google Analytics 4 as the incoming data stream to server-side Google Tag Manager, where it will then trigger the Google Ads and Facebook CAPI tags, too.<\/p>\n<h2 id=\"google-ads-conversion-tracking\">Google Ads Conversion tracking<\/h2>\n<p>In this first section, you\u2019ll learn how to \u201cspoof\u201d first-party cookie access in SGTM, where that access is denied due to Shopify sandbox restrictions.<\/p>\n<p>The setup has many moving parts, mainly because the Google Ads Conversion tracking tag is a bit of a black box.<\/p>\n<blockquote>\n<p>If you want to follow along, this guide assumes that you <strong>already have a Google Ads Conversion tracking tag running in SGTM<\/strong>, triggering on a conversion event generated by GA4.<\/p>\n<\/blockquote>\n<h3 id=\"summary-of-actions\">Summary of actions<\/h3>\n<p>Here\u2019s what you\u2019re going to build.<\/p>\n<p>When the user comes to your web page from an ad click, the URL has the <code>gclid<\/code> parameter. This parameter contains information about the ad click, and it\u2019s a required part for Google Ads conversion tracking to work.<\/p>\n<p>Google Tag writes this value into a first-party cookie, so that it\u2019s available on your conversion pages, too.<\/p>\n<p>Because SGTM running with Shopify\u2019s sandbox can\u2019t access this cookie, you need to manipulate your client-side tags to grab the cookie value and pass it as a custom parameter to server-side GTM.<\/p>\n<p>In SGTM, you then need to construct a \u201cfake\u201d URL that includes this <code>gclid<\/code> value, so that the server-side tags \u201cbelieve\u201d there was a <code>gclid<\/code> in the URL.<\/p>\n<p>This way, when your Google Ads Conversion tags fire in server-side GTM, they can utilize this value, even if the page URL didn\u2019t have it.<\/p>\n<h3 id=\"parse-and-transform-the-_gcl_aw-cookie\">Parse and transform the _gcl_aw cookie<\/h3>\n<p>In your <strong>web container<\/strong>, you\u2019re going to need to make three changes:<\/p>\n<ol>\n<li>Create a 1st Party Cookie variable for <code>_gcl_aw<\/code>.<\/li>\n<li>Create a Custom JavaScript variable to parse the <code>gclid<\/code> value from the cookie.<\/li>\n<li>Add the <code>gclid<\/code> value as an event parameter to the conversion event tag(s).<\/li>\n<\/ol>\n<p>Here\u2019s what the 1st Party Cookie variable looks like:<\/p>\n<div style=\"aspect-ratio: 1020 \/ 610;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/1pc-gcl-aw.jpg\" title=\"1pc-gcl-aw.jpg\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"610\" width=\"1020\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/1pc-gcl-aw.jpg#ZgotmplZ\" alt=\"1pc-gcl-aw.jpg\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>The Custom JavaScript variable should have something like this:<\/p>\n<div class=\"highlight\">\n<pre style=\"background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4\"><code class=\"language-javascript\" data-lang=\"javascript\"><span style=\"color:#00a\">function<\/span>() {\n  <span style=\"color:#00a\">if<\/span> (<span style=\"color:#099\">\/[?&amp;]gclid=\/<\/span>.test(<span style=\"color:#0aa\">document<\/span>.location.href)) <span style=\"color:#00a\">return<\/span>;\n  <span style=\"color:#00a\">var<\/span> cookie = {{<span style=\"color:#099\">1<\/span>pc - _gcl_aw}};\n  <span style=\"color:#00a\">return<\/span> cookie &amp;&amp; cookie.split(<span style=\"color:#a50\">'.'<\/span>).pop();\n}\n<\/code><\/pre>\n<\/div>\n<p>The variable first checks if the page URL has the <code>gclid<\/code> parameter. If it doesn\u2019t, it then checks if the <code>_gcl_aw<\/code> cookie exists. If the cookie does exist, it grabs the string after the last <code>.<\/code> symbol, which would be the <code>gclid<\/code> value.<\/p>\n<p>To wrap up the client-side configuration, the value is added as an event parameter to the GA4 conversion event (which you use to trigger your Google Ads Conversions server-side):<\/p>\n<div style=\"aspect-ratio: 1684 \/ 214;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/custom-gclid.jpg\" title=\"Custom GCLID\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"214\" width=\"1684\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/custom-gclid.jpg#ZgotmplZ\" alt=\"Custom GCLID\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>I\u2019m using a custom namespace (<code>custom_<\/code>) so that it\u2019s easier to spot it in the server-side event data and prevent other tags from accessing it.<\/p>\n<h3 id=\"configure-the-server-side-setup\">Configure the server-side setup<\/h3>\n<p>Right now, if the <code>gclid<\/code> is available in the <code>_gcl_aw<\/code> cookie, your client-side tag will send it to server-side GTM using the parameter <code>custom_gclid<\/code>.<\/p>\n<p>Now you need to create a <strong>Transformation<\/strong> that makes the Google Ads Conversion tag <em>believe<\/em> the page URL has the <code>gclid<\/code> parameter, even if it actually didn\u2019t have it. Here are the steps to take:<\/p>\n<ol>\n<li>Create a new event data variable for <code>custom_gclid<\/code>.<\/li>\n<li>Create (or use) a new event data variable for <code>page_location<\/code>.<\/li>\n<li>Use Stape\u2019s URL Builder template to construct a URL variable that appends the <code>custom_gclid<\/code> value to the <code>page_location<\/code> URL as the <code>&amp;gclid<\/code> URL parameter.<\/li>\n<li>Create a Transformation that augments <code>page_location<\/code> with this new URL string.<\/li>\n<\/ol>\n<p>The event data variable for <code>custom_gclid<\/code> should look like this:<\/p>\n<div style=\"aspect-ratio: 1082 \/ 922;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/custom-gclid-sgtm.jpg\" title=\"Custom gclid SGTM\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"922\" width=\"1082\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/custom-gclid-sgtm.jpg#ZgotmplZ\" alt=\"Custom gclid SGTM\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>The event data variable for <code>page_location<\/code> should look like this:<\/p>\n<div style=\"aspect-ratio: 1100 \/ 922;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/page_location.jpg\" title=\"Page location\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"922\" width=\"1100\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/page_location.jpg#ZgotmplZ\" alt=\"Page location\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Next, install the <a href=\"https:\/\/tagmanager.google.com\/gallery\/#\/owners\/stape-io\/templates\/url-builder-variable\">URL Builder variable template<\/a> by Stape. This lets you construct a custom URL string in server-side Google Tag Manager.<\/p>\n<p>Once the template is installed, create a new variable using that template. Configure the variable like this:<\/p>\n<div style=\"aspect-ratio: 1466 \/ 1120;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/page-with-gclid.jpg\" title=\"Page with gclid\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"1120\" width=\"1466\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/page-with-gclid.jpg#ZgotmplZ\" alt=\"Page with gclid\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Finally, create a new <strong>Augment Event<\/strong> transformation that looks like this:<\/p>\n<div style=\"aspect-ratio: 1752 \/ 1544;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/gclid-transformation.jpg\" title=\"gclid transformation\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"1544\" width=\"1752\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/gclid-transformation.jpg#ZgotmplZ\" alt=\"gclid transformation\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Make sure you set <code>page_location<\/code> to the value of the URL Builder variable that constructed the \u201cfake\u201d page URL with the <code>gclid<\/code> value grabbed from the event data.<\/p>\n<p>It\u2019s a good precaution to activate this transformation only when <code>custom_gclid<\/code> actually has a valid value.<\/p>\n<p>It\u2019s also sensible to apply this transformation only to your Google Ads Conversion tracking tags.<\/p>\n<h3 id=\"test-the-setup\">Test the setup<\/h3>\n<p>Once you have all these in place, you can test the setup.<\/p>\n<ol>\n<li>Browse to your website using a dummy <code>gclid<\/code> value, such as <code>https:\/\/www.simoahava.com\/?gclid=just-testing-gclid<\/code>.<\/li>\n<li>Do whatever it takes to fire the conversion event.<\/li>\n<li>In server-side GTM, inspect the outgoing requests for the conversion event, and find the request generated by the Google Ads Conversion tag.<\/li>\n<li>You should see <code>&amp;gclaw=just-testing-gclid<\/code> among the parameters of the request.<\/li>\n<\/ol>\n<div style=\"aspect-ratio: 1796 \/ 702;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/test-gclaw.jpg\" title=\"Test gclaw\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"702\" width=\"1796\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/test-gclaw.jpg#ZgotmplZ\" alt=\"Test gclaw\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Now, repeat the steps above, except <strong>make sure the URL does NOT have <code>gclid<\/code> this time<\/strong>.<\/p>\n<p>Again, you should see <code>&amp;gclaw=just-testing-gclid<\/code>, because the Transformation \u201cfaked\u201d the URL with the parsed cookie value in the client-side request.<\/p>\n<div style=\"aspect-ratio: 1804 \/ 468;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/testing-again-gclid.jpg\" title=\"Testing again GCLID\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"468\" width=\"1804\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/testing-again-gclid.jpg#ZgotmplZ\" alt=\"Testing again GCLID\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Nice, you\u2019ve got your conversion tracking up and running even while using Shopify\u2019s sandbox!<\/p>\n<h2 id=\"facebook-conversions-api\">Facebook Conversions API<\/h2>\n<p>The Facebook setup is much easier, because you don\u2019t have to construct any fake URLs and you don\u2019t have to parse the <code>_fbc<\/code> cookie value either.<\/p>\n<p>This is thanks to Stape\u2019s <strong>excellent<\/strong> <a href=\"https:\/\/tagmanager.google.com\/gallery\/#\/owners\/stape-io\/templates\/facebook-tag\">Facebook Conversions API<\/a> template, which I recommend to <strong>anyone<\/strong> working with Facebook\u2019s CAPI in SGTM.<\/p>\n<h3 id=\"summary-of-actions-1\">Summary of actions<\/h3>\n<p>Similar to Google Ads, when someone clicks your ad in Facebook, they land on your site with the <code>fbclid<\/code> value in the page URL.<\/p>\n<p>This is then written into a first-party cookie by the Facebook pixel.<\/p>\n<blockquote>\n<p>This setup assumes that you have Facebook pixel running on the page, too. If you don\u2019t, then you need to use a custom client-side solution (such as a Custom HTML tag) to generate the <code>_fbc<\/code> cookie.<\/p>\n<\/blockquote>\n<p>Because SGTM can\u2019t read this cookie, you need to grab the <code>_fbc<\/code> cookie value and attach it to your GA4 conversion tags as a custom parameter.<\/p>\n<p>In SGTM, you\u2019ll then grab this value from the event parameters and attach it to the Facebook Conversions API tag. You can (and should) use a Transformation to remove it from other tag types.<\/p>\n<h3 id=\"parse-and-send-the-_fbc-cookie-value-as-an-event-parameter\">Parse and send the _fbc cookie value as an event parameter<\/h3>\n<p>In your web container, you\u2019ll need to do the following:<\/p>\n<ol>\n<li>Create a 1st Party Cookie variable for the <code>_fbc<\/code> cookie.<\/li>\n<li>Add it to your GA4 conversion event tag as an event parameter.<\/li>\n<\/ol>\n<p>Here\u2019s what the 1st Party Cookie variable looks like:<\/p>\n<div style=\"aspect-ratio: 1240 \/ 892;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/1pc-fbc.jpg\" title=\"1pc _fbc\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"892\" width=\"1240\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/1pc-fbc.jpg#ZgotmplZ\" alt=\"1pc _fbc\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>All you need to do next is add it as a custom parameter to your GA4 conversion tags (the ones that fire the Facebook Conversions API tag in SGTM):<\/p>\n<div style=\"aspect-ratio: 1716 \/ 590;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/custom-fbc-parameter.jpg\" title=\"Custom _fbc parameter\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"590\" width=\"1716\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/custom-fbc-parameter.jpg#ZgotmplZ\" alt=\"Custom _fbc parameter\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<h3 id=\"send-the-value-to-facebook\">Send the value to Facebook<\/h3>\n<p>In server-side Google Tag Manager, you\u2019ll need to do these things:<\/p>\n<ol>\n<li>Create a new event data variable for <code>custom_fbc<\/code>.<\/li>\n<li>Edit your Facebook Conversions API tags to include this value as the <strong>Click ID<\/strong>.<\/li>\n<li>Create a new Transformation to exclude this parameter from your other tags.<\/li>\n<\/ol>\n<p>Here\u2019s what the event data variable looks like:<\/p>\n<div style=\"aspect-ratio: 1072 \/ 762;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/event-data-fbc.jpg\" title=\"Event data _fbc\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"762\" width=\"1072\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/event-data-fbc.jpg#ZgotmplZ\" alt=\"Event data _fbc\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Here\u2019s how you add it to Stape\u2019s Facebook Conversions API tag:<\/p>\n<div style=\"aspect-ratio: 1768 \/ 622;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/stape-click-id.jpg\" title=\"Stape Click ID\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"622\" width=\"1768\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/stape-click-id.jpg#ZgotmplZ\" alt=\"Stape Click ID\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>And finally, here\u2019s what an <strong>Exclude Parameters<\/strong> Transformation looks like, where you remove the parameter from other tag types:<\/p>\n<div style=\"aspect-ratio: 1520 \/ 1286;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/exclude-facebook-transformation.jpg\" title=\"Exclude facebook transformation\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"1286\" width=\"1520\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/exclude-facebook-transformation.jpg#ZgotmplZ\" alt=\"Exclude facebook transformation\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>This makes sure that only the Facebook Conversions API tag type can \u201csee\u201d the event parameter.<\/p>\n<h3 id=\"test-the-setup-1\">Test the setup<\/h3>\n<p>Now visit your site with a custom <code>fbclid<\/code> value in the URL, for example <code>https:\/\/www.simoahava.com\/?fbclid=just-testing-fbclid<\/code>.<\/p>\n<p>In SGTM, you can then select the conversion event and open the <strong>Console<\/strong> tab in Preview mode. Stape\u2019s template has an extensive log trace, and you should find your custom Click ID in the outgoing request:<\/p>\n<div style=\"aspect-ratio: 2222 \/ 370;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/testing-fbclid-workaround.jpg\" title=\"Testing the fbclid in the URL\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"370\" width=\"2222\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/testing-fbclid-workaround.jpg#ZgotmplZ\" alt=\"Testing the fbclid in the URL\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<p>Next, visit the URL again **but without <code>fbclid<\/code> as a parameter.<\/p>\n<p>You should still see <code>fbc<\/code> in the outgoing Facebook request server-side, with the correct value sourced from the event data object:<\/p>\n<div style=\"aspect-ratio: 2204 \/ 372;\" class=\"figure nocaption\">\n<p>    <a href=\"https:\/\/www.simoahava.com\/images\/2024\/10\/test-fbc-without-fbclid.jpg\" title=\"Test _fbc without fbclid\"><\/p>\n<p>    <img decoding=\"async\" class=\"fig-img\" height=\"372\" width=\"2204\" loading=\"lazy\" src=\"https:\/\/www.simoahava.com\/images\/2024\/10\/test-fbc-without-fbclid.jpg#ZgotmplZ\" alt=\"Test _fbc without fbclid\"\/><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<h2 id=\"summary\">Summary<\/h2>\n<p>This is a convoluted approach to a sticky problem.<\/p>\n<p>Shopify has improved its security parameters quite a bit with Checkout Extensibility. The sandbox they\u2019ve introduced makes it difficult to do any custom setups, and Shopify probably wants to funnel users towards dedicated apps for advertising measurement, for example.<\/p>\n<p>However, as I\u2019ve always said, the power of server-side Google Tag Manager is in <strong>control<\/strong>. By routing your traffic through SGTM, you can assume full control over the data streams that flow through it.<\/p>\n<p>For this reason, I don\u2019t consider this article a <em>workaround<\/em> in the \u201cblack hat\u201d sense. It\u2019s more a way to work <em>with<\/em> Shopify\u2019s restrictions without compromising the control that server-side Google Tag Manager grants you.<\/p>\n<p>Mind you, this approach is useful for any scenario where the server is not in a <strong>same-site<\/strong> context with the website sending requests to it. By accessing cookies client-side and leveraging request parameters, you can \u201cfake\u201d server-side cookie reads.<\/p>\n<p>The one thing you can\u2019t do, though, is <strong>write<\/strong> cookies in the server response. There\u2019s no way to fake that.<\/p>\n<p>Let me know in the comments if this approach raised any questions! I\u2019m sure readers would also appreciate other approaches you have in mind for getting server-side GTM to work with Shopify\u2019s checkout.<\/p>\n<\/p><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>In this guide, I\u2019ll show you how to add first-party cookie values client-side, which your server-side Google Tag Manager processes can then access. You might be wondering: \u201cWhy bother?\u201d. After all, if server-side GTM is running same-site with the website sending the requests, why can\u2019t it just read the cookies on its own, right? Well, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":24534,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12033],"tags":[1846,16640,14315,16641,16639],"dealstore":[],"offerexpiration":[],"class_list":["post-24533","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-analytics","tag-access","tag-checkout","tag-cookie","tag-sgtm","tag-shopify"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cookie Access With Shopify Checkout And SGTM - Som2ny Network<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fivemor.com\/?p=24533\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cookie Access With Shopify Checkout And SGTM - Som2ny Network\" \/>\n<meta property=\"og:description\" content=\"In this guide, I\u2019ll show you how to add first-party cookie values client-side, which your server-side Google Tag Manager processes can then access. You might be wondering: \u201cWhy bother?\u201d. After all, if server-side GTM is running same-site with the website sending the requests, why can\u2019t it just read the cookies on its own, right? Well, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fivemor.com\/?p=24533\" \/>\n<meta property=\"og:site_name\" content=\"Som2ny Network\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-12T15:10:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/01\/cookie-access-shopify-sgtm.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fivemor.com\/?p=24533#article\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/?p=24533\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\"},\"headline\":\"Cookie Access With Shopify Checkout And SGTM\",\"datePublished\":\"2025-01-12T15:10:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=24533\"},\"wordCount\":2111,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=24533#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/01\/cookie-access-shopify-sgtm.jpg\",\"keywords\":[\"Access\",\"Checkout\",\"Cookie\",\"SGTM\",\"Shopify\"],\"articleSection\":[\"Analytics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fivemor.com\/?p=24533#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fivemor.com\/?p=24533\",\"url\":\"https:\/\/fivemor.com\/?p=24533\",\"name\":\"Cookie Access With Shopify Checkout And SGTM - Som2ny Network\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=24533#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=24533#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/01\/cookie-access-shopify-sgtm.jpg\",\"datePublished\":\"2025-01-12T15:10:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fivemor.com\/?p=24533#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fivemor.com\/?p=24533\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/?p=24533#primaryimage\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/01\/cookie-access-shopify-sgtm.jpg\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/01\/cookie-access-shopify-sgtm.jpg\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fivemor.com\/?p=24533#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fivemor.com\/?bp_activities=1\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cookie Access With Shopify Checkout And SGTM\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fivemor.com\/#website\",\"url\":\"https:\/\/fivemor.com\/\",\"name\":\"Som2ny Network\",\"description\":\"Daily Deals\",\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fivemor.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fivemor.com\/#organization\",\"name\":\"Som2ny Network\",\"url\":\"https:\/\/fivemor.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"width\":300,\"height\":86,\"caption\":\"Som2ny Network\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/fivemor.com\"],\"url\":\"https:\/\/fivemor.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cookie Access With Shopify Checkout And SGTM - Som2ny Network","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fivemor.com\/?p=24533","og_locale":"en_US","og_type":"article","og_title":"Cookie Access With Shopify Checkout And SGTM - Som2ny Network","og_description":"In this guide, I\u2019ll show you how to add first-party cookie values client-side, which your server-side Google Tag Manager processes can then access. You might be wondering: \u201cWhy bother?\u201d. After all, if server-side GTM is running same-site with the website sending the requests, why can\u2019t it just read the cookies on its own, right? Well, [&hellip;]","og_url":"https:\/\/fivemor.com\/?p=24533","og_site_name":"Som2ny Network","article_published_time":"2025-01-12T15:10:38+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/01\/cookie-access-shopify-sgtm.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fivemor.com\/?p=24533#article","isPartOf":{"@id":"https:\/\/fivemor.com\/?p=24533"},"author":{"name":"admin","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371"},"headline":"Cookie Access With Shopify Checkout And SGTM","datePublished":"2025-01-12T15:10:38+00:00","mainEntityOfPage":{"@id":"https:\/\/fivemor.com\/?p=24533"},"wordCount":2111,"commentCount":0,"publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"image":{"@id":"https:\/\/fivemor.com\/?p=24533#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/01\/cookie-access-shopify-sgtm.jpg","keywords":["Access","Checkout","Cookie","SGTM","Shopify"],"articleSection":["Analytics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fivemor.com\/?p=24533#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fivemor.com\/?p=24533","url":"https:\/\/fivemor.com\/?p=24533","name":"Cookie Access With Shopify Checkout And SGTM - Som2ny Network","isPartOf":{"@id":"https:\/\/fivemor.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fivemor.com\/?p=24533#primaryimage"},"image":{"@id":"https:\/\/fivemor.com\/?p=24533#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/01\/cookie-access-shopify-sgtm.jpg","datePublished":"2025-01-12T15:10:38+00:00","breadcrumb":{"@id":"https:\/\/fivemor.com\/?p=24533#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fivemor.com\/?p=24533"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/?p=24533#primaryimage","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/01\/cookie-access-shopify-sgtm.jpg","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2025\/01\/cookie-access-shopify-sgtm.jpg","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/fivemor.com\/?p=24533#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fivemor.com\/?bp_activities=1"},{"@type":"ListItem","position":2,"name":"Cookie Access With Shopify Checkout And SGTM"}]},{"@type":"WebSite","@id":"https:\/\/fivemor.com\/#website","url":"https:\/\/fivemor.com\/","name":"Som2ny Network","description":"Daily Deals","publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fivemor.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fivemor.com\/#organization","name":"Som2ny Network","url":"https:\/\/fivemor.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","width":300,"height":86,"caption":"Som2ny Network"},"image":{"@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","caption":"admin"},"sameAs":["https:\/\/fivemor.com"],"url":"https:\/\/fivemor.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/24533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24533"}],"version-history":[{"count":0,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/24533\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/media\/24534"}],"wp:attachment":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=24533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=24533"},{"taxonomy":"dealstore","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fdealstore&post=24533"},{"taxonomy":"offerexpiration","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fofferexpiration&post=24533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}