How to use Dynamic Facebook URL Parameters to Tag Your Campaigns

When setting up UTM Parameters for Facebook Ads you previously had to go through some elaborate steps to build your correct Parameters into your Campaigns. Wit the new dynamic Ad Parameters feature you can quickly input Ad Parameters into your campaigns and keep them consistent. In this video we are going to take a look at this new feature.

Links mentioned in the video:
Facebook URL Parameters: https://www.facebook.com/business/help/1016122818401732
[VIDEO] URL Query Strings: https://www.youtube.com/watch?v=Z_o7iilNdLQ
[VIDEO] UTM Tags explained: https://www.youtube.com/watch?v=MNOsldDS_pY

More from Measureschool

Correct Google Analytics Setup Course: https://measureschool.com/products/google-analytics-course/
GTM Resource Guide: https://measureschool.com/guide
GTM Beginner course: Course: https://measureschool.com/emailcourse
Courses: https://measureschool.com/products

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

So Facebook ads has recently announced a new feature where you can take dynamic URL parameters and implement them into your Facebook Ads. What that means for you, and why you should be using them all the more, coming up right after this.

Hey there, and welcome back to another video of Measureschool.com, teaching you the data driven way of digital marketing. My name is Julian, and today we wanna talk about this new feature of dynamic URL parameters within Facebook Ads.

Now if you’re not familiar with URL parameters as a whole yet, I would urge you to check out our video on query strings right here that will explain a little bit more why you should be using them, and how a tracking system like Google Analytics actually uses them. And from that you will then understand why it’s so important that you tag your URLs correctly with UTM tags so Google Analytics actually can identify where your traffic is coming from, and will put them into the right category within your Google Analytics. Now if you’re already doing this with Facebook Ads, hats off. This is really a good practice to implement in any kind of campaign.

But Facebook has made our life so much easier now because they have brought a new feature into the whole Facebook Ads suite, which are dynamic URL parameters. And these are really helpful to tag our campaigns fast. Now, how you can use them, and why it’s such a time saver, let’s explore this a little bit in our screencast.

All right, so here we are in our Ads Manager account of Facebook Ads. And I have an old campaign here that I’ve ran before. And I’ve also used UTM tags to properly tag my ads. So if you go to Edit here, and scroll down, probably know that there is a field called URL Parameters, and there’s where I’ve entered some UTM tags so I’d be able to identify my campaign later in Google Analytics as well. Now in order to tag my ads efficiently, I’ve actually used our UTM tagging tool, where I usually would put in the landing page, and then define the medium, the source, and implement the campaign name, the campaign content, and campaign term. Now normally I would go through and actually say, okay, what’s the campaign name here, and I would copy that, put that into that field. And then campaign content would be my ad set, right here. And my actual ad name would also be inputted here into the sheet, so later when I choose my campaign source and landing page, I’ll get a UTM tagged URL that I could then input into my parameter field right here. So then it would be tagged up correctly and I would be able to identify it later in Google Analytics.Now this was a really cumbersome process if you were going through multiple campaigns, multiple ad set, multiple ads, and had to change this around every time you have a new ad.

Luckily, Facebook has a new feature called, the dynamic parameters for your URLs, and these look as follows: you can simply now, take these two curly brackets, and input site source name, placement, ad ID, ad set ID, campaign name ID, ad name, and so on, instead of the actual name, and Facebook ads will automatically replace this in your URL parameters. So these are basically placeholders that you can use freely. And in our case, I would just go ahead and say, okay, I will keep the cpc, and the Facebook the same, but I wanna change the campaign name. That should be automatically inputted, which is right here, the campaign name. Then we would like to add our ad set name, as campaign content. And we would like to have the ad name as the campaign term. That will give us our URL string with these curly brackets in here. So let’s copy that. And replace this right here. We don’t need the beginning of the URL for this URL parameter field. And now those should be automatically replaced in our ad.

So once I’ve confirmed this, I’ll be able to try this actually out by going to this button here, and viewing this on my desktop newsfeed. And right here we see the ad, and if I click on Learn More, I should go to the page, the landing page, and automatically this was replaced with our campaign name, right here, UTM content, and UTM image. And this should then also be visible in our Google Analytics. So, if you go here to the realtime reporting, look at traffic sources, we just see that somebody came through cpc Facebook, and we have here our guy from image YellowJulian, which is the actual ad name. So, this was transferred into Google Analytics just fine.

Now, this makes my life much easier because now I can just copy this string and input it into all the different ads that I have on Facebook, and don’t have to worry about adjusting this URL parameter anymore. So if you are using Facebook ads a lot, this will help you out to keep your ads tagging much more consistent, have cleaner data in Google Analytics. Hopefully will have you implement UTM tags with every ad on Facebook.

All right, so there you have it. This is the new feature of Facebook ads, where you can take these two curly brackets with your parameter name and implement them dynamically into your URL parameter template. Now, this is really great addition because we now can basically take this one string that I showed you, and input that in any kind of ad set and it will dynamically replace this with your ad set name or your campaign name, for example, and keep our Google Analytics cleaner and more consistent in terms of the URL tagging structure that we have now in place.

So, I hope this video helps you out in terms of tagging your campaigns correctly. If you like this video, then please, give us a thumbs up, and also subscribe to our channel right over there, because I’ll bring you new videos, just like this one, every week. Now, my name is Julian. ‘Til next time.

How to Install Google Optimize on Google Tag Manager (2020 Updated)

Google Optimize has become a popular tools for A/B Testing and Conversion Rate optimization – Here is how to set it up. First we will discover the account creation, then we’ll see how to install the snippet with Google Tag Manager or the other hardcoded versions of the Tracking code (analytics.js or gtag.js) and lastly we’ll install the Page Hiding Snippet.

Helpful Links:
Google Optimize: https://optimize.google.com
Optimize Help Forum:
Google Optimize Tutorial 2017: https://www.youtube.com/watch?v=vDDMMbhvSVU

#GoogleOptimize
#ABTesting
#CRO

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

Correct Google Analytics Setup Course: https://measureschool.com/products/google-analytics-course/
GTM Resource Guide: https://measureschool.com/guide
Email course: Course: https://measureschool.com/emailcourse
Courses: https://measureschool.com/products

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

Hi there, welcome back to another video of measureschool.com teaching you the data driven way of digital marketing. My name is Julian and today we want to talk about how we can set up and install Google Optimize to run experiments on our website.

Now if you have signed up to Google Optimize, you obviously need a Google account to do this. You will be greeted with this interface where you can set up your account. Now like in Google Analytics or Google Tag Manager, there is an account structure, that is nested from Account to Container and then New Experiment. I would recommend as the account is to choose your company name, beneath the company you might have different websites. We’ll put this into one account. Now you can optionally tick these boxes and then right here, you need to acknowledge terms of service. Let’s click on next and then you’ll be greeted with the container setup. Now the container right beneath the account. So here you can enter your website, just like this and create your container. Like I said, we have all accounts and we have our company account and then beneath that we have our container so you could have multiple containers in one account if you choose so. From here, we need to get into the setup of Google Optimize on your page.

Now I have a demo shop here, running on WordPress, where I’m gonna demonstrate the installation of Google Optimize. The first thing that we see here is that says create experiment. I would skip this step and go right to Link to Google Analytics, because this is actually the setups that we need to undertake. Now we go with link property and here you need to choose your Google Analytics property that your Google account that you’re logged in with has access too. So here are different accounts, and I’m gonna go with our demo shop right here. Optionally take the view that you have enabled. And then link this to your account. This will open up a new popup here, where we can now add the Optimize Snippet to our site. Let’s get the Snippet. Here we have some implementation instructions.

Now in order to install this, there are actually different methods, because Google Optimize heavily works together with Google Analytics and Google Analytics has over the past year experienced different changes to their tracking code. Therefore we might go through different methods here in order to get this installed. What you definitely need in order to make this work is access to the backend of your website, where you can change the HTML page. This might be different for your website, depending on how you have installed Google Analytics, but in the end, you should be able to get to the html code later in the background, and be able to edit your Google Analytics code. Now my website is running on WordPress so I’m gonna go in into the Admin and access my Editor and appearance right here. I can edit the theme files. I have my Google Analytics code installed in the header PHP. Now again this might differ for your implementation of Google Analytics, and here we find our Google Analytics code right here. This Google Analytics code has changed over the past year so maybe you have a different version here. We are right now looking at the analytics JS version. So if you find it as analytics JS in your code, then you can follow these steps. Now all we need to do is look at our code here again, in this popup and add this one line. Require and then gtm desk code right here. This has nothing to do with your Google Tag Manager, if you have Google Tag Manager installed. This is something that is required to load the Optimize plugin with Google Analytics. So let’s go back here and implement this in our page. So that should be it. Update the file. And we should be all set.

Let’s open up our page. And then check with our tag assistant whether Google Optimize is installed correctly. So we have now installed Google Optimize on our page. Now what if your Google Analytics code looks a bit different from this one, and you don’t have analytics JS running? Then the second option that might be the case is actually that you have already the new gtag installed. So let’s take a look at this. I’m just gonna cut this here and put this under my comment. And take the second code out. So what if your code looks like this? This is the new gtag that actually gets recommended if you go into Google Analytics and install your tracking code. You’re not getting the old analytics JS anymore but the new gtag.js.

We did another video on that, if you want to find out more about this, and if you have a complete new installation of Google Analytics, then you might as well take the gtag.js. If you have still the old version running, that’s all fine. There’s actually no new functionality here and analytics JS is still supported. So you don’t have to change over your tracking code, but this is just a newer version of an analytics implementation. And here we also have the capability of installing our Optimize Container. All we need to do is follow the syntax here in the HAP section, where we add our code right here. We need to have a comma after the tracking ID. And then this code bit. So let’s copy this, go back to the page, and again after our tracking code, just gonna replace this. We have a comma and then our optimize ID. That would be this ID right here. Let’s put that in. And you now have Optimize implemented with the gtag. Let’s update this. Try this out again. And we see we have our global site tag installed and also Google Optimize and Google Analytics.

So this is the way how to install this little tracking code with the global site tag. Now the last case that might be how you have Google Analytics installed is actually via Google Tag Manager. So you might have the script of Google Tag Manager installed on your page, that deploys your container. Now you might be aware that within Google Tag Manager, you’re actually able to use a predefined tag. That is called Google Optimize right here. Where you can install your Google Analytics ID and your Optimize ID but when I read through the documentation and how to install Optimize with Google Tag Manager, they actually said that it’s not recommended to do the implementation through Google Tag Manager, but rather load the library directly on your page. So the recommended implementation is to actually install your Google Analytics script right here, before your Google Tag Manager snippet, exactly again with the required function of your Google Optimize container, but since you might have Google Analytics and Google Analytics pageview tag, deployed through Google Tag Manager, you don’t want to double this, and that’s why we’ll take out this pageview functionality, and so this code is only here to install Optimize on your page. Again notice this code is the Optimize container. This has nothing to do with Google Tag Manager. This is your container ID for your Google Tag Manager. When we update this, it should deploy it on our page. Let’s refresh. Again we see we have now Google Tag Manager installed, which deploys our Google Analytics pageview tag, and we have our Google Optimize installed. So these are the three cases, that you might encounter when you install Google Optimize on your page. At this point, we have Google Optimize installed correctly on our page, and can start running experiments.

There’s an optional step that is highly recommended to install them. And this is the page hiding snippet. So when we go to next here on our popup, we actually get a new snippet that is called the page hiding snippet. This hiding snippet reduces the page flickering. This is an effect that your users would encounter when they come to a page when an experiment is running and maybe you have change for example the color, of the web page. The user would first see the control version and then your variation essentially flicking from one version to the next, which is obviously something that’s not desirable and could screw your numbers in your test results. And therefore this hiding snippet actually loads your experiment first and then releases that version on the screen through the user so there’s no flickering effect once the user comes to your test page.

Now in order to install this, you simply need to copy this and place it before your analytics tracking code. So in our case, here’s our analytics tracking code. You want to place this beforehand and then we have this page flickering code installed. Now I know some people might think you could install this through Google Tag Manager because you have Google Tag Manager already installed, but this is not recommended because you can’t control when a Google Tag Manager code gets deployed and this page hiding snippet would not work in that instant. So now that we have it installed, let’s reload the page. See if there are any errors again. Everything is fine. We don’t have a tag for a page hiding snippet, but it’s installed on our page. We can also see this in our viewsource. So right here, we have our page hiding snippet, and that should be working fine. Now we have set up Google Optimize on the page correctly and can go to the next step. We finished this. We have linked our Google Analytics account. The last step that is actually required is to install a Chrome Extension to your browser. You’ll get this once you start building an experiment, so let’s just go into a new experiment.

You can choose if it’s in B test. We will have another tutorial on this. And the specific page that you want to run this on. Let’s create this. And then we can create our variant. And here it then ask us to install our Chrome extension, which you can do right through this menu. It’s now installed. You will have this little icon up here. And your website will load with Google Optimize installed and the browser plugin will let you build your variation. So this is how you can install and set up Google Optimize on your website.

Just to recap. You need to set up an account in a container. Link that all to your Google Analytics account. Then install Google Optimize plugin into your analytics code. Depending on which codes we showed you the different methods and add the hiding snippet before your analytics code loads. And in order to build your variations, you need to install the Google Optimizer extension fulcrum.

And this is how you can set up Google Optimize on your website. Alright, so did you like this video? Then don’t hesitate. Give us a thumbs up, and if you want to see more then you can go over to the next video over there, or subscribe to our channel right over there because we will bring you new videos just like this one every week. Now my name is Juliann, see you in the next one.

Where Did the Email Subscriber Come From? | Lead Source Tracking

Where did the user come from that signed up to our forms or subscribed to the newsletter? We can port this information from when the user first enters our page into a hidden form field and then store it in our CRM system. In this video we are going to discover how it can be done.

Steps:
Tag your URLs with UTM Parameters
Add a custom field in your CRM or Email Tool
Add a hidden form field to your signup forms
Install the provided GTM Tracking Template that will capture the UTM information and store it in a cookie
Customize the Form Fill option

? Links mentioned in the video:
UTM Parameters: https://www.youtube.com/watch?v=MNOsldDS_pY

#Mailchimp
#GoogleTagManager
#CRM

CSS Selector Tutorial: https://flukeout.github.io/
? Learn more from Measureschool: https://measureschool.com/products

?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

In this video, we’re gonna discover how you can track where your user actually came from and put that into your email marketing tool or your CRM system. All and more, coming up.

Hey there, and welcome back to another video of measureschool.com, teaching you the data-driven way of digital marketing. My name is Julian, I’m a bit congested today, but nonetheless, I wanted to come on to share a new tutorial with you.

Now today we want to talk about how we can track where your user actually came from, and put that into your CRM or your email marketing tool directly. Now, this information can be super valuable if you are a lead generation website, or you are trying to build an email list and knowing where your user actually came from, and having that field available in your database later on, can help you to segment your list for example, of if a user buys something on your website later on, you can backtrack and find out where the user originally came from, what was the signup source of that particular email address. In order to make this all work, we obviously need an email tool where we have the data available, and our example here, we’ll use Mailchimp and we’ll also need to track where the user actually came from originally. This particular tracking technique actually works with UTM parameters, so if you give them out in your advertising, you should be all set. If you don’t know what UTM parameters are, then I suggest you check out this video right here. Once a user then comes onto your page, we will pick up that information with the help of Google Tag Manager, then fill it into a hidden form field that we’ll have available through our email marketing tool like Mailchimp, but you could also use a different other CRM form or email marketing vendor. We got lots to cover, so let’s dive in.

Before we begin, let’s take a look at what we’re trying to accomplish. Let’s say you have an online store and have placed some advertising somewhere, just like this one right here. When you click on it, it takes you to your online store and here you are free to surf around, look at the products, and see what’s there, but eventually, you end up at a form just like this one, where you’re prompted to sign up for the newsletter or enter your contact information somehow, which oftentimes the user does. Let’s try this out. And you subscribe to the form. The unfortunate thing is that once you look into your list, you don’t really see where the user just came from. You just have their first name, and last name, and email address. Wouldn’t it be nice to have the actual source where the user came from? We have that information actually available because maybe you have seen, when we clicked on our ad here, this was UTM-tagged, so we have these UTM parameters at the end, which is something that is fairly standard when you are pointing different advertising to your website, so Google Analytics and other tracking tools can pick that up. On this landing page, you actually have the information that the user just came to measureschool.com, and then we need to transfer it to our form somehow and store the information in our contact records. To accomplish this, we need different components in place.

First of all, we would actually need to recognize that this is a UTM parameter tagged URL. Pull out the relevant information, for example, this UTM source, measureschool.com, store that into a cookie so it doesn’t get lost while the user navigates through the store. At the relevant page, we would need to fill that in to our form, where we would need to have a hidden form field to actually transfer that information into our contact database. Let’s start at the beginning, actually, and prepare our email marketing tool or our form tool, there where the actual data is stored to actually to be able to pick that information up. Oftentimes, this is done with an extra form field. So, the same as we see here, the first name, last, and the email address, we actually add another form field. In Mailchimp, this is easily done by going to the settings here and looking at the list fields. Here we can add a new field. We’ll just use the type of a text field. Enter the name for the field, which in our case should be source, for example. So the source, and here also, change this to source so it stays consistent, let’s save this. Now we have that field available in our contact records. How do we actually fill this field? We need to have this in our form itself. To make this possible, we just need to reintegrate our form. We go here to set up forms. We have an embedded form, and here we find the Mailchimp form text, let’s copy that. Go over to our site, I have already the HTML here prepared and I’m gonna just copy and paste that in. Update this, update our page here. And now we see we have a source field right here. But don’t worry, we’re actually gonna change this into a hidden source field later on, but for demonstration sake, I’m gonna keep this visible for now so we see what’s actually happening. Again, if the user would come in here and fill out this information, and we have a source field, let’s say this would be google.com, subscribe. Now we should be able to see that as well in our Mailchimp. Here is our contact, and here we would see he came from google.com. A fairly easy method to actually store that in our database. It gets a little bit more tricky once we want to make this dynamic, because the user shouldn’t be actually filling this out. This should be done by our tracking, automatic.

So how do we accomplish this? This is where Google Tag Manager comes in. If you have Google Tag Manager installed, we can file some tags, triggers, and variables in order to make this work. First of all, we would need to be able to pick up if there is a UTM source here in the URL, and then store that in a cookie. I already have something prepared here that you can download at measureschool.com/sourcetracking which is a tag template that you can easily install here in the admin section. Import the container. Choose the container. Select your adjacent file. Upload this to an existing workspace, we have here a default workspace. And, to do nothing wrong, you can go with the merge option and simply rename conflicting tags. You can confirm this. And now we have two new tags, a few new triggers, and variables in here.

Now what do they actually do? First of all, we have our set cookie variable and this will actually just set the information from our URL, so if there is a UTM source in the URL, then it will take that value from that UTM source and write it to the cookie. So let’s try this out. Let’s go into our preview and debug mode. Close our fields here. And click on our ad again. We have now our UTM source, measureschool, in here. We see that our set cookie has filed and has set a cookie in our browser. How can we see this in our developer tools? Under view options, we have here our developer tools. You can actually look into the application tab here, and look at the cookies that were set on this particular tool name. We see here, a new cookie called utmsource with our measureschool.com. By default, this actually expires after one day, but you can customize this in the tag if you want to. The good thing about this, it doesn’t matter where we go on the page, this will actually persist throughout our session and be available to us later on. And that is actually necessary because once we go and navigate to our Mailchimp contact form here, you want to fill that cookie value into that form field.

Now, how would we do this? There’s another tag in Tag Manager called the form fill hidden form field. If you open this up, you actually find the mechanisms to fill our form field. All we need to have is the selector of that particular form field. Now, to find the correct selector here, we actually need to go back to our page, find our field that we want to fill, inspect this element, and we can see the HTML markup. It depends on how your markup is structured, but in our case, we have a class, we have even an ID, we have a name source, and the different methods of writing a CSS selector. In our case, it’s very straightforward, ’cause we have an ID here and we can use this selector, NCE source. Just copy it and fill in our CSS selector. This is done with the pound sign for IDs. And then NCE source. Now again, this might differ, and you would need to know how to use CSS selectors. It doesn’t take much to get familiar with them. I’m gonna make up a resource down below. Once you have this CSS selector in here for your input field, you can go ahead and configure the trigger. Now I’ve prepared a trigger here called dom form page, which we would attach to our tag and let’s save this. But before we go into the preview and debug mode, we actually need to customize this further, so here’s our dom form page. Here it just looks at if the UTM source cookie is actually filled and it’s not undefined. I would put in another condition to only attempt to fill the form field when it’s actually on the page. Let’s say we have our Mailchimp contact form fields here and could simply say that if our page path contains Mailchimp contact form, we should be good to go. Let’s save this. And now we can test it all out, let’s refresh our page. Go back.

Let’s go, first of all, to a category page to check whether something is firing. Nothing is firing. Now we’ll go to our Mailchimp contact form page and our form fill is firing. We see it filled out automatically our source field with our cookie. Now really everything is in place in order to track this correctly. I promise you that we’ll actually hide this form field. It’s easily done by going into your HTML, and actually looking up where you find that form field, would be this form field right here, and changing the type from text to hidden. We can also get rid of the different markings here, like the label. This is specific to Mailchimp. You don’t maybe have to do that in your form field. Let’s reload this and see if it worked. So now this home form field is actually hidden, but it’s actually still in the HTML. If you go to inspect the element here, you should be able to still find it. This is our email field, then beneath that, we have our hidden form field right here, so it’s actually hidden from the user, so the user wouldn’t see this. But we see our measureschool.com got filled out. Let’s test this again, let’s go back to our test site here. Click on our ad, we have our UTM source here. Go to any other page, and later on, we’ll go to our Mailchimp page. We fill out our form information. Subscribe. And we should be in a database. So here we go, we have our hidden form test. We see that our source is now filled out dynamically from measureschool.com. Now that everything works, we just need to go ahead and submit this version. Give it all a name. And publish this so all your users will be automatically tracked with this method. This is how you can track where your user came from in your email or contact database.

All right, cool. Now you know how to track where your user actually came from and fill that into a hidden form field and then transfer that into your email marketing tool or your CRM system. If you want to download the tracking template that I had prepared for you, then head over to measureschool.com/sourcetracking and we’ll get you all sorted out.

If you like 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. My name is Julian, ’til next time.

Import JSON-LD Meta Information from the YouTube API for embedded Videos

Having JSON-LD data about your embedded Videos on your site can help produce Rich Search Results for Videos in Google Search. Just writing this data can be tedious, so we came up with a workaround that enables us to pull the data directly from the YouTube API and transfer it into a JSON-LD object.

#JsonLD
#YouTube
#GoogleTagManager

? Links mentioned in the video:
JSON-LD for Video: https://developers.google.com/search/docs/data-types/videos
Structured Data Testing Tool: https://search.google.com/structured-data/testing-tool
Template: https://measureschool.com/youtubeschema

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

?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

Adwords Conversion Tracking with Google Tag Manager Tutorial

Adwords Conversion Tracking is an important part of any AdWords Campaign. With Google Tag Manager you can easily deploy the code on your website without having to place it in your website code. ? More from Measureschool ? Correct Google Analytics Setup Course: https://measureschool.com/products/google-analytics-course/ ? GTM Resource Guide: https://measureschool.com/guide ? Email course: Course: https://measureschool.com/emailcourse Courses: https://measureschool.com/products ? 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
"

An API Tutorial for Marketers – Using the Postman App

APIs often get used by developers to pull data into their website, app, display it or manipulate it – but did you know that we, as marketers, can use this data as well? If we only find a way to get to it…

In this video, we’re going to show you how you can use API data with the Postman App – without having to learn a new language, getting used to a complicated UI or a new workflow…

#PostmanApp
#API
#MarketingTech

? Links mentioned in the video:
Postman App: https://www.getpostman.com/
Mailchimp: https://mailchimp.com/
Mailchimp API Docs: http://developer.mailchimp.com/documentation/mailchimp/reference/overview/
Mini Course: https://techmarketer.io/postman

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

?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

– In this video, I’m gonna show you how you can pull data from an API with the help of Postman app. All the more coming up right after this. Hi there, and welcome to another video of measureshool.com where we teach you the data-driven way of digital marketing. My name is Julian, and on this channel, we do marketing tech reviews, tutorials, and give you tips on how to become a more technical marketer, just like this one. So, if you haven’t yet, consider subscribing. Now data is everywhere, but how do you get to it? Well, most of the times, you will go through an API. Now, APIs have been used by developers quite often to pull data into the app or the website, display it, manipulate it, or change it around in the third party system. But, we as marketers can actually also use that data, if you just know how to get to it. Now, before you start building an app, try to retrieve that data and mesh it around and maybe send it back into your analytics system, why not try to get the request right first? And this is where Postman app comes in. Now, with Postman app, you can actually test APIs, and without coding, can send in a request with the right parameters and see what data you get back. Highly useful for us marketers because we can then instruct our developer to pull the right data or help us to build an app to actually take that data and send it onto a marketing script or a marketing tool like Google analytics. So, today I want to show you how you can use Postman app to retrieve data from an API, send your first request, and also manipulate data in a third party system. Now, we got lots to cover, so let’s dive in. Alright, today our journey starts at getpostman.com where you can download the Postman app, previously it was also available just to download it as a Chrome app, but that’s been depreciated, but here you can download it for your Mac, your Windows, or Linux machine. And once you install it, it should look something like this. Now, the tool in its basis is a free tool, which we can use as marketers just to see APIs, but if you want to take advantage of more of the advanced features, there’s also a pro version and enterprise version. Now, this tool is most often used to develop and test APIs. I actually use it most often before I start our building, for example, my favorite app scripts here, or a function within JavaScript. I want to actually know what data do I need to send into an API to get the right response. And Postman lets me do all of this without having to code too much and get caught up in any kind of syntax that I might do wrong within Fscript or JavaScript or PHP Rugan rails or any other language you use to grab information from APIs. Now, you might have seen something similar. It is actually like the Query Explorer for the Google Analytics Core Reporting API. You login here, then you can try out the API, mix and match certain metrics for example, and pull that data directly from the API, get the output right here. Now, if you actually wanted to integrate this into your app and have the right parameters that you send into the API to get a response, you would probably test this with something like Postman beforehand. So let’s get started with our first request. Here is an API that gives me some Chuck Norris quotes, and it specifies that I just simply simply need to send a get response to this endpoint, this URL to get my random quote. So, let’s try this out, let’s copy this URL, go over to Postman, and put in our URL right here, and then we have our different methods of sending that data. We want to go with the get response. Now, we can send this off, and we get a response, and this is actually a Jason response, so this is JavaScript object notation, and this is the structured way that we can get the data back, and we see here the value of this object is actually our quote that we wanted to get. So, pretty easy. In this sense, Postman is almost like a browser. You put in your URL, send it off and get a response. Now, if you do any kind of mistake, so let’s add something to the end here and send it, we see that the status is a 500 internal error. We get a message from the API back. That’s not always the case, but it helps us debug and maybe find something that we did wrong. Now, this is a very, very easy API, but we can just send in our URL and get a response back. In most cases, it’s it a bit advanced that that. Let’s go to another example, so here we have the weather API, the OpenWeatherMap, and we can actually get a current weather status for a city. Now, what do we have to do? We have to send in as a query string here in our URL the actual location. So, let’s try this out. Let’s take our API call here and put it into place. Now we have a query string, this is key of Q and the value of the city name, in our case Berlin. By the way, if you don’t want to type that out in the URL itself, you could also at any time click this Params here at the end, and type in the right key. and the value will be added automatically to your request. Then we can send this off and we get a negative response here of 401, saying that this is an invalid API key. Apparently, we need an API key to get the data from this API, and this is actually something that is required quite often with not as open APIs as the Chuck Norris API. So, we actually need to sign up to get our API key right here, so let’s copy that, and we actually need to send it in somehow, so let’s see how to do that. We can look up this in our documentation here, and we just need to attach another query parameter, which is the app ID with our API key, so let’s do that. Let’s go back and put in app ID, and then here our API key. Send this all off, and this time we get a response that right now in Berlin, there are clouds and description, broken clouds. So, quite interesting to see the response data and what data we can actually get out and maybe test that and send it onto a tracking script that sends the data over to Google analytics, so we would have the data in there, what weather it was at the location of our user, who just visited our website or bought our product. So far, so good, but we can not only get data from API, but also affect a change in the application itself, and this is done through other requests such as the post request, so let’s take a look at an example of that. Here we are in our MailChimp account, and MailChimp also has an API, so if we scroll down, we can see can see here the API docs. I actually need to log in first into my demo account here, and we can look into the API references and see what we would need to make this actually happen. First of all, this would be our URL, so I’m gonna copy that over. We actually need to make sure that we have our data center changed here, in our case, that would be US8. And then we need to authorize with our app ID probably. The authentication this time happens through HTTP basic, so let’s go over to our MailChimp account and look into our account options here under extras, we can get our API key, and here we have our API key that we copy and do some special authorizations, so the basic authorization and the user name in the case of MailChimp can be anything. I’m just gonna put “anything” and the password, our API key. That is something we want to request with our data, and now it’s been added to the header of our request and we should be able to send over request already. Here, we get our account information back. Now we can look into the developer reference and see how we can, for example, add a user to a list, so let’s go over to list here, and let’s say we wanted to create a new member of that list. What we would need to have is the list ID, and then we can create any member. What do we have to send in? The email address, the status at least. Okay, let’s do that. First of all, let’s find out, what is our list ID? Now, we could look it up in the interface, but we could also just put in lists right here, and send this request over in order to see what kind of lists we have. We actually have one list and the Id is this ID right here, so we will add that to our request as well, and then we can go into our members. Let’s send

"

Why every marketer should learn JavaScript (feat. Mike Arnesen)

Why should you learn Javascript as a marketer?

If you are on your way to get deeper in the technical marketing field, this might be a question that you already came up with.

In this weekly episode, we invited Mike Arnesen who’s the owner of upbuild.io, a boutique marketing agency that helps its clients with technical marketing, such as SEO, CRO and analytics.

We took our chance and asked Javascript related questions that might be relevant for Techmarketers.

Questions in the video:

1:27 Why is Javascript so important to learn as a marketer?
4:19 What are the implications on talking to developers and communicating with your clients?
7:07 What are use cases of Javascript in your work?

? Links mentioned in the video

Full length video: https://techmarketer.io/mikearnesen
Mike’s Website: http://www.mikearnesen.com
Mike on Twitter: http://www.twitter.com/mike_arnesen
Upbuild: http://www.upbuild.io
“Two years of Upbuild” Blogpost: http://bit.ly/2sSNs4B
AppScript: https://developers.google.com/apps-script/
Google AdWords Script: https://developers.google.com/adwords/scripts/
Google Tag Manager: https://www.google.com/analytics/tag-manager/
Google Analytics: https://www.google.com/analytics/

? More from Measureschool

Correct Google Analytics Setup Course: https://measureschool.com/products/google-analytics-course/
GTM Resource Guide: https://measureschool.com/guide
Free GTM Beginner course: https://measureschool.com/emailcourse
Courses: https://measureschool.com/products

?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

– In this video, Mike and I are gonna talk about why every marketer should learn JavaScript. On more, coming up right after this. Hi there, and welcome to another video of measureschool.com, where we teach you the data-driven way of digital marketing. My name is Julian, and on this channel, we do marketing tech reviews, tutorials and the occasional interview just like this one. So if you haven’t yet, consider subscribing. Now, this week I had the chance to talk to Mike Arnesen, he runs upbuild.io, a boutique marketing agency that actually helps people out with technical marketing specifically. So they do SEO, CRO and analytics as well. Now, if you wanna find out more about upbuild.io, head over to their website and their blog where they also have some great tips on newest marketing tech, tips and tricks on how to do a little bit more of the technical things in digital marketing. But in this interview, I talk specifically with Mike about his technical skillset and why he thinks that marketers should definitely learn JavaScript if they want to become a technical marketer. Now, we’ve got lots to cover, so let’s dive in. Let’s talk about the topic we wanted to talk about today, why marketers should learn JavaScript. So could you give us a first take of why do you think JavaScript is so important to learn as a marketer?

– Yeah, I think we talked about understanding the underlying principles of how things work on the web. Like it or not, JavaScript is the leading backbone of a lot of the technologies we experience today. So web sites are increasingly more reliant on JavaScript. Some sites are almost completely built in JavaScript, if you’re talking about like a Node site or an Angular.js site. That’s so JavaScript heavy and understanding that is so helpful. Google Tag Manager, that is, at its core, it’s an abstraction of JavaScript. You need to understand JavaScript to understand how GTM works, and yeah, they make it really usable and friendly for someone who doesn’t have that background, but understanding that will make the lock click in your head to just be like, oh, wow, here’s this hidden power of it, and it just really expands on you very quickly once you understand like, oh, if I understand more about JavaScript, this really just becomes something hugely powerful. And then, of course, SEO. SEO is ensuring that a computer program can experience your site the same way that a user does. So if a user is seeing a site that’s just very complex with JavaScript, there’s a lot going on, there’s a lot of interactivity. You need to be able to understand why or why not is that going to transfer over to a program, so it’s like, because Google’s getting pretty good at rendering JavaScript and processing it. But the other search engines are not that far along. Google still has, I think, my general belief about Google is Google likes to think they’re a couple years ahead of where they actually are in terms of, they’re like oh yeah, don’t worry about your site, it’s great, we’ll parse all the JavaScript and process it. Tends to actually not be the case most of the time. So you still need to understand like okay, here’s where we’re running into roadblocks, here’s why that’s happening, and maybe here’s where we can solve them. And I think by understanding JavaScript, you get to solve SEO problems, analytics problems, and be more conversant with your development partners and the people you’re working with every day.

– So yeah, just to add to that, I would say that there are a lot of use cases, there’s even the PPC use cases in order to write AdWords scripts. There is, if you do any kind of CRO implementations of A/B testing–

– Absolutely.

– There are so many fields of the marketing that JavaScript touches. Obviously, you should know a little bit of the backbone as well like HTML and CSS, but JavaScript is the meta skill that basically renders everything, it’s the superpower that renders everything useless in that regard. So let us talk a little bit more about the communication part, so once you become proficient at JavaScript, what do you think are the implications on talking to developers and communicating maybe also with your clients?

– Yeah, I mean, for me personally and the people on my team, it’s been, I kinda had a pretty okay familiarity with JavaScript, but really in the past two years, I’ve really made an intentional effort to ramp up what I know and adapt to my knowledge, so I’m taking like, every couple weeks I’ll hop into a course at Codecademy and learn more about like hey, why is Angular 2 different, what’s going on there. Or like TypeScript and stuff like that. Having a baseline understanding of HTML, CSS, JavaScript, stuff like that, I understood enough of okay, here’s why accessibility and content rendering is really important for SEO. But I was always like, well, this is like SEO best practice. Everybody should make sure their site renders, of course, obviously. So when I ran into a site that was built on Angular or React or Node or anything like that, and it didn’t render with that JavaScript, I would kinda get annoyed ’cause I’m like, how did these people not know that, of course, they should totally do it. But once I dug deeper and understood more complex topics around, like let’s continue with the Angular example. So taking three courses in Codecademy with Angular 2. And you know, like other JSON technologies, like Ruby, for that matter, just like seeing the similarities there. It suddenly clicked and I was like, I know why developers have chosen to do this now. It makes sense, it’s totally powerful to be able to dynamically pull stuff in client side and kinda build out experiences on the fly and not put everything at a unique URL that needs to load up, query a server side database and bring in the information, it can be kinda slow. The benefits became very clear. And at an interpersonal level, that made it so much easier to be able to come to development partners from a place of empathy and be like hey, I totally get why this is awesome. Angular actually is cool. Unfortunately, there’s a little bit of workaround we’re gonna have to figure out because here’s X, Y and X about the reality of SEO today, so let’s just figure out a happy middle ground, instead of coming at it from like, hey, this site sucks, it needs to change because search engines can’t get at it. You can come from a different approach once you understand it more and speak in their terms and convey that same passion about the cool technologies. It’s super super helpful for building relationships and getting problems solved together.

– Absolutely. What are some use cases for you and the work that you have done with JavaScript? Yeah, what are some use cases where you used it on clients’ projects, for example?

– Yeah. Here’s a cool example that we, I mean, I guess that involves pretty much everything. We work with a lot of, maybe we don’t work with a lot of clients that have a lot of layers, but we work with a couple bigger organizations that have a lot of different divisions. So we work with a non-profit, they do medical research and so we worked the fundraising arm. And they really needed to basically have a popup on their site that was going to ask people to donate. They were gonna have a big campaign, and they had essentially run out of budget with their developer. And the developer didn’t have a lot of time either, so even if they had the budget, it might not have happened. And they were like, “Well, we wish “we could have this popup come up on our site “that’s going to ask people like donate, “drive them to our donation page.” And we were like hey, let’s take a crack at that. So what we ended up doing, so essentially, no one involved on our side or with our client’s direct contact could really access the code base of the site. So if we wanted to like upload the file, it’s not gonna happen. If we want to change content, it was not gonna happen. So we got actually a file in Adobe InDesign, and they were like, “Hey, this is what “we want this to look like.” So we actually went to, we just used Codepen to mock up what this code is gonna look like, we

"

Chrome Developer Tools for Marketers – The Guide

Every Marketer should know how to use the Chrome Developer Tools. The DevTools provide a great look at what’s going on underneath the surface of a website. You can efficiently track down layout issues, debug JavaScript, and get insights for tracking code optimization.

In this video, you’re going to learn how you can use Chrome’s Developer Tools as a Marketer to understand your website better.

#ChromeDeveloperTools
#ChromeTools
#Measure

HELPFUL LINKS

More about Dev Tools: https://developer.chrome.com/devtools
Google Tag Manager: https://www.google.com/analytics/tag-manager/
GTM Playlist: https://goo.gl/MfGcRR

MEASURESCHOOL LINKS

GTM Resource Guide: https://measureschool.com/guide
Free GTM Beginner course: https://measureschool.com/emailcourse
Courses: https://measureschool.com/products

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

Ever wonder what’s going on in your browser or when your page loads, a tracking code fires, or your site just loads and loads and loads? Then it’s time to look under the hood and examine the inner workings of your website. In this video, I’m gonna show you how you can use the Chrome Developer Tools as a marketer to understand your website better.

So I’m a big believer that marketers should become more technical, but where should they start? Well, I would say, understanding the subject of your marketing better, and this is, most of the times, the website. To make this learning experience more relevant, you should look at your own website, and understand what the marketing inner workings are. That’s why I think the Chrome Developer Tools is a great toolset to get started understanding the more technical bits of your marketing that every marketer should really know. So let’s take a look at the Chrome Developer Tools and how you can use them as a marketer. We’ve got lots to cover, so let’s dive in. All right, today, our journey starts in our demo shop, where we’re gonna take a closer look at the Developer Tools of Google Chrome. Now, the Developer Tools are a built-in feature of Google Chrome, but other browsers have such developer tools as well, or you might need to install a plug-in, such as Firebug, for the Firefox browser.

But in this video, we’re gonna specifically talk about the Developer Tools. How can you reach them? Well, if you go into your View settings, under Developer, you’ll find here Developer Tools. There’s also a shortcut that you might able to use in order to get there faster. You will be greeted with another panel here that lays over your website, and has different tabs up here. Now, we won’t go through all the different functionality, because it goes really in-depth, but as marketers, we should be aware of some of these functionalities. So let’s get started. First up, here we are in the Elements overview. Now, the Elements overview gives you a representation of the current HTML. This is different to what you see when you go to View Page Source, because this is the initial HTML file that is downloaded from the server. This is the current HTML file, as it is represented on this page right now. This might differ because of the scripts, and might download and manipulate the page in one or the other way.

So, if you wanna find the current state, you can look at this Element overview here. And, as you might already saw, when I go over one or the other line here, there are some markers that come up in the website. This is actually pretty useful, if you want to find out where in the HTML markup a certain element is placed. You can go through the Elements pane directly, and try to find out when it highlights it. The other way to do it is to right-click, and click on inspect element. So it will jump right into it.

Or there is a selector tool right here that lets you jump right to the element that you are currently pointing at. Now, how can this be useful? As you might know, HTML and the CSS code that you see right here are represented in the browser, and if you wanted to change any of the content or the appearance of this website, you would need to do this in your HTML or CSS. Now, it’s very cumbersome to go back and forth between your text editor to edit your HTML pages, then reload this page and see what the changes have resulted in, so with the Elements pane, you can easily find the element that you wanna edit, make your edits directly in this Elements pane, and then it will be represented here, and you would know what to change in your text editor or in your CMS at this stage. You can also use this, obviously, to communicate it to a developer more clearly than just telling him, hey, change the text here and there. The other panel that we can change here is, the other panel represents the CSS.

And the CSS is the markup that governs how a website is laid out, and the style elements of this particular HTML element. So, for example, here, you can change the color of certain elements, certain CSS rules on and off, or even change them. Now, I use this pane very often once I want to identify a given element and see how it is marked up in the HTML itself, so, for example, if I wanted to build in any kind of tracking on this Contact button, I would like to see, how is it marked up?

This is a list element with the ID menu-item-244, which I can use in Google Tag Manager, for example, to identify it uniquely on our page. I also use this to communicate any kind of changes that I wanna have made to a developer, and be able to tell him exactly where I wanna have something changed. It is very powerful. The third use case would actually be for conversion rate optimization. So if I wanted to change an element in an A/B test, I would test it out beforehand in this overview panel.

Then I’ll know what to change in my A/B testing tools, such as Google Optimize. One other great piece of information is down here, the actual selector list, that gives me information on how I can select it via CSS, which can also be used in Google Tag Manager with the CSS Selector. The one button we haven’t talked about yet is this Toggle device toolbar, which actually puts your browser into a special state that lets you test the website on different screens, if it is responsive, and it also lets you choose different devices to see how your website looks like on this particular device.

There’s also a function to connect Google Chrome DevTools to a mobile device, but that’s not something I’m gonna get into right now. All right, let’s move on to the next panel, which is the JavaScript console. Now, the JavaScript console is a great tool, especially if you work with tracking. So, as you might have seen in my previous videos, I use this often to look up certain variables, such as the data layer, and see what the current state of this variable holds. Now, the JavaScript console is our direct access to the JavaScript runtime environment.

It can give us a lot of information, and we can even instruct our codes to log out certain information, in order to make it more visible. So, for example, on this browser, I have a tool installed called the GA Debugger, and once I activate it, it’s gonna reload the page. Let’s go out of our device mode here. And now, we have the JavaScript console filled with a lot of information, a lot of debug information, of our Google Analytics. And we can see what data was sent over, and what hit type, and so on, which lets me really easily identify any kind of problems, if there are any.

The other thing that the JavaScript console, it’s great for errors. So if I go, for example, to this error page, I can see up here, when we scroll up, that there was an uncaught reference error. There was something called that is not available. Now, if I wanted to see where this error occurred, there’s a link right here that I can click, and I go over to the Sources panel.

Now, the Sources panel is a panel where you see all the different files that were downloaded during the load process of your website. And you can open certain files and read them, and read their markup, to identify any errors. For example, right here, we see this is where the error originated, and I could change that in my markup. Apparently, a variable was called that is undefined. Now, there are many different other JavaScript functionalities to debug this. So you can set break points, for example, but I won’t get into this right now. For you, it might just be important to look at your console and see if there are any errors that are occurring and how they originate.

All right, let’s move on to the Network tab. Now, once we reload this page, we see up here that there’s a timeline that develops, and we can mark with