Wednesday, February 5
Google Tag Manager

How To Install Google Tag Manager on WIX website

Updated: September 4th, 2020. I’m not going to dive into discussions about whether WIX is a good platform for creating a website, it has its pros and cons. For example, it enables people to easily create a website but at the same time, WIX is not the best tool in terms of SEO friendliness. Additionally, one of the most annoying things was that WIX did not support Google Tag Manager. From time to time I noticed threads on forums, Reddit, and elsewhere where people were trying to find the answer. No luck. Even though WIX supported Custom HTML widgets, they did not work with the GTM code inside of it. Luckily, those dark times are over because WIX recently released built-in support for GTM. Hooray! Today, I’ll show you how to easily install Google Tag Manager on the WIX website.     Quick Con...
Google Tag Manager

Google Analytics Limits: 10M hits & 500 hits/session. What to do?

If you are reading this blog post, there are two possible reasons for that: you stumbled upon it by following your curiosity or you have recently hit certain limits in Google Analytics (or maybe you are about to hit them). Anyway, here’s a situation. One day, when you are about to make a coffee, you get this warning from Google Analytics (the wording might change eventually): “Your data volume (XXX hits) exceeds the limit of 10M hits per month as outlined in our Terms of Service. If you continue to exceed the limit, we will stop processing new data on XXX.” What to do? You can start panicking but, eventually, you’ll need to take care of this. Just like pretty much any tool, Google Analytics has also some limits. But when you think about the fact that you are using the free version, 10 ...
Google Tag Manager

Introduction to Google Tag Manager Server-side Tagging

In 2020, Google Tag Manager introduced a new level of possibilities – server-side tagging. Even though there were already other tag management solutions that offered this, GTM joined this server-side game just very recently. When the public beta was launched on August 12, 2020, the audience split into several groups. Some people were cheering and shouting “THIS IS HUUUUGE” while others were a little confused asking “I not sure I understand this. Is it good for marketers?”. And this is totally understandable. The topic is not an easy one to grasp. Especially, if you are coming from a non-technical background. That’s why the goal of this blog post is not to give you the “ultimate definitive” guide into how to work with Google Tag Manager server-side tagging. Instead, I wanted to provide an i...
Google Tag Manager

Google Tag Manager and Multiple Domains: How to Configure?

So, you have probably landed on this article because you are working with multiple domains (e.g. domain1.com and domain2.com) and have some doubts on how to handle Google Tag Manager. Should you use one GTM container on all domains? Or should you use one container per domain? In this guide, I’ll show you how to handle Google Tag Manager on multiple domains. These tips apply to subdomains too.   Google Tag Manager does not care about domains or subdomains As the subtitle of this chapter has already spoiled, GTM container does not care about how many domains you use it on. If you want, you can use the same container on 5 related websites (that are hosted on different domains or subdomains). Even though (most likely) this will cause you some headaches, there are no technical limitations. Wh...
Google Tag Manager

How and Where To Get Google Tag Manager Help?

Updated: August 3rd, 2020. (Although Simo Ahava has posted a blog post of this very same topic long before me, I feel like this needs to be addressed multiple times.) Stuck with Google Tag Manager? Relax, we’ve all been there. Not even once. Not even ten or twenty times. It’s not easy to master GTM and if you are determined to do that, many questions will definitely arise in the process. Luckily, there is a whole bunch of ways how you can get Google Tag Manager help and resolve your GTM issues. All options are listed in no particular order. Additionally, I’ll give you tips on how to be more cooperative and improve the process of getting a quicker GTM help. It’s a two-player game where both parties are equally responsible for solving issues. The Underrated Power of Google Search First,...
Google Tag Manager

How to Reduce Direct Traffic in Google Analytics

Direct traffic in Google Analytics is often misunderstood. If you think that direct traffic is the one that enters your website’s address in the address bar or accesses it via bookmarks, I have some bad news. In reality, that is just a fraction of what direct traffic really is. The first reason for this confusion lies in the name itself. Direct. Is it really direct? In Google Analytics, direct traffic really means “I don’t know where that visitor came from”. It might be from the address bar, from bookmarks of your browser, from email, from chat/messengers, etc. It should be called “unknown” instead. But this rant is for another time. There are many reasons that affect this type of traffic and I wanted to address the ways how to reduce direct traffic in Google Analytics. Also, in the seco...
Web Tricks

8 Design Tips That Increased My Ecommerce Conversions By 42% 

When it comes to increasing sales for your ecommerce store, there are 3 levers you can pull: You can increase your average order value; You can increase the amount of traffic to your site; You can increase your conversion rate. While all of the above are important, the cheapest, most effective way to grow your sales is by improving your conversion rate. For most online stores, low conversion rates are typically the result of a poor design or a bad user experience. Your visitors may not resonate with the look and feel of your website or they may have problems finding the information they need in order to make a purchase. In this post, I will walk you through the exact steps I took to increase my desktop conversion rate by 46% and my mobile conversion rate by 39% with my last site redesign....
Google Tag Manager

Extract a Price from a Page with Google Tag Manager

While DOM scraping is not recommended (because it’s quite fragile) in web tracking, sometimes you just have no other choice. Asking a developer to push a certain data point to the Data Layer is always the best practice but in some projects, you have just two options: try to fetch a certain value from the page by yourself or do nothing and continue without that particular data point In this blog post, I wanted to show you several little scripts that will help you fetch a price if it is a visible element on a page. This is not designed to fetch all of the prices on a page and build complex-ish objects, etc. Let’s take a step back. This blog post is for those situations where you want to work only with one price. Where can it be useful? Maybe you want to track an impression of a...
Google Tag Manager

Two Recent Changes in Google Tag Manager Debug Console

I wasn’t planning this post but several people have contacted me regarding several recent changes in Google Tag Manager. They were seeing different things (compared to my course videos or the screenshots of my blog posts) and were thinking that they have configured something incorrectly. That’s why I wanted to quickly address those issues. #1. Pageview event is now renamed to the Container Loaded event For many years, the first default event that you see in the GTM preview mode was Pageview. This is the earliest moment when the tags can fire on-page. This is the moment when Google Tag Manager container loads. And that’s exactly why this event is now renamed to the Container Loaded. It’s more precise. Also, all three default events now have little tooltips that explain what do they mea...
CSS Tricks, React

FLIP Animations in React

With a very recent Safari update, Web Animations API (WAAPI) is now supported without a flag in all modern browsers (except IE).  Here’s a handy Pen where you can check which features your browser supports. The WAAPI is a nice way to do animation (that needs to be done in JavaScript) because it’s native — meaning it requires no additional libraries to work. If you’re completely new to WAAPI, here’s a very good introduction by Dan Wilson. One of the most efficient approaches to animation is FLIP. FLIP requires a bit of JavaScript to do its thing. Let’s take a look at the intersection of using the WAAPI, FLIP, and integrating all that into React. But we’ll start without React first, then get to that. FLIP and WAAPI FLIP animations are made much easier by the WAAPI! Quick refresher on FLIP...
Apps, CMS, Web Tricks

Best CMS for 2020

Content Management Systems are arguably the internet’s most powerful web development tool. In a rapidly growing market where every business under the sun requires a website that is not only fully functioning, but optimised, easy to update regularly, and implement the latest features, the right CMS is important. As a web developer it can be easy to stick to the CMS you know – even if there are potentially better ones out there. With such a busy schedule, websites to be made, and money to be earned, the desire to find something new is quite frankly near the bottom of the pile. That’s is why we have worked to put together a list of some the most new and notable (or older but still just as worthy) CMS systems for 2020. After all, with a new year, why not learn a new CMS too? 1. Craft Craft ...
React

React Integration Testing: Greater Coverage, Fewer Tests

Integration tests are a natural fit for interactive websites, like ones you might build with React. They validate how a user interacts with your app without the overhead of end-to-end testing. This article follows an exercise that starts with a simple website, validates behavior with unit and integration tests, and demonstrates how integration testing delivers greater value from fewer lines of code. The content assumes a familiarity with React and testing in JavaScript. Experience with Jest and React Testing Library is helpful but not required. There are three types of tests: Unit tests verify one piece of code in isolation. They are easy to write, but can miss the big picture. End-to-end tests (E2E) use an automation framework — such as Cypress or Selenium — to interact with your s...
React

Using Formik to Handle Forms in React

There is no doubt that web forms play an integral role in our web site or applications. By default, they provide a useful set of elements and features — from legends and fieldsets to native validation and states — but they only get us so far when we start to consider the peculiarities of using them. For example, how can we manipulate the state of a form? How about different forms of validation? Even hooking a form up to post submissions is a daunting effort at times. Component-driven front-end libraries, like React, can ease the task of wiring web forms but can also get verbose and redundant. That’s why I want to introduce you to Formik, a small library that solves the three most annoying parts of writing forms in React: State manipulation Form validation (and error messages) Form ...
CSS Tricks, Javascript, Web Tricks

Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS

We have big JavaScript frameworks that tons of people already use and like, including React, Vue, Angular, and Svelte. Do we need another JavaScript library? Let’s take a look at Alpine.js and you can decide for yourself. Alpine.js is for developers who aren’t looking to build a single page application (SPA). It’s lightweight (~7kB gzipped) and designed to write markup-driven client-side JavaScript.   The syntax is borrowed from Vue and Angular directive. That means it will feel familiar if you’ve worked with those before. But, again, Alpine.js is not designed to build SPAs, but rather enhance your templates with a little bit of JavaScript. For example, here’s an Alpine.js demo of an interactive “alert” component. CodePen Embed Fallback The alert message is two-way bound to the input using...
Google Tag Manager DataLayer Explained
Google Tag Manager

Google Tag Manager DataLayer Explained

The Data layer is one of the key concepts in the world of Google Tag Manager. It ensures maximum flexibility, portability, and ease of implementation. Remember, GTM works best when deployed alongside the data layer (in fact, broken data layer = severely crippled GTM). At first, Google Tag Manager Data Layer might seem like one of those mysterious concepts that no one really understands (by saying “no one” I mean non-developers). But if you stay focused, it’s a concept that’s definitely possible to grasp on. Understanding and leveraging the data layer is the key to unlocking GTM’s potential so be attentive. Of course, it takes a while to understand how everything works, but once you get the idea, you’ll start putting puzzle pieces together. It just requires some time. The purpose of this ...