How to pull data relative to the clicked element in Google Tag Manager

Your variables don’t get filled with the information you want to track? With Relative Click Variables you will be able to pull in information relative to the interaction you tracked. n this video, let’s go through the steps setting up a Relative Click Variables

Step by Step:
Enable your generic click trigger + Built-In Variables
Click on the element
Retrieve the latest value of the gtm.element in the Dev Tools with google_tag_manager[“GTM-XXXX”].dataLayer.get(‘gtm.element’)
Use the command .parentElement and querySelector to get to your desired output
Transfer all that into a Custom JavaScript variable

🔗 Links

The google_Tag_manager object https://www.youtube.com/watch?v=WdPxW-AttKw

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

When you set up a click trigger, you click the button and in your variables only the click text and click URL get filled out. But you’re really interested in values that are surrounding your click, how can you set this up? In today’s video, I’m going to show you how you can set up relative click variables which is a bit of an advanced technique in auto-event tracking, all and more coming up.

Hey there measuregeeks. Julian here back with another video for you. Today, we want to talk about how to create relative click variables. This is a bit more advanced in auto-event tracking. So maybe not something for beginner. But let’s imagine you had a case where you have different products that you want to track based on the click, but you are not interested in picking up the button text or the link that is behind that button click. But rather a value that is surrounded to this click. So for example, the price or the image URL this product. Well, obviously, this doesn’t get filled into your variables because the click trigger oftentimes only picks up the values that you actually clicked. But as you know, Google Tag Manager JavaScript is versatile. So there’s always a workaround somewhere. And today, I want to show you how you can set up relative click variables that actually take a value that is surrounding that as relative to that click and pull that into your variable so you’ll be able to use it in your tags, and triggers. Now we got lots to cover. So let’s dive in.

Welcome back to our demo shop. On this demo shop. I already have Google Tag Manager installed. And I want to now create a variable relative to my click. What does this mean? Well, let’s imagine here on this product page of this product, I click the Add to Cart button. I’ll do this with the command keypress. We see with our click trigger installed a click event within our preview mode here. And when we look at the variables, we can see how they got filled. So for example, we have our click classes right here, we have our click element, click ID didn’t get filled, the target didn’t get filled. And the click text is add to cart. This is all fine if I just want to track the button. But what if I wanted to track information relative to this button click. So for example, I wanted to track how much was the product price of this product relative to the add to cart click. Or what was the product name relative to the add to cart click or what was the image URL so that these variables get filled. Even though I go to another product and have here completely different set of variables.

If I click Add to cart, I still want to pull the price, I still want to pull the title or the image URL. And I’ve experimented with this already. So we can see here if I click the Add to Cart button, we get the variable price filled accordingly because it pulls it relative to this click in to this variable. Now, this is a custom JavaScript variable. And let me show you how to set this up at an example of our title here. So how could we pull the title relative to the add to cart click. Now prerequisites for this, obviously, you will need to have a trigger installed which is a simple click trigger. I went with the all elements trigger. So just to show you how to set this up, we have here in a generic click trigger which means we choose either just clicks or all elements. I usually good all elements and choose all clicks here without any filters attached to this. And this will simply deploy our listener functionality of the trigger. So I have to set up already. And this will push when I click anywhere on the page, these click into my preview and into my data layer. Now that Google Tag Manager is registering clicks, we need to set up a variable. As I mentioned, this will need to be a custom JavaScript variable. And you will need to know a little bit of JavaScript and a little bit of CSS in order to configure this correctly. But I’m going to show you this step by step. So the first step that we would need to go through is right here, let’s reload our page. And the first step would be to actually click on our add to cart click. So we see a click element down here in the events menu of our preview mode. Going to do this with the command key press so it doesn’t reload the page. And here we have our click. Now, this click

gets transferred into the data layer with certain elements right here. What we want to look at is the GTM element which is currently an object HTML button element. What does this actually mean? And how can we see this? For this, we need to open up our developer tools. So we go up here into Chrome menu, more tools. And here we have our developer tools usually start out with the elements pane, we will go with the console right here. And now we’ll type in some commands in order to see what is stored in this GTM element. So just follow along. We will access the GTM JavaScript object by typing Google_tag_manager. And then in square brackets with quotation marks we’ll type in our GTM container ID. You find this up here as well in your preview and debug mode. I have this already stored in here. So maybe this will even be auto-filled out for you in your Chrome console as well. And then we’ll attach a dot and access the data layer. dataLayer with a capital L, another dot and then we’ll get a key from our data layer, again, in parentheses, with quotation marks we’ll put in the key which we can see here the GTM.element. You press enter and we get a return statement.

And when we hover over it, we can actually see in our pages in the background that now our button is highlighted. Now, this is the element that the trigger recognizes once you click the button. What we’ll do now is to climb up the DOM tree. What does this mean? But if I right-click here and just click on reveal and elements panel, we’ll go over to the elements panel right here, and we will see the DOM tree. Now, this is the element that we have selected. What we will do need to do now is climb up this tree just like this and get to our H1 element, the product title here, happy Ninja, which we want to then pull out. How can we do this? Well, let’s go back to the console. And now we’ll choose a command that will climb up the tree. We can choose to command parent element. And I simply press Enter. And here we get the next parent element to the clicked element here which is our form class right here.

Now what we will see is that our product title here is that not yet highlighted because the parent element is actually not within that tree structure that we just climbed. She went to visualize this again, to go back to the elements pain, we just climbed from here to here. And we’ll go the next step and climb to the next parent element, which would be the summary entry. So let’s do that by just clicking the up arrow will get the last command back, don’t have to type this all over again, and put in again a dot parent element, press Enter whoops, or get an arrow, I written everything correctly. So let me just see inside of our preventive mode, you see, I generated another click. So now obviously, the relationship changed. And we have not our button click anymore as the GTM element. Let me just see what is now as the UTM element in the data layer. It is just the background of our premium development. Okay, so let’s go through the steps again, we click on Add To Cart.

This time, I should have my GTM element which is my button. And now I’m going to attach our parent element and parent element again. And this time we see we are now on this summary class, this div class. It actually encapsulates our h1 as well. Again, we reveal this and the elements panel. You can see we are right here right now. Now we need to go one deeper again, or go search through the children of this parent element to find our product title. You can see here this is h1 and product title as a class. So we can simply choose the CSS selector to select this item. We will go over to console again and I press the up arrow and this time I’m going to choose a command called query selector. And in parentheses and quotation marks, we can put in our CSS selector, in our case it would be h1 and then dot product_title. Let’s try this. And we get our result back right here. Now we are now at the right element. And now we want to just pull the text out that is within this element. And we can do this with the command.innertext, press Enter. And this is the result that we want to get in our variable later on happy ninja.

So we have completed to our command that we can now simply copy and put it into a custom JavaScript variable. So we’ll go under user defined variables, create a new variable, custom JavaScript, let’s called it product title, and the variable will be a custom JavaScript variable. And here we’ll put in our JavaScript. Now it’s important to know that custom JavaScript needs to have an ominous function and needs to return something. So I’m first going to put in an ominous function and then return a statement. Now we can just copy and paste here our statement if we had the developer console before and let’s try this out. Let’s go and save, refresh our premium debug mode, go back to our page. And once it’s reloaded, you can click on our add to cart with our fourth element here. And I go to variables. And here we go, custom JavaScript product title is now happy ninja. Now, let’s try this out on a different product. So I’m going to go over to next product here. Should be the ID expected output, going to click on Add To Cart. And under the click event. We now see our product title is undefined. So why is this undefined. And this can happen sometimes because the HTML markup here actually changed. Probably there’s some more elements in this product, or maybe it’s just marked up differently. So let’s debug this really quickly, I’m going to go ahead and just pull up my last command with the up arrow, press enter. and correct it is not the somehow. So let’s step by step, go and get rid of our inner HTML here, we see we can actually pull anything with h1 was just not found. Let’s go further. And here we see that our second parent is just this element and doesn’t encapsulate our product title. So I’m going to go back further.

Okay, and here we are at the same element again. So maybe we need to put in another parent element, another parent element. See if this encapsulates our product title. No, not yet. you hover over it just this here. So we need to go even further way up. Here we go. Now it encapsulates it. And we can again do our query selector, and our h1.producttitle. Alright, so here we go. Here we have our inner HTML or inner text. This is the product type that we want to have out. So let’s try this out again. I’m going to copy this all because now we went a step further which should also still work for our old product. But we will need to try out. That’s also just a Tag Manager, you will need to test, test, and test again. So will refresh and go back to our page. On this page, since we have tested it, it should work. I’m going to add this to cart, and the product title should be your ideas. So this is correct. Let’s go back to our old product. And add this to cart. And our variables. Now it say product title is happy ninja. Let’s go to another product and add this to cart. And here’s our product title whoo ninja. That is also correct. So now we have adjusted our relative click variable to always pull out the correct product name relative to the click that we have down here. Now you can use this technique in many different circumstances. You just need to know a little bit how you can pull out the right values from the DOM tree and know how to get to the right element by using parent element and then the query selector to search through the DOM tree, select the right element, then pull out the right value. Now that we have this variable setup, you can obviously use it in your triggers. Or also intact deployments directly inside of customization tag like the Facebook Pixel, or inside of a Google Analytics event tag to transfer this all over to Google Analytics. But I trust you will be able to set this up by yourself. Don’t forget at the end, if you want to have this live on your website, submit the version, give it a name. And then this tracking will be deployed to all your users.

All right, so there you have it. This is how you can set up relative click variables. And I don’t know let me know in the comments down below. Is this something that you already knew? Or is this something that you use often on? And where would you use this. I oftentimes uses with a click trigger but it would totally be possible to also use with the scroll tracking or with the element visibility trigger if you know what you’re doing. So I’d be interested in your use cases. Leave me a comment down below. And if you haven’t yet, then consider subscribing to our channel because we bring you new videos just like this one every week. My name is Julian till next time.

SHOW MORE...

New GTM Custom Templates explained (feat. Kevin from Bounteous)

The release of the GTM Custom Templates is such a big deal as it has given us a more secure way of tracking. In today’s video, I have Kevin Haag of Bounteous to help understand this feature and how we can utilize it within Google Tag Manager

🔗 Links:

Getting Started with Google Tag Manager Custom Templates: https://www.bounteous.com/insights/2019/05/28/getting-started-google-tag-manager-custom-templates/

GTMTemplates Library: https://www.gtmtemplates.com/

Bounteous.com: https://www.bounteous.com/

Custom Templates Guide (Simo Ahava): https://www.simoahava.com/analytics/custom-templates-guide-for-google-tag-manager/

GTM Custom Templates (Google) https://developers.google.com/tag-manager/templates/

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

In this video, Kevin from Bounteous is going to show you how you can utilize this new feature within Google Tag Manager called templates. All and more coming up.

Hey there measuregeeks, Julian here back with another video for you. Today, we want to talk about Google Tag Manager templates which is a new addition to Google Tag Manager and a pretty big one because it extends Google Tag Manager in so many different ways. So I asked my friend Kevin Hagg from Bounteous to come on the channel to talk about Google Tag Manager templates because he has written a very extensive blog post on bounteous.com. Now, I must admit, bounteous is one of my go-to resources when it comes to Google Tag Manager. When I got started with Google Tag Manager, I read their blog incessantly. And I also got a lot of inspiration to make these videos. So big shout out to Bounteous. If you haven’t checked them out yet, please have a look in the description down below where we have them linked up as well. But back to Google Tag Manager templates because we got lots to cover. So Kevin, take it away. Thanks, Julian. And Hi, everybody. My name is Kevin Hagg and I’m an analytics tech lead at Bounteous. Today, we walk through the recently introduced feature in Google Tag Manager, the Custom Templates. Before we get started, let’s take a look what templates are currently available in GTM. Once you create a new tag in GTM, you have a variety of tag types to choose from. Google tag manager has long supported the three native tag types featured for Google tools like Google Analytics or Google Ads. Custom, the tag type for inserting your marketing pixel if there are no supported templates in GTM and more. In this category, you’ll find third-party tags from approved vendors. While we may have many different vendors in here, you’ll notice we don’t have a tag type for all the Martek solutions out there in this list. For instance, I don’t see a template for Facebook, or for Salesforce, for example. Even for some texts that we have in here, like this LinkedIn inside tag, there may be limits for how we can use it. Well, what do you do with a tag you want is not available? In the old days, you’d go ahead, you copy the code, and you either paste it into a custom HTML tag or you paste the URL into a custom image tag. This introduces extra complexity and actually adds risk to your site.

But now, there’s a better way. In May 2019 GTM introduced custom templates. These are standardized templates built by the community and martech companies and introduce them more rigid and secure way of tracking than just pasting the code into the custom HTML tag. In the past, Bounteous and others have created recipes or importable solutions to common tracking problems. Custom templates are more official encouraged best practices. And we’re thrilled about what this means for the GTM users. First off, anyone can create a custom template, either for variable or for a tag, just by clicking New. I won’t go into much detail today about creating a custom template. But if you’re interested, I wrote a blog post talking about the full building process on the Bounteous blog. The link to the post is available in the video description. However, most GTM users won’t need to create their own templates. The biggest benefit to GTM users will likely come in using and sharing templates that others have created. So let’s look at that process.

Take LinkedIn inside tag that I mentioned earlier. If you’re running any sort of LinkedIn campaign to drive traffic to your site, you will want to make sure you’re able to measure how they’re performing. In GTM, we already have the site-wide inside tag that fires on every page and enables you to define URL based conversions. But when there is no unique URL, you have to fire an event-specific pixel. To make this easier, we created a custom template for you. Keep in mind that this is a template built by Bounteous and not an official template from the LinkedIn Corporation. You can get a template from anywhere, someone can email it to you, you can download it on a blog, or in this case, you can get it from the current best option GTMtemplates.com. This site is a community-supported portal created by Simo Ahava and David Vallejo. We will put the link to the site into the video description as well. In here, you’ll find templates for Facebook, Yandex Metrica, LinkedIn, or Pardot. And I’m really excited to see what else gets created in the future. Now let’s go back to my LinkedIn example from earlier. On the detail page, with one click, we can easily download the TPL file, which is our template file. Now the file is downloaded. Let’s go back into Google Tag Manager. To import a custom LinkedIn template, let’s open the contextual menu and import the .tpl file. Now, we can either test our template by using the preview mode, or we can save it right away. In this video, we won’t go over the underlying code and the template creation process as mentioned earlier. So let’s hit save for now.

The LinkedIn event tag is now part of your available Google Tag Manager tag types. Let’s verify that. Go to tags. Let’s create a new tag. And you will find your template under the custom section. Let’s use our custom template to build our first LinkedIn tag. Let’s fire this LinkedIn tag on a form Submit.

I have to insert two values here, the partner ID and the conversion ID. You’ll find both values in the LinkedIn campaign manager. To make my life easier, I store the partner ID in a custom GTM variable. So I don’t have to copy and paste the same code over and over again. For the conversion ID, for now let’s say random string like 1234.

Now, let’s choose the appropriate trigger. I already created a form submit trigger. So let’s apply that to the tag and save our LinkedIn event tag.

Now we’re almost ready to go. As always, make sure you QA your tag before you publish. As you can see, most users will benefit from using templates that others have created and shared, they’re less risky and more user-friendly than pasting in custom HTML. I encourage you to explore the galleries of options and to leverage custom templates also in your GTM container. If you’re interested in creating your own or want to know more, check out the posts I’ve shared earlier and made sure to read Simo’s comprehensive guide. Both are linked in the video description. Lastly, thanks to all the companies and individuals that have contributed so far. I can’t wait to see how custom templates evolve. Now back to you Julian.

Alright, so there you have it. These are Google Tag Manager templates. Thank you, Kevin, from Bounteous. Please check out his blog posts down below he has much more details about templates. And if you want to build your own templates, then you probably need to know a little bit of JavaScript and you need to be a developer probably already because it’s not that easy to figure out. But Kevin has written everything up in his blog post down below. Now I’d love to hear from you. Will you utilize Google Tag Manager templates? Or will you just keep on with your custom HTML tag? Let us learn together in the comments down below. And if you liked this video, why not give us a thumbs up and also subscribe to our channel right over there because we bring you new videos just like this one every week. Now my name is Julian, see you in the next one.

SHOW MORE...

Facebook Pixel Scroll Tracking with GTM

Google Tag Managers Scroll depth tracking is great for discovering how much of your page is viewed by the user. To make this information actionable we can send this information to the Facebook Pixel too. In this video Ahmad (from Siavak.com) is going to show us how.

🔗 Links:

Facebook Pixel Doc: https://developers.facebook.com/docs/facebook-pixel/

Scroll Depth Trigger: https://www.youtube.com/watch?v=mcQdCl-B3lw

Combine Scroll + Timer Trigger: https://youtu.be/71pCKRouabc

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste Extention https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

Scrolling down the page can tell us a lot about our website visitors behavior. In today’s video, Ahmad is going to show you how you can utilize the scroll depth trigger of Google Tag Manager to capture the value of how far a user went down your page, then send this data over to the Facebook Pixel. So you’ll be able to create an audience of that of users, for example, who only saw 50% of the page or scrolled further than 75% of your website. Sounds like a plan. Well, we’ve got lots to cover, so Ahmad take it away. Thanks, Julian.

Ahmad here with another Google Tag Manager tutorial. And in this video, I’m going to show you how to set up a scroll tracking on this page, I reported to Facebook Ads for your Facebook pixels custom events. We’re going to use Google Tag Manager. So let’s head over to Google Tag Manager and set up the tags and triggers necessary for this. So first, we need to set up our base Facebook Pixel tag. For this purpose. Let’s head over to our Facebook Ad manager. Open this menu, go to all tools, pixels. And find a pixel we’re going to report to. Then click on the pixels name and choose set up. Here in install pixel, we need to choose manually install pixel code yourself, scroll down and click to copy the code to the clipboard. That’s it here.

Now let’s head back to Google Tag Manager, tags and create a new tag. Because before we fire any custom event to a facebook pixel, we need to have the base pixel already initiated. Let’s give it a name. Click on tag configuration and choose custom HTML. Now we can paste the pixel code here. We want this tag to fire on all pages. So we need to click here. Choose all pages and save the tag. Next, we need to set up our scroll trigger. Let’s navigate to triggers and create a new trigger. Let’s give it a name. And click on trigger configuration and choose a scroll depth. Here we need to choose what kind of scroll do we want to track, vertical scrolling or horizontal scrolling. In this case, we want where to go. And then we have to decide on what percentages do we want our school trigger to fire. Let’s put 25, 50 and 75 here. This means that our scroll trigger will fire whenever someone scrolls pass 25% of the page, 50% of the page, and 75% off the length of the page. Finally, we want the trigger to fire on all pages. So we don’t need to touch anything down here. And we can save our trigger. Let’s preview the container to verify that our scroll depth trigger and facebook pixel are firing properly. Now that our container is in preview mode, let’s go to our website and refresh the page. So far, so good, the page has loaded and we can see that our Facebook base pixel has fired once. We can also double-check with facebook pixel helper Chrome plugin and verify that the pixel has been fired. We can click on this and we can see that the facebook pixel with this pixel ID has actually been fired. Okay, now let’s close this and see what happens when we scroll down the page. We need to keep our eyes at this pace. Because when a trigger fires, we should be able to see the triggers title here. Let’s scroll down. Okay, so as soon as we pass 25% mark of the page, we can see here that our first school depth trigger has fired. Now let’s continue scrolling down and we should be able to see the scroll depth trigger for 50% and 75% also being fired. So far, so good, our scroll depth trigger and Facebook base pixels are firing properly. Next step would be to create a tag to report this scroll depth triggers to this facebook pixel through a custom event. Let’s head over to Google Tag Manager again, click on tags and create a new tag.

Let’s give our tag a title. And for this one, we also need to use a custom HTML tag. To report custom events to the Facebook pixel, we need to use some JavaScript here. We start with FBQ and then track custom. And then we need to define a name for our event. And this is something that we need to decide because this is not one of the Facebook pixels standard events. I’m going to name it to scroll. And then we need to use curly brackets to pass the actual scroll depth. For example, 25. But the problem of using a static value here is that it will always be the same, it will always be 25%. But what we actually want is to send the exact percentage of the scroll depth to Facebook each time the scroll depth trigger fires. And for this, we need to use one of the Google Tag Manager variables. So let’s keep the tag like this for now. And just apply the trigger, which is our scroll depth. And save our tag while it’s in progress. And create a variable that we can use to pass on the actual scroll depth to the tech. Luckily, for in Google Tag Manager, there is a built-in variable that is towards the actual is called depth threshold, we just need to click Configure, find it and enable it. That’s it. Now before we move to the next step, and use this call depth threshold in our tag, let’s refresh the preview and see how it works. You can refresh the page. Start from above the fold, and slowly scroll down. So here is our first scroll depth tracker. If we click on it and go to variables tab, we can see the actual value for school depth threshold, which is here. And as we expected, it is set to 25.

Now if we scroll down even more, and the next call depth trigger fires, we can see that this scroll depth threshold for this trigger is 50%. And the same goes for the last one which is 75%. Now that we verified that our scroll depth threshold variable is holding proper values, let’s go back to Google Tag Manager and finish setting up our tag. Now here, instead of using a static value of 25, we can use this scroll depth threshold variable that we just enabled. So let’s review one more time. When a scroll depth trigger fires. Google Tag Manager fires this tag, and it will automatically replace this value with the actual value of the variable and that’s exactly what we want. Now before we save our tag and see how it works, we need to take care of a finer detail. And that is we need to make sure that our Facebook base pixel always fires before our Facebook scroll depth tag. Because that one is the tag that initializes the facebook pixel and will enable us to send custom events to Facebook just with a single line of code like this. For this purpose, use advanced settings and use a feature called tag sequencing. In this case, I’m going to configure Google Tag Manager to fire a tag before Facebook scroll depth fires. And that tag would be our Facebook base pixel tag. And we also want to ask Google Tag Manager not to fire this tag if the Facebook base pixel tag fails or its past because if this tag fails this scroll depth tag which is dependent on this tag will not do anything anyway.

Okay, so let’s save this and take care of one final detail. And that is to ensure that Facebook base pixel only fires one time per page. Because otherwise, it would fire once when the page loads. And also, every time that a Facebook scroll depth trigger is going to fire. To do this we need to facebook pixel tag.

Click on Add on setting and under tag firing options instead of once per event which means once on page load and once before every Facebook scroll tag that is going to fire, we need to change it to once per page. So in this case, if our Facebook base pixel has already fired on page load, which is like 99% of the time, then it would not fire again before any Facebook scroll depths tag. Now it’s time to preview the container again and see everything in action. Okay, let’s head over to the website.

Scroll up. Refresh the page. Let’s verify every single step by step. So first of all, our Facebook base pixel has fired once but our Facebook scroll depth tag has not fired yet, which is expected. Now let’s scroll down. Okay, so we’ve already passed 25 and 50%. And we can see that Facebook scroll depth tag has fired two times. If we click on the trigger events, we can see that the tag has fired once in this trigger, and again in this trigger. It has not fired on page view, not fired or dom ready, not fired, or Windows. It only fires in scroll depth and scroll depth. And if we click on summary, we can verify that it’s been fired two times. And because we’ve set our Facebook base pixel to fire just once per page, it has fired just one time. Otherwise, it would fire three times already. Let’s also verify why our facebook pixel helper. And we can see the to scroll events have been fired. We can click here to see the details. This one has fired. This one is the one that’s been fired under depths of 50. This one is the one that’s been fired under the 50%. And this one has been fired and 25%. If we close them and scroll down, even more, we should have another one again, and another one here which shows the scroll depth of 75%. Another way to verify the actual values that have been using the tags is to click on the trigger and then click on the tag itself to view the tag properties. Okay, so now that we have created these tags, and verify that they’re firing properly, let’s head over to Facebook ads interface and verify that these events are being received by Facebook as well. Okay, so let’s click on test events. And here, we can see the events that are coming and being received by Facebook in real-time. So let’s refresh the page. Scroll down to the bottom of the page.

And see if the events that we are sending from here are being received by Facebook properly. So here we can see the three events have been fired. Three have been received by Facebook, as we see in facebook pixel helper anyway. And now let’s head over facebook pixel. And here we can see these events in real-time. One page view and three custom events. If we click on any of these events, we can see some more info, like the URL of this event. We can see the event parameters as well. Now that Facebook is receiving these events, we can use them to create custom audiences. We can do it by clicking custom audience, create a new custom audience. And instead of all website visitors, you’re going to use our new event scroll which is already appearing here. Set how many days do we want people to remain in our audience and even refine it by the actual scroll depth threshold. We can set the depths to be greater than 49 which includes all the people have a scroll down either 50% or 75%, and will ignore those who just scroll down 25% or less than 45% down the page. Then we just need to give our audience a name. And created it.

In this video, we’ve seen how to track scroll depth on a page through Google Tag Manager and report it to facebook pixel to a custom events and then create a custom audience from people who are scrolling down more than a threshold that we defined. So we can use an audience for retargeting or segmentation purposes. This is Ahmad and thank you for watching. Bye.

All right, so there you have it. This is how you can create full scroll depth tracking really with the facebook pixel. A little bit help of Google Tag Manager and then you will be able to create your audience based on this dynamic data that we now fed into the Facebook pixel. Isn’t great? Well, if you have any questions then please let us know in the comments down below. We also have some links that could be helpful to you in the description. So check them out as well. And if you haven’t yet, then please consider subscribing to our channel because we bring you new videos just like this one every week. Now my name is Julian. see on the next one.

SHOW MORE...

Samcart Ecommerce Tracking with Google Tag Manager

Google Tag Manager Ecommerce Tracking with Samcart is not quite straight forward. You will need to install certain tracking to get a complete Enhanced Ecommerce Tracking implemented. In this video I’m going to show you how you can implement GTM into Samcart to get Ecommerce Tracking, the Facebook Pixel and Google Ads conversion tracking setup.

🔗 Links:

The dataLayer for the Upsell pages: https://gist.github.com/measureschool/8ffa4e45da745b1a9b0db1ac1cbe854e
Container for upload to GTM: https://gist.github.com/measureschool/8ffa4e45da745b1a9b0db1ac1cbe854e
Samcart – https://checkout.samcart.com/referral/wYwf9Zq0/mjT5uJHTIufHB7O9

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

In this video I’m going to show you how you can install Google Tag Manager and it’s tracking on to Samcart. All the more coming up.

Hey there measuregeeks, Julian here back with another video for you. Today, we want to talk about the checkout system Samcart and how you can install Google Tag Manager and tracking like Google Analytics Enhance eCommerce tracking, Facebook Pixel or Google Ads conversion tracking on to your checkout pages. Now, Samcart is a bit like a checkout builder, it’s very easy to build checkouts, and a lot of people use it for their payment gateways. So once they have marketed a product, then they want to sell it. And it’s the easiest way to do it for some kinds of products. And therefore Sam card is a quite popular checkout system nowadays. And for anybody who is doing the driven marketing, you obviously want to also track your conversions and get more insights on how your users are using the checkout. But this whole checkout builder system comes with a little bit of a downside because we don’t get full access to the actual website. We can’t mess around in all the codes. So we need to utilize the form fields that they give us in the back end, and fill out our fields correctly. So we can be doing conversion tracking correctly. Luckily, Samcart is quite good at giving us some fields that we can fill out. But it was also a little bit of a problem doing this with Google Tag Manager. So today, I want to show you a definitive guide on how you can install Google Tag Manager onto a Samcart page. So you have full enhanced ecommerce tracking. You will have the ability to deploy a Facebook Pixel and Google Ads as well. So we got lots to cover. Let’s dive in.

Get started, we want to install our Google Tag Manager codes on to our Samcart pages. So we head over to Google Tag Manager. If you have already an account set up that you should be able to find your container snippets by clicking on the container ID up here. And we get the codes that we need to install in the head and the body within Sam cart. We can do this by going into our profile section here. And under Settings, we have two fields that are the embed HTML script and header and then one in footer. And this is where we’re going to place our script because it will be installed on all the pages of our SoundCloud installation. So let’s copy these in here. And the body part will go in the footer, and then simply click Save. And now we want to try this all out. Let’s go over to our products. I have some test product set up here already.

And let’s look at this product in preview mode. We see here Google Tag Manager is already loading in the preview and debug mode because I’m here already in the preview mode. If you are not in here, you can click on preview, this will open up this little window. And you should see the Google Tag Manager is installed correctly. Alright, the next steps are to install our pre-configured container which I have linked up down below. So go over to Google Tag Manager in the admin section, you can import your container and just choose the container that I’ve set up for you already, which is the Samcart json we go with existing workspace, I just have one workspace here. And I’m gonna choose to override if you already have tags in your container, then I’d recommend to choose the merge option and see if there are any conflicts that need to be resolved. We go ahead and confirm this. And this will install some tags, triggers and variables in your container. And this will take care of the tracking. Now, what do they exactly do? You might know in order to fill information into your ecommerce reports within Google Analytics, you will need to have certain datalayer information that is transferred over to Google Analytics.

So for example, the product that we are viewing at the moment, the price, and so on. This is normally encoded into a datalayer. Now, Samcart has an extra advantage here because it actually gives us all the information in a JavaScript object. Just to show you, you don’t have to do this yourself. When we go into the developer tools, you can go into the console and simply type in product. And this will give us an object here where all the information that we basically would need is available. We have the ID, for example, we have the price, we have the stock level, or even the name of the product. And this is actually also true for the bump product that you can install right here, which also has its own price. Now, since this information is available within JavaScript, we don’t actually have to set up a custom data layer. We can just pull it out via Google Tag Manager, which is also based on JavaScript. So I’ve written a little custom JavaScript variable that produces the right format of the data layer and pulls out the right information right here. Then pushes this all back into our Google Analytics tag which we have set up right here for our event, enhanced eCommerce tracking view. So this is all set up. And it simply takes the data from this variable, custom JavaScript Ecom product view. So you don’t have to change anything around in terms of the data layer. Let’s have a look how this works.

We are here already in the preview and debug mode, reload. And we see our Google Analytics event ee view already fired, what does that mean? Well, let’s open up our developer tools. And I have a handy tool, which is the GAGTM debugger, which gives me this view and I can look into what was sent over to Google Analytics. And then the enhanced ecommerce tracking section, you can see they were product detail view sent. So of our primary product, and our bump products or one on one coaching call, GTM Essentials training, and impression lists. So we have the list items in here as well. These are directly pulled from our product, so you don’t have to enter any custom information. This all sends over a Google Analytics event. So we should already see this in the events. No, we don’t see it. Let me just check out we probably forgot to change our Google Analytics ID. Down here we have our Google Analytics settings variable which is a random number, right now. We would obviously need to change this to our tracking information sent to the right account. So let’s copy that. And put that into our tracking ID right here as well. Change the name. Refresh this and I’m going to reload our page again. It’s going to send over the information hopefully. And then in our real-time reporting, under events we see a new event has entered.

Now, the event name are really unnecessary. But since we are sending this with an event, we can attach certain information that gets transferred to the ecommerce tracking, which is then filled out. This might take a while to populate anything between half an hour and 48 hours. So far, everything went automatically, especially on this checkout page as first checkout page. But there is a problem because if you’re using something called the funnel feature and up sells, then you will need to implement something more onto your page. What does this mean? Well, let’s go through here. And I have this actually set up for the store as well. Going to buy this product and place the order. I’m actually going to an upsell page. Now this upsell page contains a product. And you can choose to add this to your order. Or say no thanks. You can set this up in your upsell tab here where you can set up the product that you want to sell. And also can setup the funnel, I have just a simple funnel with one upsell. The problem though is on this page itself, when we open up the developer tools and type in our product product, then we see this is not actually available, like on the last page.

So we can’t pull information out of the system. It’s not dynamically transferring this over to JavaScript and we would not be able to access it via Google Tag Manager. So we will need to code that information in ourselves. And this is where a bit of the downside is of Samcart because when I look at the upsell right here, go into my upsell, there is no custom HTML field, there is no way to fill the information. Although I give them here the product that it’s connected to, to pull all that information dynamically. And we will need to play some extra code. And this is only possible in this upsell HTML window. To be honest, this upsells HTML window cause me a lot of grief because it has a very weird behavior when you change something around. We will need to go over to the source panel here and enter some custom JavaScript. What would this JavaScript look like? I also going to give you this code down below, you can post this into all your upsells. This is a little bit of code which we, unfortunately, need to fill out by ourselves. And once you have posted or change any code around, you cannot simply click on save changes because it will overwrite the changes, somehow. You will need to click first on the source and then click on save changes in order for these changes to be saved. Something that took me a while to figure out. So now we need to alter this code a little bit. And we need to alter us with the stars here the product name, the product ID and the product price. How would you find those? Well if you go up here to our products, I’ll open this in a new tab. So we have this available, we’ll go over to our advanced integration scores which has all the information available. We want to have the product name, the ID, which is up here in the URL, and obviously, also the price. So let’s start out with our ID right here. Copy that and put this into the right place right here without the stars. But it needs to be within the quotation marks.

When I change over here and copy the name, you might see that our price has already changed again back. Somehow this editor doesn’t retain the values. So again, I’m gonna copy the product ID, I will put this into the price field here. And now I’m going to go to source save, go back to source. And let’s put in our product name. This time, it didn’t change it. So product name, again, source, Save Changes source. And last but not least, our price. Down here, whoops, I changed around the price.

And the ID field.

So let’s put this in like this. Okay, so now we have this information on here. And it will build the data layer push for us based on this information that we have on here. Unfortunately, if you have a lot of these upsell products, you will need to install this information into all the upsells that you see in the upsell section right here. There is no way to pull this out dynamically. Now let’s see how does it actually behave. We’re going to go back to our upsell, reload this. And we can see our event ee view again fired. We’re going to open up our developer tools, look into GTMGA debugger, reload it again and see what information gets sent over. Yes, our information now gets sent over to Google Analytics. Again, we should see a real time event that happened for our product. So this gets tracked correctly now.

And the last but not least, the page that is most important, we add this to my order, we get to the thank you page, where we have our three products that we have bought. And again here this information is dynamically available through our JavaScript object. So we’ll be able to send this on via Google Tag Manager, we have our Google Analytics event transaction. So again, here our transaction should be filled. And all the information and all the products that we have bought are now sent over as far as I can see in the GTMGA debugger. Here we go, we have our purchase, and all our three products that we have bought. So here’s again, something you don’t have to necessarily implement anything, you just need to do this on the upsell pages. So now that all the information is sent over correctly, we should be able to see this inside of our enhanced ecommerce tracking later on here under conversions. And ecommerce reports, we should have our sales performance, product performance, and product list report. Now, be aware that this is not a full on enhance ecommerce tracking installation because enhance ecommerce tracking also has impact on your homepage or the product pages that you display the product on. So this will not all be filled. But the most important information like the sales information is available in these reports. So since this is working, and the information has been sent over correctly, I went ahead and built some more variables like the Google tags param which we would need for Google ads, and the custom product IDs which would Facebook would need. So I’ve built some extra tags, you can choose to keep them or delete them from your installation, which would be the Google Ads transaction, the Google product remarketing. I also installed the conversion linker for completion sake. And for Facebook, we have our base pixel with our event and our transactions. Now, please be aware that you will need to change around your ID here. So where this information gets sent to, in order to install this correct, the same is true for our conversion ID in Google ads. Don’t leave this just running because then there will be a lot of data sent to my test account. In the end. If you are happy with your installation, you can go ahead and submit this as a version.

Give it a name and publish this. So it goes live to all your users. And this is how you can install Google Tag Manager and your tracking on to the samcart system. All right, so there you have it. This is how you can install Google Tag Manager on Samcart and deploy the tracking like Google Analytics, Facebook ads, and the Google Ads conversion tracking on to your page. As mentioned all the codes and the container download will be linked up in the description below. So check that out as well. And if you have any questions, please leave them in the comments. Now if you liked this video, then I’d love for you to hit that thumbs up button and also check out our different videos that we have linked up right here. Now my name is Julian, til next time

SHOW MORE...

Advanced Date Selection in Google Data Studio – Create rolling dates

Google Data Studios Advanced Date selection feature lets you input rolling dates into your Dashboards. For example you can create a data visualization based on the last two weeks, without having to update your date range each day. In this video, we have Ahmad of Siavak to walk us through how we can utilize this new feature.

🔗 Links:

Get started with Google Data Studio:
https://www.youtube.com/watch?v=u05EXm0GeTg&list=PLgr_8Hk8l4ZGijmrFPjYSeKwLbnsqwq1e

Our Google Data Studio Playlist: https://www.youtube.com/watch?v=wVsSXFhjyUc&list=PLgr_8Hk8l4ZHchZpGaCBD6EA8kWrBEhYf

Ahmads website: https://www.siavak.com

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

Previously it would have been really hard to configure a dashboard based on a time backward or forward based on the date that is today. Luckily, there is a new functionality within Data Studio which is called the advanced date functionality which will now find in all the date pickers that we have in Data Studio, and I asked Ahmad to come up with a little tutorial to show off this new feature and how we can utilize it inside of our dashboards. Now, we’ve got lots to cover so Ahmad, take it away.

Thanks, Julian. This is Ahmad from Siavak. And in this video, I’m going to walk you through the advanced stage selection feature in Google Data Studio. This is a fairly new feature. And now let’s dive in and see how it works. This is a blank reports that I’ve made, I’ve already added a data source. And let’s create a time series chart to see what options do we have for selecting the date range. But this is our time series chart. We want to see the number of sessions over time for this website. And by default, the date range that is applied to a chart in Data Studio is auto A means last 28 days. We have other options as well. So we can choose for this to show other period of time by using custom. Let’s see what options do we have. The first one is fixed which is simple. Instead of last 28 days, we can choose this supports to always show for example, May 1st to May 14th. And regardless of the date that the end-user access this chart and views this report, they’re always going to see the report of the first of May to the 14th of May.

This isn’t dynamic. But we have some dynamic options as well which are based on the actual date that the report is being accessed. Just like this last seven days, last 14 days, last 30 days. And not last 30 days according to today, it is based on the actual date that people access the report. These are the options that we kind of always had in Google Data Studio. So it’s this week, last week, this month, last month, this quarter, last quarter. But what if we wanted to set the date range for this chart to two months ago until two weeks ago. So we couldn’t do that. Or let’s say we wanted the last three weeks, not including the days that have passed from this week. We couldn’t do that either. But with the new Advanced Data selection feature, we can do this and lots more.

Let’s see what it means. First of all, we need to select the start date. For this type day, we can choose fixed which is a fixed date. So let’s say, for example, we want first of January 2019 until last week, every time we want to load the reports we want to see the first of January until last week. This is how it’s done. So the first day would be first of January, fixed and end date with me today, minus one, not one day, one week, and we can choose a starting and Sunday or Monday as well. So when I applied this, whenever a user accesses the report, whenever they’re viewing the report, they would see the report is starting from first of January, going to the last week, not including the days that have passed from that week. Now let’s do something else. Even for the start date, we can have some dynamic value. So let’s say we wind from four weeks ago, to last week, that would be today, minus four weeks till today, minus one week. We can also have this with quarters, with years, or with months. So from three months ago, to one month ago, minus one month. Today, which is the first of June, it loads from the first of February till the end of May. That’s cool, isn’t it? Now let me show you another usage for advanced time selector. Let me add another this time, scorecard. And for this, I want to see the average order value.

Let me delete this one. So we just take a look at the average order value here. Okay, this is the average order value today for instance order last 28 days. Okay. But let’s think about this hypothetical situation that the client wants to see the performance of their website in terms of average order value over the last seven days compared to how it used to perform from first of January up to last seven days. So basically, they want to compare last week to the whole period of time from the first of this year to that point. For this, we want to first set the custom date range for the actual value of this scorecard to be from today, last seven days. Okay, we wanted to show the average order value for the last seven days. And then we want to compare it to the average order value from the first of January, up to eight days ago. For this enabled the comparison, for the comparison, historically we had fixed we had a previous period, which is our last seven days compared to the seven days before that, or from the same seven days of the previous year. But now we have advanced and we can choose this time to be fixed. And for this situation, we want it to be first of January. And to end date would be today minus seven days. If I apply, I will have a comparison. So this is the average order value for the last seven days. And it’s down from the average order value performance over there up to last seven days. But this is not clear. So let’s go to style it, uncheck this so it actually shows us what’s the main value is being compared to. So domain value is minus 1.3%. down from what we had from first of January to 21st of May. And by the way, you can show absolute changes as well. So it is nearly $3 less than the average order value that we had from first of January to 21st of May. So as you can see, not only we can use the advanced date range feature for the main scorecard or the main charts that we’re using, but also we can use it for a more flexible date ranges for the comparison with previous date ranges. That’s it. Thank you for watching and see you on the next video. Bye

All right, so there you have it. This is how you can utilize the new advanced date feature within Data Studio. Now, do you actually utilize this already? Or do you have a good use case I’d love to hear from you down in the comments below. And if you want to find more out about Data Studio about different features, functions, and so on, we have a playlist on Data Studio right up there where you can find out more with more tutorials. And as always, if you liked this video, why not give us a thumbs up and don’t forget to subscribe to our channel because we bring you new videos just like this one every week. Now my name is Julian, see you in the next one

SHOW MORE...

How much traffic did your website get yesterday? #GoogleAnalyticsQ&A

Google Analytics can become overwhelming really fast if you don’t know what you are looking for. That’s why we always want to start with a question in mind. So today, I’m starting this series to answer some common questions and how you can solve them with the help of Google Analytics.

Today’s question: How much traffic did you get on your website yesterday? We will use Google Analytics to get an in-depth understanding of how to obtain the data to answer this question.

🔗 Links:

Get Access to the Google Demo Account: https://support.google.com/analytics/answer/6367342?hl=en

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

How much traffic did you get on the website yesterday? The topic of this video is going to be how we can find this out in Google Analytics. All the more coming up.

Hey there measure geeks. Julian here back with another video. I’m actually starting a new series here where we’re going to answer some common questions with the help of Google Analytics. Now, a question is always very important because when we start our analysis process, we want to start out strong with a question in mind. So we actually get a result from our analysis. If you don’t have a question and just look through the reports within Google Analytics, you find yourself very confused, very overwhelmed with all that data without having a real result. So we’ll start out with a question. And the first question we want to tackle is how much traffic did I get on the website yesterday? This might be a question that your boss asked you, a client asked you or yourself as yourself. So let’s open up Google Analytics and find out what we can do about this question and where we can find the answer.

All right to get started, I would recommend that you open up your Google Analytics account. Or you can also get access to the same account that I have access too here. It’s the Google merchandise demo store, which you can get access through this link on the help section of Google Analytics. I will link this up down below as well. And then we are entering Google Analytics through the home screen. And on the home screen, we already get some data and some answers to our questions which is, what traffic did we get yesterday. So we have this big overview already here. And if you hover over this chart, we see that this line chart shows us the different dates. And yesterday was Monday, June 3, and we can see here that the users were 2330. So really quick answer to our question already. And on this home screen, there are a lot of questions that are answered here. So we have right here, how do you acquire users, we get a breakdown right here, or how are active users trending over time. Now, these are great shortcuts. But if you want to look at data more in depth and especially data about the traffic, then we might want to look at the audience report. So we’ll go over here to the report section. And actually click on overview for the audience section. We get a nice line chart right here. And some more overview data. Let’s talk through this first of all. Again, we are seeing here, our different users trending over time, and the familiar number 2030 from 2330 from yesterday.

Now, if you want to narrow down our focus here and only want to focus on the day yesterday, we can go up to the calendar section at any time and choose a custom date range. So yesterday was the 10th, we can click on the here or on the top here there are Quick Select menus for today or yesterday. So let’s go on that apply this and it will zoom in. And this chart will change to show us the hours of when we got these users. So we’re looking here at the user metric. And this really brings us to our first distinction that we want to make when we look at the traffic that we got yesterday. Because traffic doesn’t equal traffic, there is no one definition for traffic. The way Google Analytics works is that there’s a tracking code installed on your website. And each time the user goes from page to page data is sent over to Google Analytics. This data is commonly referred to as page views. So each page that is open on your website generates a page view. This will obviously differ from websites that are more prone to generate a lot of pages views than a very short informational site where the user gets the information on, for example, just one page. So it may not be what you’re looking for. But Google Analytics actually gives you different models of looking at the data. The second model that we can look at are the sessions.

Now, Sessions is a grouping of different page views together in a timeframe. This time frame by default is 25 minutes. So let’s say a user comes to your website, looks at a couple of pages, then leaves the website and in the evening, reenters your website and looks at a couple of more pages. Then you will have counted two sessions and a couple of page views each time. And that’s why it’s logical that the page views are far higher than the sessions as they’re grouped together within that metric. Now above that all we have the user metric. The user metric is calculated by looking at the cookies or the user ID of the user was entered the website. And if it’s still the same from his first visit then this will be grouped as one user. So you could imagine that the one user that we just talked about has two sessions and a couple of page views. But it’s just one user. Now, these different metrics are actually called scopes as well in Google Analytics, as we can attach different data to them. So a page view can carry metric, like how long the user was on that particular page itself, we can look at the sessions, and that relation can look at the bounce rate. And when we look at users we can determine is as a new user or an old user. So it’s always important to look at your data through the right lens. And traffic isn’t the same as maybe some other traffic.

Depending on who you’re reporting to or the comparability later on. You might want to choose one or the other as your KPI for further reporting. Now that we have seen here that we had 2330 users, how is this actually meaningful to us? Well, the first thing when we talk about traffic is that there is a time component instead of our question yesterday. Yesterday was a Monday so I’d like to know know if there’s numbers high or low. Let’s compare it to the previous Monday. Now, I can click here on compared to, and if I choose previous period, it actually takes the day before which was Sunday. So we could gauge if the traffic went up or down during these days on the Monday it actually increased. But let’s do for better comparison, a comparison to the actual Monday, the week before. Let’s apply this. And we can see we had a slight increase of the overall metrics right here. But this could obviously be more significant if you had a sale running or more people coming to your websites for a marketing campaign. Now let’s look at this data. Actually, not the week before, but let’s put it in one year before. So take this metric here and put this in for 2018.

Apply this. And here we go. We see a more significant increase in traffic as opposed to our last year’s performance. Now there’s tons more question that I could ask here about my data set and dig deeper from the traffic that we got yesterday. For example, where did the traffic come from, how did it convert, and that the users actually reached a goal that I set out for them to reach? But these are questions for our next videos. And I hope you are now able to answer the question, how much traffic did I have yesterday? And know how you can compare and actually gauge the differences between the different metrics that you have available for answering your questions. All right, so there you have it. This is how you can see how much traffic that you get on the website yesterday. Now you might find my question a bit more nuanced than what you have thought. But I had these many visits or sessions or users. So it gets really complicated very fast. And Google Analytics, it needs to be complicated because it’s a complex world out there. It is not one answer that you can give with your data in Google Analytics. I hope you understood this and took this away from this little tutorial. Now, you might also have noticed that you have tons more questions, I would encourage you to dig through some more reports in Google Analytics and find out the answers to your questions. We have tons more questions that will come up on this series. So definitely subscribe to the channel right over there. Or check out our other videos right over there because there are new ones coming out all the time. Now, my name is Julian, see you in the next one.

SHOW MORE...

How to track CRM Offline Conversions in Google Analytics (Part 2)

Triggering an Offline Conversion in Google Analytics can be accomplished with a bit of custom Tracking and the help of the Measurement Protocol, as we already discovered in our first video. In the second part of this series, let’s go through the step by step procedures on how to create a tag in Active Campaign so it can send the offline transaction to Google Analytics.

Part 1 of Offline Conversion tracking: https://youtu.be/H6ktBdCxm7w

🔗 Links:

GTM Container Download: https://measureschool.com/wp-content/uploads/2019/07/offlineEcommTracking-1.json

Google AppsScript + Sheet: https://docs.google.com/spreadsheets/d/1oKNZhJ6SjJZVmyA4oh5q_XcYZ_FNC8YWNqY2Y7tSc8g/copy

Webhook Tester site: http://webhook.site

ClientId Variable by Simo Ahava: https://www.simoahava.com/analytics/improve-data-collection-with-four-custom-dimensions/#2-client-id

FormFill Video: https://www.youtube.com/watch?v=z20G9NqphYY

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

 

In this video, I’m going to take you step by step through the setup process of our Active Campaign add a tag to trigger a transaction in Google Analytics that we have discussed in the last video. So if you haven’t checked that out yet, then definitely hit that button up there or up there, that will take you to that video. We’ve got a lots to cover. So let’s dive in. Now that I cleared out all the different tracking that I had installed before, let’s go ahead and build this from scratch step by step. First of all, we will need to integrate our form that transfers the information to Active Campaign. So an Active Campaign will go over to forms here. And then under view form, you can edit your existing form or create a new one. I will just create a new one and give this a name, choose the online form as we want to post it on to our website. And once the user is subscribed, we will put them on to the contact list.

So let’s create this form. And we will enter the form builder. Now, inside the formula we already have two fields here; full name, email. Let’s add the phone number and a special field that we’re going to hide later on. And this is going to be our client ID field. So we go here to add a custom field. And this will be our text input field. And just call this client ID. Let’s add this. And here now under my fields, we have our client ID. So I’m going to add this here as well. Now, you can change around the message here as you might want to customize this. But I’m just going to leave this for now and click on the integrate button which will give me our HTML code right here. So I’m going to copy this, go back to my website. And I’m going to edit this page in order for us to integrate this form. In the text fields, going to add my code here and update this. And as I mentioned, you could also do this with a third party form software that integrates with Active Campaign. And here we have now all our fields.

Now, you might see that client ID it not yet hidden. This is something we’re going to do later on. For now I want to set up the tracking that would fill in the client ID into this field. Now, where do we get the client ID from. The client ID is actually something that is automatically created by our pageview tag. So if we have Google Tag mentioned installed which I have on this website as well, we have already a GA page view tracking installed. And if I reload the page, we get our preview mode. And in that preview mode, we have our GA pageview tag already deployed. This gives us a client ID. This is normally stored inside of our cookies. So here we see the client ID that we would like to transfer over. We can actually get the client ID directly through JavaScript with a custom JavaScript variable. So let’s set that up. Go over to Google Tag Manager and click on variables and create a new user defined variable. This will be our custom JavaScript variable for client ID. And as a configuration which was custom JavaScript, and enter here a little bit of JavaScript that I have already prepared. Now this JavaScript will actually go through and look at all the trackers. Look for our tracking ID which we need to define. So let’s head over to Google Analytics account and go to tracking information tracking code here. Here we go and enter this into Google Tag Manager as well. By the way, this code is by Simo Ahava. So if you want to find out more about how this actually works, you can head over to his blog. I’m gonna link it up down below as well.

Now that we have that setup, let’s try this out. Let’s save this and look into our form, we refresh and reload here. Our preview and debug mode shows us that the client ID is now stored in this variable. So pull it out correctly, we just need to fill it in into this field. Now in order to do this, we would need to deploy a custom HTML tag. So we go over and click on new here in the tag section and choose a custom HTML tag. Give this all a name, I’ll call this contact us client ID form field. And again here, I have some pre existing code that takes in your CSS selector class. And whatever you want to fill in the field. This is actually a code that I’ve written for another video. If you want to check that out, I’m also going to link it up down below. It’s about filling a form field with Google Tag Manager. But in our special case, we want to actually get this hidden form field or this client ID field which is not yet hidden. So we would need to know the CSS selector, how can we find that out?

Let’s go inspect here. And he has the field. And there are different ways of selecting this specific field. You could try to copy the CSS selector directly. But what I like to do is to actually try this out instead of the developer tools. So I’m gonna make this a little bit bigger, press the Escape key, this will open up our console. And here I can type the word document dot query selector. And in parentheses, try out my CSS selector and see if it returns anything. But the most unique thing about this selector for me is this name field which is field for. No other input field would have this name field. So we can try this out by putting first of all our input field in here. And then in these square brackets, I’ll put a name equals single quotes this time field and four. So here we go, we should have and I press enter our exact field selected. So this is the CSS selector, I would like to use, just going to copy it and put it back into my Google Tag Manager right here.

Now, the next part would be to actually fill this input filled with a special value. Where do we get value from where we want to fill in with the client ID? And that’s what we’re going to pull from a variable if you’re already prepared. We just need to write these two curly brackets and then this menu will pop up. Now, we just need to define when do we actually want to fill this form filled? Well, I want to fill it on the, on this page here Active Campaign form. And I want to fill it when our form has loaded. This is very important because we don’t want to fill the form when it’s not yet loaded, as this within fail the script. So the most secure way of doing this is to fire it pretty late. In our case of would be to DOM ready which will tell us that the page has loaded correctly. So let’s go over to tag manager and build a new tag based on this event of DOM ready. This will be our AC form on DOM ready. And as conditions, I want to check, first of all, if the page path contains our Active Campaign form. And I also would like to know if the client ID is not does not equal undefined. So if the client ID was not able to be defined, then I don’t want to fill the field either. Let’s save this, save our tag, and refresh. And try this out again. Reload. And we see here, our client ID was now filled by our client ID form field tag. So this is the exact client ID that we would need to identify the user. And this is actually identified as Google Analytics uses as well.

Now, you might see that this is still visible. So let’s take care of that. We will go into our HTML of our form and actually look for exactly that form field. So let’s scroll down here. And as we have seen, that was this field right here, the client ID field. Now we don’t actually need the label anymore because this will just on the front end. But the input field needs to stay. And instead of the type text will now choose simply hidden. This will turn this into a hidden form field. And let’s update this, go back to our page. Here we go. And our field is now not visible anymore. But we can still see it in the HTML. So if you go on to inspect element, and just hover over here to see, that could be one of the last ones of these elements right here. Here we go. We have our field number four, it was already filled with the client ID, and it’s not visible. But if you want to see it in action again, you can just change this value over to text. And you see here is the form field. But in our case, it should be hidden by default. Now that we have this in place, let’s go ahead and do a test if it is received by Active Campaign. So we have that information filled out. Let’s submit this, be signed up, we should see our contact now in the contact records. Here we go. This is the user with its client ID. So now we have all the information we would need to do this Google Analytics and transaction hit in our Active Campaign. We just need to have a way to actually transfer it onto Google Analytics. And this is where automations come in. We want to trigger automation when somebody adds a new tag.

So let’s go ahead and add a new automation will create a new automation from scratch. And we want to trigger this when a user adds a tag. This tag is freely definable, in our case, it was offline conversion. So let’s stick with that. And you can choose if the user can only run once or create one conversion, or multiple times. I’ll go with multiple times here. Let’s put this into the start. And now we need to define the action that we want to take within automation. Now, we don’t want to send an email. We actually want to simply post this to a web hook. So post contact data to a URL of your choice. We choose this and we need to enter the URL. For now I would say we’ll just go with the testing site which is web hook dot site that you can go to. And we’ll give you a web hook URL that you can test. So we’ll just copy this to clipboard and put this into this field. Let’s save this. And at the end, once the user has gone through this step, I want to end this automation. So he’s not stuck inside of the automation itself, we need to give our automation a name. Let’s go with offline conversion here as well and save this. Now, we need to turn this all active and try it out by going into our contact record. Let’s add our offline conversion tag. It is added. Now this contact should be added to our automation, let’s reload this contact. And you can see he entered your automation and he completed it already.

When we click on the automation itself and view how the user went through it. We can see this was posted to the web hook itself. And then he ended. So we should have new data on our web hook site here. Yes, it seems like all this contact data was sent over to the web hook. So on the automation side, on Active Campaign side, everything is working already correctly. Now, we need to send this data into Google Analytics. This is where our App Script comes in. Now, an app script it’s actually something that is connected to a Google Sheet. I will give you the link in the description below. You can just make a copy into your Google Drive account. And once you have that open and copy to your Drive account, you need to do some configuration. So the first thing you need to do is go over to tools and to the script editor and click on the publish button right here and deploy as web app. Now this will give us a our web URL which we will then put into Active Campaign. Okay, once the window opens, we can click here on execute the app as me and who has access to the app. Well, anyone even anonymous users will update. And we need to review some permissions. Now here, you need to utilize your Google account. And it will tell you that it will see an edit your spreadsheets which is exactly that spreadsheet just here. And we also need to confirm that we will connect to an external service in our case, that is Google Analytics. Let’s allowed us. And back in our app, we should now get our web app URL which we will utilize in Active Campaign. So copy that can close this now and put this into our automation, right here. So instead of the website, we will now post this to our Google app script.

Let’s save this. And before we do a test, let’s look at our sheet that we have created. In our sheet will see a log file. So every hit that was sent over is here with all the configurations. But since Active Campaign just provides the client ID, we actually need to define a few things that we want to have our hit that we sent over to Google Analytics filled by. So first of all, you will need to fill out the tracking ID right here, I’ve already done this. But if it’s not filled out, your hit will definitely fail. You can leave the version untouch. The client ID will be filled by web hooks. So don’t change this around. We’ll send over an event a transaction and as a category offline as an action. And then and as event label our client ID. Now you can change this around, you can customize this. But just be aware that this is already pre configured to work. And if you change anything, you might need to readjust it.

This is set as a non interaction hit as true. And then as a transaction ID, I have actually just taken a formula here to come up with a random ID that we would later be able to recognize with O and then the number. So offline and then a number that is simply random. Then we come to our ecommerce hit. So ecommerce hit has affiliation which is not filled out. Every field that is not filled out for just simply be dropped. We can put in our revenue. So if our conversion is worth $100, we put that in. The tax, the shipping information, I just put this to zero, the transaction coupon if there was any. And you can also put in product information. So purchase a product, product ID, the quantity, the price and the category if you choose so. You could even put in multiple products. And for that, I will just encourage you to copy here, the second product, you could put a third product, fourth product and so on in. Now, this information will be used to then construct the hit an ecommerce transaction that is sent to Google Analytics. So if you done anything wrong here, it might not work. So be aware of the fields or in the end, you might need to debug or circle back to the old version here which is already filled out correctly.

All right, now that we have that setup we already done, we can now go ahead and test this whole implementation by going back to our contact record. And just getting rid of this tag again and adding it back and then head over to Google Analytics where the data should be received. Let’s go into the events. And here we go. We have a new event, we don’t see anything here because it’s a non interaction hit. So under events last 30 minutes, we now see our transaction offline with the right client ID that we also hopefully have inside of our contact record. Yes. And this has now produced a conversion. And later on, we will be able to then look this up in our user explorer report if you’re interested in where the user came from. Or inside of our conversion reports here under ecommerce, we would also see this in the sales performance as an offline transaction that happened. Now to spend us all to the end, we haven’t yet actually submitted a version. So we’ll put this live on to our website that fills it out our hidden form field. So I’m going to add this in, publish this, and it goes live to our website. So this is how you can automatically create an offline conversion by editing attack inside of Active Campaign.

All right, so we have gone through the tutorial on how to set this up. And I hope you like this tracking technique. It definitely helped me out to track more my conversions more closely. I’d love to hear from you if you utilize this functionality. And if you have any problems to set this up. Let me know in the comments down below. And obviously, we could also with some customizations make this more dynamic or support this over to other CRM systems. So if you are interested in that, let me also know in the comments down below and maybe I could rewrite the script for other platforms. Now, if you haven’t yet, then hit that subscribe button over there to stay up to date with everything that we do here on this channel. And my name is Julian. See in the next one.

SHOW MORE...

How to track CRM Offline Conversions in Google Analytics (Part 1)

Google Analytics Offline Conversion tracking is possible via the Measurement Protocol. Connecting your CRM system is not trivial as you will need to send a special transaction Hit to Google Analytics server-side. In this video, I’m going to introduce to you a a tracking technique which takes advantage of Google Tag Manager, Active Campaign and Google Apps Script to accomplish sending an Offline Transaction to Google Analytics.

🔗 Links:

Google Analytics – https://analytics.google.com/analytics/web/

Active Campaign – https://mbsy.co/activecampaign/21040300

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

Oh boy,

I’m excited about this one. In this video, I’m going to show you a tool to simply add a tag to an Active Campaign contact. So a CRM system and then trigger an offline conversion within Google Analytics. All and more, coming up.

Hey there measuregeeks, Julian here. Back with another video. Today, I want to show you a little tracking technique, little app script that I’ve written in order for us to be able to trigger an offline conversion within Google Analytics with our CRM system, in this case, Active Campaign. So where would this be useful, you might know that not all transactions actually happen on the website itself. And that’s why Google Analytics never would know about these transactions. So your data set is sometimes incomplete. For example, if you have a quote form on your website and the user gives you their phone number, and you call them back and tell them about your product, and they decide to buy. How Google Analytics actually know about the sale? You might have the information within your CRM system like I have in Active Campaign. But there is no connection between Google Analytics and the CRM systems. So I come up with a workaround.

And today, I want to show you how you can simply add a tag to your Active Campaign contact. And then this will trigger an offline conversion within Google Analytics to be able to look up the contact actually within Google Analytics and see where he originally came from. This could be useful for phone conversions, but also webinar conversions or complex sales funnels, where the user doesn’t convert on the first visit. Now, we got lots to cover. So I’ve actually broken this video up in two parts. In this first part, I’m going to show you how you can utilize this tracking technique. Then we’ll go through the different components that I play. And then the second part of this video, I’m going to show you how you can set this up step by step for your own website with Active Campaign. So you see we got lots to cover. So let’s dive in.

All right, before we dive in, I quickly wanted to run through the use case of what is tracking deployment will look like at the end. So here I am on our demo shop, we have installed an Active Campaign form. This is taken directly from Active Campaign. But you could also install this through another third party form software where you integrate Active Campaign. Now this form, ask us for the full name, email address, and phone number. Really, you could imagine that this is a quote form or any kind of process where you would close the customer offline, you would call them back or visit them at home or have a personal conversation with them, and not an online process like a checkout. So we’ll fill out our details here. And submit this. And this will create a new contact record within Active Campaign. So let’s head over to Active Campaign.

Here we are in our contact records, reload this, and here we go, we have our contact record. Now we have asked the user for his or her phone number. So we call this us back and convince him to close the deal with us or buy our product. Now, this could be minutes afterwards, or days or months afterwards. In the end, what we would need to do is just add a tag called offline conversion. And then we should see inside of our analytics. Let’s go into the real time reporting. here under events. There you see there’s a new event that just fired. What is this event? it’s a offline transaction that just fired. Now, with this offline transaction, we are actually sending on the user or the client ID that Google Analytics gave this user when he first visited the website. Now with this client ID, we would be able to go into our user explorer report which is under audience and user explorer here, go to the right date, which is today and search for this number. So here we go. We have one session by this user. Unfortunately, it takes some time to populate. But we should see in a second that there’s also a transaction that happened because we actually sent over a transaction hit. So let’s wait here for a second.

And here we go. When we reload the page, we can see now that this was updated and we have our purchase now tracked within Google Analytics. This would obviously also then show up in the enhanced e-commerce tracking. So if you go over to conversions here, under ecommerce and then our sales performance, we should see a new conversion in our sales tracking. So how did this go down? Let’s break it down bit by bit. First of all, our form right here. Now, this form is actually special because it has a hidden form field attached to it. So if you go here under Inspect Element and we look for the next form field here, we can see there’s a hidden form field that transfers a number over and this number is the client ID. Now, this client ID is actually something that Google Analytics generates, and we just fill it into this hidden form field. So it will be sent once the user clicks on the submit button. How do I do this?

Well, with my favorite tool, Google Tag Manager, we have a tag here that grabs the client ID and then fills it into our form. I’m going to show you in a second how this actually works. Once we send this contact off, it will be filled automatically into our contact record within Active Campaign. So here we have the client ID. Once the right tag is set, we actually built a little bit of automation right here, I can show you this. Let’s go into view. This will just listen for the tag offline conversion. Once this is added, it will create a webhook request. It will post the contact information to a webhook URL. Now, this URL is a little bit of Google Apps Script. And it’s all based on this sheet here where we can see also which hits have already been sent. We can configure our hit. So this is in no way dynamic.

But if you have just one type of transaction that could happen, then you can fill this out however you want with your revenue that you will generate, your product that you have sold. And if you would like to add any products, you can do this too. And this will construct the hit. And once a new webhook is detected, we have a little bit of an App Script right here that searches for the client ID field and the contact record. Pulls that out and match it together with this information. And then sends this of true Google Analytics as an event with transaction data touch and that’s how these reports then get filled. So if you’re interested in rebuilding this tracking, let’s go through it step by step. All right, as mentioned, we have cut this video in half. So if you want to have the step by step instructions on how to set this up, then head over to the video right there for already available or subscribe to our channel so you stay up to date when the next video comes out. Now, my name is Julian. See on the next one.

SHOW MORE...

How to use the Data Studio Case Function

The Case Function is one of the most advanced and most useful functions in Google Data Studio. In today’s lesson, Ahmad is here to give us a tutorial on how we can use the Case statement in building our dashboards and create calculated fields.

🔗 Links:

Google Data Studio https://datastudio.google.com

Ahmads website Siavak http://siavak.com/

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

I T T T. If This Then That. If you are using Data Studio, then you should learn about the case function. Now functions are a very important part within Google Data Studio to create calculated fields. And the case function is probably the most advanced, most useful, but also most powerful function you can learn. And it really works like If This Then That. So I’ve asked Ahmad to come up with a little tutorial to explain the case function to us and how we can utilize it inside of our Data Studio dashboards. Now, we got lots of cover, so Ahmad take it away.

Thanks, Julian. This is Ahmad from Siavak. And in this video, I’m going to show you how to use Case When statement in Google Data Studio to create calculated fields. The Case When statement is one of the most powerful formulas available in Google data studio which you can use in many situations. But for the purpose of this tutorial, we’re going to use it to build a table that shows traffic and conversions from Google Analytics by weekday versus weekend. And you know, that’s not a dimension that is usually available in Google Analytics. This is a rather advanced feature of Google Data Studio. So I assume you already know the basics, like how to go to build reports, a data sources and visualize data using charts. Let’s begin. We are going to start with creating a blank report and connecting it to Google Analytics demo account as a data source. So let’s select Google Analytics and demo account. Master view and connect it. Here we have our dimensions and metrics.

Let’s add this data source to the report. And we are good to go. So remember, our aim today is to create a table and categorize days of the week into two groups of weeks days versus weekend. We want to be able to visualize and analyze sessions, conversion rates, etc, per weekday versus weekend. For this, we first need to table. So let’s add one.

Now let’s add our metrics. I want sessions. It’s good to have page views, conversion rate. And we also want the average order value. Average order value. Let’s make it a bit bigger. So we can see all the data. And just a quick tip, if you double click and one of these edges of the columns, it will resize all the columns automatically to show you all the data. Now for dimension, we don’t want medium. We want something closer to see type of the weekday which we have day of week name, which is something that is available in Google Analytics by default. Okay, we just want to use it as a starting point. So here we go. We have our weekdays at the name of the day of the week, number of sessions, page views, e-commerce conversion rate, and average order value. Now, this is quite close to what we want, but not exactly. Instead of seeing the name of each day separately on its own row we’d like to have only two rows. The first-row being weekday and the second-row being weekend. This is not a dimension that is already available in Google Analytics. So to do this, we need to create a calculated field. Calculated fields are fields that their values are evaluated based on some calculations on other fields values. Sounds good. Let’s create one, we need to go to the resources menu and click on Manage added data sources to see our data source and edit it. When we edit our data source, we can add new fields. Were clicking on this all we arrive at this interface which allows us to give our new field a name. I’m going to name it date type, or let’s say sorry, day type. And then in the formula section, I’m going to use and introduce you to case when the statement. So before I start typing in the formula, let’s see what do we want to achieve in the table above. We want to write weekday. If it’s a Thursday, we want to write weekday, if it’s a Tuesday or Wednesday or Friday. But if it’s Saturday, or it’s Sunday, we want to write weekend instead. Okay, now let’s see how can we write this logic with a case when formula? Okay, CASE WHEN formula, and I write it in uppercase, but it’s okay, you can write in lowercase as well.

Looks like this. Okay, now, it is gonna say it’s invalid, but it’s okay. Because I’m just showing you it doesn’t allow me to input sample texts here. Okay. So, I mean, when a condition is met, the condition is met, we want to return a result. Okay, let’s allow the studio to do its autocomplete. But what I mean is results. Let’s see if we can get rid of that. Yeah.

And when another condition is true, we want to return another result. And we always end it by the word End. We can do something else which is else. Which means if none of these conditions are met, then return another result. This is the syntax of a case when statement. Now in this case, we do not need else because we only have seven values for weekdays for the name of the day of the week. And we already know for each value we want to return which string or text value. So let’s start the writing.

When day of week name equals two. Let’s start with Monday. Then return weekly. Similarly, when it’s Tuesday, return weekday. It’s Wednesday, again return weekday. Also, return weekday for Thursday and for Friday. But I pasted it twice now. But if it’s a Saturday, return weekend. And if it’s a Sunday, again, return weekend. Let’s wait for it to validate a formula. It says our formula is valid with this green checkmark. And now we can save it and click finished. Now let’s add our newly created dimension which is date type. So our table okay looks good. For each day of the week, that is a weekday, it has returned weekday. And for Sunday and Saturday, it has returned weekend. But we didn’t want this we wanted only two rows. So I need to get rid of their week name as a field. And we’ll have our table we can see our sessions, page views, ecommerce conversion rate, and average order value per week day versus per weekend. And we already can see some interesting data in here. So if I was the owner of this shop, I would rather advertise and promote my products on weekdays because the average order value is like five times bigger than average order value on weekends. Now this is going to be a quick tutorial. And I cannot show you all the details of case when statement. But let’s go back to the formula. Because I want to show you some interesting things about it. Again, we go to resource, manage added data sources. It is our data source.

Type in to find our field, click on function. And here is our formula. Now the first thing I want to talk about is the logical operators that you can use in the conditions section of case when the statement. So instead of equals, we can use exclamation mark equals which means does not equal something. Okay. And another thing that we can use, we can use all and raise another condition. So all day of week name equals Tuesday. It’s a big day.

So as you can see in a single line, we have checked for both Monday, and oh my typo. For both Monday and Tuesday. Okay, now we can’t bring all of these days into one line. But there is still a better solution. Here, let’s remove line three to line six because I want to bring all weekdays in one line. For this, I’m going to use in.

In a case when statement we can use in and then parentheses. And then inside these parentheses, we can have multiple values separated by comma. Okay, like Monday and Friday.

So the result is the same. But we achieved all the logic that we wanted. Now to combine Saturday and Sunday, for there’s a few more little bit more technical, I’m going to use a regular expression. And yes, you can use regular expression, in a case when a statement, which you know is powerful. And it brings the flexibility of this formula to a whole next level. If you do not know what regular expression means then it’s fine you can use in as so before. We wrote it much more easier in seven lines, it is possible. But I encourage you to go and check out regular expression because it’s so much powerful. And it comes in handy in many situations. So for this, I’m going to write regexP_match.

And then I’m going to have my field name. And then I’m going to have my regular expression in here which in this case is simple. Saturday pipe, which means or Sunday. So basically in the language of regular expression, I’m saying that when day a week is Saturday or Sunday. The formula is valid, let’s update it and click finished. Great. Now we have the same table which has two lines of code. If you’re curious to know more about the case when statement, please refer to Google Data studios documentation. It’s easy just Google it. And hope you’ve enjoyed this tutorial and thanks for watching. Bye.

All right, so there you have it. This is how you can utilize the case function within Data Studio. Do you have any other use cases that we haven’t thought about? Then let us know down below in the comments. We’d love to hear from you. And if you want to learn more about the functionality of Data Studio, definitely check out our playlist right there. And don’t forget to subscribe to our channel because we bring you new videos just like this one every week. Now my name is Julian. See you on the next one.

SHOW MORE...

Google Data Studio Tutorial (2019) 📊 – How to build a Dashboard with GDS

Google Data Studio is Google’s prime tool to build Data Visualisations. Today, Ahmad of Siavak is going to show us how to make the most of this Analytics tool and build a quick dashboard for us.

🔗 Links:

Google Data Studio Tutorial Playlist – https://www.youtube.com/watch?v=R0rV4ZS-ruQ&list=PLgr_8Hk8l4ZGijmrFPjYSeKwLbnsqwq1e

Google Data Studio – https://datastudio.google.com/navigation/reporting

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

It’s 2019. And one of the hottest products from the Google Analytics line is probably Google Data Studio. They have improved the tool so much over the last few months and over the last few years that I wanted to update our tutorial on Google Data Studio. Now, I’ve asked Ahmad to come up with a quick overview video on talking you through the most important features of Google Data Studio, how to build a dashboard with it, and go through the general process of creating a dashboard and sharing it out to your stakeholders. Now, this is by no means a complete tutorial. All the features that are out there, and Google Data Studio this will take far too long. But we have a playlist on Google Data Studio where we explain certain features in mode, so check those out as well if you’re interested. But for now, we got lots to cover, so Ahmad take it away.

Thanks, Julian. This is Ahmad from Siavak. And in this video, I’m going to give you a quick overview of Google Data Studio. Data Studio is a free tool from Google that allows you to connect to and pull data from different data sources like Google Analytics, Google Ads, Facebook Ads, or even Google Sheets, and then easily create visual reports to share with your clients, stakeholders and team members. In this video, I’m going to show you many features of Google Data Studio as we create this awesome ecommerce reports together. Exciting, isn’t it? Let’s dive in and see how it works. This is the main interface of Google Data Studio. We can see your previous reports in the middle and at the top, you can choose to start with a template or create a blank report.

We are going to start with creating a blank report. The first thing we need to do is to connect our report to a data source. We can do it by clicking on Create new data source. Google Data Studio can connect to a lot of different data sources. There are free connectors available for Google products, such as Google Ads, Google Analytics, Google Sheets, or even Google Bitquery. And for everything else, we can use partner connectors. Partner connectors allow us to connect to many different data sources like Bing, Facebook, Instagram, Adroll, etc. For the purpose of this tutorial, we’re going to hit cancel. And it starts with the sample Google Analytics data provided with Google. collect data reports, and we are good to go. First things first,let’s give our report a name.

Next, let’s add the header. We started creating a rectangle, resizing it and changing its color. Next, we’re going to add a title. You can select the text, change the color, and change the size of the font, and also resize the widget and move it to better place. Now let’s add some numbers to our reports by adding some scorecards. Score points are good for showing KPIs or key performance indicators. Basically, any number. I’m going to head to is style tab to give our scorecard a border and round the corners. Let’s adjust the padding as well. And then I’m going to head over to the data and enable the date range comparison. So I’m going to compare this metric to the previous period. And here he appears. Now that we are happy with the scorecards, we can duplicate and create more. This retains the styling and the configuration for the date. The only thing we need to do is to change the metric. For this one, let’s choose transactions. We can drag it over to replace the metric. Or we can continue this process to make more scorecards. For this, I’d like to have product detail list. Drag and drop, and we’re done. Next one is a revenue.

And I’m going to change this one to show a compact number. Next up average order value. So as you can see, I can just type in here to search for all the metrics that are available in my data set. It’s a drag and drop them to the left to change the metric. Now let’s create some room for our final metric which is ecommerce conversion rate. I’m using my keyboard to move the scorecards around. And I can even control C and control V on my keyboard to copy and paste and create a new ecommerce. Now let’s see from which countries are we getting our revenue from. For this purpose, I’m going to add a map to the report. Now each shade represent the number of sessions, but we’d like to replace it with revenue. See which country bringing more revenue to our commerce store. And just to make it clear for the end user that what metric is being represented by this graph. Let’s add a title and call it revenue by country. Next, let’s see some trends. By adding a time series charts to our report. Just like the scorecards above, I’m going to give it a border and also change the radius for the corners. Let’s decide what numbers do we want to show on this chart. I’m going to head over to the Data tab and search for some metrics. I want sessions to be either, but they also want to see product detail we use product adds to cart and transactions.

Let’s duplicate this and create another chart for revenue. Right click and select Duplicate. Ok. So now I’m going to remove the metrics and replace the final one because I’d like to see the trend of revenue over time. But for this chart, I’d like to see how revenue builds up over time during this time period. Now if you’re going to duplicate this and create not a chart to show e-commerce conversion rates over time. I’m using my keyword to move this around. Just like before, you can head over to the Data tab, search for metric and replace the metric on the chart by dragging dropping the new metric over the previous one. For this one, however, I don’t want it to be cumulative. So uncheck this but I do like to see a trend line. Cool, isn’t it. Now let’s add a pie chart. To see the distribution between male and female users. Drag it over here choose gender as the dimension for this pie chart, and we can leave the metric to be the number of sessions. I’m going to head over to style tab. But I want to move the legend over the top just to make some room for the next visualization we want to create.

Now let’s use this space to create another chart and see which cities are we getting the most revenue from. For this purpose. let’s choose the bar chart, the horizontal bar chart. Move it here, resize it to fit, adjust the size to make room for the name of the cities, changed the metric to revenue. Premium sessions and change a dimension to city. Our ultimate commerce reports is almost finished. Let’s see how does it look for the end user. Looks nice, doesn’t it. But there is a problem. This report is a static and the user cannot interact with it. They cannot choose the time period or take a look at different segments of data. So let’s go back to edit mode and add some features and interactivity to this report. The first thing we’re going to do is to allow the end user to change the time period after report. And this is done by adding a date control filter just like this. Going to head over to this time tab and change some colors to make it visible. Now, the reviewer of the report can easily choose the timeframe for which they want to look at this report just like this. Now let’s go back to edit mode and add some more cool features to this report. I’m going to select these all, bring them down to make some room for the extra features we’re going to add.

First, we’re going to add a drop down menu that allows users to take a look at traffic from different source mediums. This is done by adding a filter control to report. By default it sets to medium as its dimension, we’re going to change it to source medium. Again, we’re simply dragging and dropping. Next, I’m going to duplicate this. Create another one for device category, which basically means desktop, mobile or tablet and allows them to look at traffic only from desktop devices, the tablets or mobiles. And finally, I’m going to duplicate again and allow the end user to filter my user time. Which basically means is that the new user or a returning users. Now let’s review our report again and see how does it look. Now it’s possible for the end user to filter this report base on any of these criteria. For example, they can choose to only look at desktop traffic. And all the numbers and charts will be updated to reflect the choice.

Now that we created this ultimate ecommerce report together, it is time to share it with others. Let’s take a look at different sharing options we have access to in Data Studio. The first option is to download the report as a PDF form. And we can even protect it with a password. The next option is to set up automatic delivery of the report via email. So Data Studio, emails a PDF version of this report to the email addresses that you choose on a daily, weekly or monthly basis. We can simply create a link to this report. Or we can share it with other people, just like any other Google Drive document. Just like a Google doc or Google Sheet, you can get a shareable link, or you can share this report with the specific emails. So as you can see, there are lots of options for you to share a report with the people who need to review it. Okay, I hope you’ve enjoyed today’s video, in which we learned how to use Google Data Studio to connect to a data source and create a beautiful, interactive and fully functional report and share it with others in about 15 minutes. I’m going to post a link to this report in the descriptions. So you can review it and grab a copy for yourself to play around with. To make a copy of the report inside your own Google Data Studio account, simply click on this little icon. That’s it for today. Thanks for watching.

All right, so there you have it. This is a quick overview on Google Data Studio, how you can use it and hopefully you know now if you should use it for building your dashboard. It’s pretty easy actually. But there are some quirks of it. So I also encourage you to check out our playlist which I’ve linked up right over there which will show you a few more details of Data Studio and a few more specific details on how you can utilize the tool for effective dashboard building. And as always, if you haven’t yet, consider subscribing right over there to our channel because we bring you new videos just like this one every week. Now my name is Julian. See in the next one.

SHOW MORE...