how to add gtm to shopify

Hey there, Benjamin from Loves Data here. In  previous videos, I've covered how to add Google  ,Analytics 4 (GA4) to Shopify. I've covered  how to add the dedicated GA4 tag, so gtag.js,  ,and how to track people adding items to their  cart. So I thought it was about time I covered  ,how you can use Google Tag Manager to send  data to GA4, instead of using the gtag.js code.  ,In this video, I'm going to show you how to add  Google Tag Manager to a standard Shopify store.  ,And I'm going to show you how  to capture transaction details  ,and send them to GA4 by adding a  data layer to your Shopify store.  ,I encourage you to watch the entire video  before adding Google Tag Manager to Shopify,  ,since there are some important considerations,  especially if you've already added the gtag.js  ,code to your store. Okay, let's head  to Google Tag Manager to get started...  ,As you can see, I've already logged into  Google Tag Manager and I've opened a container.  ,If you're just getting started with Google Tag  Manager, then you will need to create a Google Tag  ,Manager account and container first. I've  included a link to my Google Tag Manager tutorials  ,in the description below this video to help you  get started. Okay, so the first thing you'll need  ,to do is copy your Google Tag Manager container  code. To do this, we click the container ID  ,at the top... And let's copy the container  code at the top... I'm not going to use the  ,noscript tag today. Most tutorials will ask you  to add this to your Shopify store, but it's almost  ,never used. It only lets you fire a pixel if  someone doesn't have javascript enabled on their  ,device. It doesn't automatically track people with  JavaScript disabled, so I'm going to skip this,  ,but if you're super keen to use it, then feel  free to add it to the bottom of your pages.  ,Now that we've copied the container, let's head  to Shopify... We need to select 'Online Store'...  ,And check that you're looking at 'Themes'...  ,For our theme, let's select  'Actions'... And choose 'Edit Code'...  ,Now we need to open the 'theme', 'dot', 'liquid'  file... This file is used to create all of the  ,pages on your Shopify store, excluding the  checkout pages which I will talk more about later.  ,Now let's paste the Google Tag Manager container  tag as the first thing after the head tag...f  ,Next we're going to set up our data layer. To  do this we need to add some extra code above  ,the Google Tag Manager container. Let's head to  Google Tag Manager Help to get the code we need...  ,Traveling down... We can see the code... This is  used to establish the data layer on our website.  ,So let's copy this... And  let's head back to Shopify...  ,Now let's paste the data layer code  above the Google Tag Manager code...  ,I've also included a link to my blog that  contains all of the code you need in the  ,description below this video. So feel free to  get the code there too. Okay, now we can also  ,see that I've previously installed GA4 using  the gtag.js code, so I'm going to remove this.  ,If we left this tag, then we would be  sending duplicate events to GA4. If you  ,haven't previously added the Google Analytics  tag here, then you won't need to do this.  ,Now let's save the changes we've made  to the 'theme', 'dot', 'liquid' file...  ,The code we've just added will mean that  Google Tag Manager has been added to  ,all of the category and product pages on our  Shopify store. We've completed the first step.  ,The next thing we need to do is add Google  Tag Manager to the order confirmation page.  ,Let's head back to Shopify to do this...  We need to navigate to 'Settings'...  ,And then 'Checkout'... Then we need to scroll  down and look for 'Order Status Page'...  ,This lets us add tracking code to the order  confirmation page after someone has completed  ,their purchase. We can see I've already added  the gtag.js code here, so I'm going to remove  ,this first. If you do see any code here, then I  recommend taking a bit of extra time to review  ,what's been added. I'm only removing this code  because I'm replacing it with Google Tag Manager,  ,so make sure you don't remove anything  by mistake. And if in doubt, I recommend  ,copying what's already there and saving a copy  as a backup. Okay, so I'm going to remove this  ,code because this is the gtag.js code that I  will be replacing with Google Tag Manager...  ,Now I need to get the data layer and Google  Tag Manager container code to add here,  ,so let's head to my blog... Scrolling down we can  find the data layer I've created for you... This  ,code uses Shopify's liquid markup to dynamically  add the values for each transaction that occurs  ,on your website. So the elements in the curly  brackets (or braces) will be automatically  ,replaced by values for each transaction on  Shopify. This will include the order number,  ,total price, tax, shopping, currency, and  details for the items someone has purchased...  ,You will need to modify this to include  your container ID from Google Tag Manager,  ,so I will show you where to find that in  a moment. For now, let's copy this code...  ,And now let's head back to Shopify... And let's  paste this into the 'Additional Scripts' section  ,under 'Order Status Page'... Now remember we need  to modify this code to include our container ID,  ,so let's head to Google Tag Manager to get our  container ID... You will find your container ID  ,at the top... This is what we clicked to get the  container code previously. So let's copy this...  ,And let's head back to Shopify... Now let's  look for 'GTM', 'dash', 'Example' in my code...  ,And let's replace this with our container  ID... Now let's save our changes...  ,Great! We've now completed the second step!  When adding Google Tag Manager to Shopify like  ,we've done, there is one very important thing to  remember. Since we're using the standard version  ,of Shopify (and not Shopify Plus) we can't  add Google Tag Manager to the checkout steps.  ,Shopify doesn't let us. This means that those  pages won't be tracked. So we need to exclude  ,Shopify as a referral in GA4. So let's  head to Google Analytics to do this...  ,We're already in the admin area of Google  Analytics... We need to select 'Data Streams'...  ,Then select our data stream... Scroll to the  bottom... And select 'More Tagging Settings'...  ,Now we need to select 'List Unwanted Referrals'...  And enter 'myshopify', 'dot', 'com'...  ,And click 'Save'...  ,This will mean that the pages where we can't  add the Google Tag Manager container code  ,won't impact our data by showing  up as referrals in our reports.  ,Those checkout steps still won't be reported,  but at least we will have more accurate data.  ,While we're here, we need to get our  measurement ID for our GA4 property.  ,So let's close this... And at the top of the 'Web  Stream Details' page, we can see our 'Measurement  ,ID', let's copy this as we will need it in a  moment... The final step is to configure our tag,  ,triggers and variables in Google Tag Manager. So  let's head to Google Tag Manager to do this...  ,The first thing you'll need in Google  Tag Manager is a GA4 configuration tag.  ,This tag is used to send page views to  Google Analytics. So let's add a new tag...  ,Let's name the tag 'Google  Analytics GA4 Page View'...  ,And let's select 'Tag Configuration'... And  choose 'GA4 Configuration' as the tag type...  ,Now let's paste our measurement ID  that we copied from Google Analytics...  ,And let's select 'Triggering'... And  choose 'All Pages' as the trigger...  ,Now you can do this later, but I'm  going to publish these changes to  ,my Shopify store now So I'm going to  click 'Submit'... Name the changes...  ,And click 'Publish'...  ,I'm going to navigate back to the container...  Now we need to configure the tag, trigger and  ,variables for purchases on our Shopify store. I've  created a pre-configured container you can import  ,to Google Tag Manager to get setup quickly.  I've included a link in the description below  ,this video. Otherwise I've also included  details for the tag, trigger and variables  ,you will need to configure in my blog post.  There's also a link to this in the description  ,below. I'm going to import the pre-configured  container. So I'm going to select 'Admin'...  ,And then 'Import Container'...  Let's choose the file...  ,Select the existing workspace...  ,And I generally recommend selecting 'Merge' so  that your existing tags, triggers and variables  ,are kept... Now I'm going to import the  pre-configured container... Let's select 'Tags'...  ,This has imported two tags. A tag  that will send purchase details to GA4  ,and a tag that will send add to cart details. If  you would like to learn about the add to cart tag,  ,then I've included a link to my dedicated add to  cart tutorial in the description below this video.  ,Now let's select 'Triggers'... We can see  there are two triggers. One for purchases  ,and one for add to carts. These triggers will  fire our GA4 tag when people complete a purchase  ,(or add an item to their cart).  And let's select 'Variables'...  ,We can see there are six user-defined variables  that will get the values from the data layer we  ,added to the order confirmation page. The values  of each of these variables will be send to Google  ,Analytics. Okay, so now we need to configure  the tags. So let's head back to 'Tags'... We  ,can see I already have a GA4 configuration tag.  This will automatically send page views to GA4.  ,Now we need to configure the two tags  we imported to use the GA4 configuration  ,tag. So let's select the add to cart tag  first... And select 'Tag Configuration'...  ,Then we need to select our existing GA4  configuration tag... And then save the tag...  ,And now let's select the purchase tag...  ,And select 'Tag Configuration'... And select our  GA4 configuration tag again... And save the tag...  ,Now let's click 'Preview'  to test our purchase tag...  ,We enter the URL of our Shopify store...  ,And click 'Connect'...  ,Now we can select a product...  ,Add the product to our cart... And checkout...  ,Then we enter our details... And  click 'Continue To Shipping'...  ,Click 'Continue To Payment'...  Enter our payment details...  ,And click 'Pay Now'...  ,We can now see the confirmation page, so  let's select the 'Tag Assistant' tab...  ,We can see the purchase event... That  our GA4 purchase tag has fired...  ,And we can see the details from the data layer...  ,Let's check the purchase event has come through  to GA4. So let's head to Google Analytics...  ,And let's navigate to 'Configure'...  And then 'DebugView'...  ,We can see the purchase event has come through...  ,And we can select this to  see additional details...  ,We've now added Google Tag Manager to our Shopify  store and we're sending transaction details to  ,Google Analytics 4. Once you've tested your tags  and you're happy everything is working correctly,  ,you will need to publish your  changes in Google Tag Manager.  ,Let's head to Google Tag Manager to do this... We  just need to click 'Submit'... Name our version...  ,And click 'Publish'... Our purchase tag  has now been added to our Shopify store.  ,Remember that since we're using  the standard version of Shopify,  ,the Google Tag Manager container  won't be added to the checkout pages.  ,This is something to consider for all of the tags  you implement using Google Tag Manager, so take  ,some extra care when adding additional tags. Have  you added Google Tag Manager to Shopify? I would  ,love to know! Let me know in the comments  below. And if you found this video helpful,  ,please like it so I know to make more videos  like this one. I'll see you in the next video!

Congratulation! You bave finally finished reading how to add gtm to shopify and believe you bave enougb understending how to add gtm to shopify

Come on and read the rest of the article!