Forem: Anna

What Is the Data Layer and Why Do You Need It?

Anna — Fri, 30 Dec 2022 17:19:09 +0000

Understanding the layered architecture of websites and apps

If you work in digital marketing, you may have heard the term 'data layer' being thrown around a lot by the technical personnel. But what exactly is a data layer and why is it so important? We can think of the data layer as a part of a multi-layered structure that makes up many websites and apps. When it comes to online properties you are using for lead generation and e-commerce, there are usually three layers:

1. The Presentation Layer
This is the layer that the user sees and interacts directly with. It's where the user interface is and is developed using frontend technologies such as HTML and CSS.

2. The Application Layer
This concerns the logic, data exchange, and functionalities of the site or app, especially with respect to third-party tools satisfying your business needs. This is the layer where analytics software (e.g. Mixpanel) or marketing vendors (e.g. Google Ads) are connected to your site.

3. The Data Layer
The data layer is a JavaScript object that can be added to a website to provide a standardized way for data collection throughout a user's journey. A website utilizing such a feature should have all the data readily available in the website's code so that when a user proceeds with a certain action for which data is relevant, that piece of data will be pushed to the data layer object. For example, if you have an e-commerce store, the data layer may contain the prices and IDs for products in the shop. If a user selects a certain product, the price and ID of the product selected would be exposed in the data layer.

Not all websites or applications resemble a multi-layered cake, and not every site requires a data layer. But web analytics are important for enterprises with some kind of a measurable objective. The data layer is therefore generally crucial to have in such cases and is useful in tandem with a tag management solution such as Google Tag Manager.

Alright, so you just want to see a data layer? Go to any e-commerce site, and open the console in your developer tools. I'm using a Mac, so I can use the shortcut command+option+j to get it to pop up. Alternatively, you can right-click, click 'inspect', then click the 'console' tab. In my case, I'm going to go to lego.com (because Legos are fun!). When I open the browser console, I can type 'dataLayer' (this is case sensitive!)...and voila! Do you see that JavaScript object?

Now, let's try to do something as someone who is pretending (or not pretending!) to eventually make a purchase. Add a product to the cart, then view your shopping cart. Check the data layer again by typing 'dataLayer' in the console.

As you can see, data from your add-to-cart action is now being expressed in the data layer. We can see, for example that I'm on the "shopping_cart" page, that I'm in the "US" region, I'm not logged in, and that the items in my cart total $729.98. You can also apparently see that I do not meet the Lego definition of a 'vip', whatever that is. 😭🤣

Why is it important that you are able to use the data layer to see data? Well, if you're running an e-commerce business, you might want to capture all that data for your strategic analyses as well as to enable your marketing platforms to optimize on such data.

Now that you know what the data layer is, we can begin discussing how we can work with it to achieve our enterprise goals - all to be covered in other posts.

This post was originally published by Analytics Institute on Hashnode on Nov 26 2022.

How to Set Up Google Tag Manager (GTM) on Your Website Quickly

Anna — Sun, 25 Dec 2022 23:55:02 +0000

First - What on earth is Google Tag Manager? Google Tag Manager (GTM) is a tag management system. A 'tag', in this context, is essentially a relatively small fragment of code. Google Tag Manager allows us to easily add, update, and determine how these fragments of code are used in the measurement of user behavior on a website or app. Measuring user behavior is central to digital marketing for A/B testing, campaign data analysis, conversion tracking, and more. Many tags are built into GTM, allowing non-technical people to make many tracking implementations without the help of a developer. For more complex implementations, custom HTML and JavaScript can be used in GTM.

Here's how to install GTM on your website.

1. Create a GTM account
Before you set up Google Tag Manager (GTM) on your website, you need to make sure you have an account, so go to tagmanager.google.com create one there.

2. Set up a web container
When you’re done, you’ll also need to create a new GTM “container” where all the tags for your site are kept or contained, as the name suggests. In the case of setting GTM up for your website, you’ll want to select “Web” as your target platform. In the menu, you will see other target platform options such as iOS, Android, AMP, and Server, which we will cover in other blog posts.

3. Find the GTM installation snippets and copy
Once you have the container set up, make sure you are on the “Workspace” tab on the upper-left hand side of your GTM interface. When you’re there, you will be able to see a container ID on the right-hand side of the interface in the form of a link, pre-fixed with “GTM-“.

Click that link, and a modal titled “Install Google Tag Manager” will pop up with further instructions on your next steps.

Start with the first snippet: highlight and copy it into your clipboard, or simply click the copy icon on the top right.

4. Paste the snippets into your website’s base code
Depending on how you have your website set up, the process of pasting the GTM installation snippets may vary somewhat. If you are working only with hard code, and not using a popular content management system like WordPress, for example, you’ll have to find the relevant files in your website code and insert the snippets in the right locations. As indicated in the GTM documentation, simply paste the code snippets in their respective places in the head and body of your code.

Okay, that makes sense – you might be thinking – but my website is powered by Wordpress. Now what?

Install Google Tag Manager on your WordPress Website
Finding the head and body of your website may not be so straightforward to everyone working with WordPress. Luckily, there is a WordPress plugin that you can install called 'Insert Headers and Footers by WPBeginner'. So, go to your WordPress sidebar, click Plugins and search for this plugin. Next, install it!

Now that it’s installed, go to Settings, then click Insert Headers and Footers. Voila! This is where you will have to paste your GTM installation snippets. After pasting them, remember to save them.

If you are using a platform other than WordPress, the process is the same. Find a way on that platform to be able to insert the GTM installation snippets into the header and body.

Checking Your Setup
Now, how can you quickly verify that you now have GTM set up on your website? One way is to check that your first tag fires. But even before doing this, you could download a Chrome extension called Google Tag Assistant (Legacy). Go to your website, enable Google Tag Assistant, then refresh your page. If GTM is properly set up, you’ll see it next to the green tag icon like below – congrats!

This post was originally published by Analytics Institute on Hashnode on Nov 25 2022.

Why and How to Start Using Xcode to Build Your React Native iOS Apps ASAP

Anna — Thu, 22 Oct 2020 05:31:58 +0000

Many of us involved in mobile application development with React Native have been used to working on Expo. This makes complete sense since the React Native documentation itself has indicated that it is the easiest way to get started.

That said, if you are interested in eventually publishing your app on the App store, you might want to start getting used to working with Xcode. That’s because starting April 2021, all iOS and iPadOS apps submitted to the App Store will be required to be built using Xcode 12.

So, let’s get started. If you don’t already have Node and Watchman installed, you should get them via Homebrew using the following terminal commands:

brew install node brew install watchman

While you probably have these as a React Native developer, it is a good idea to at least install Node 10 or later.

Of course, you’ll need to install Xcode. You can just download it from the app store here. Next, you’ll need CocoaPods, which manages library dependencies for your projects when using Xcode. So, install using:

sudo gem install cocoapods

Now we’re ready – are you exiting to get started on your new app? To start a new project, navigate to where you would like to save it, then in your terminal type,

npx react-native init <the name of your new project>

Your project will have starter boilerplate code, which you will be able to see once you open it in your code editor. To run your project and view it in a mobile device simulator, simply type,

npx react-native start npx react-native run-ios

Now you are ready to start programming and to see your work on the simulator. Happy coding!