Web Tricks

Reactivity In Vue

In this article, we’re going to look at reactivity in Vue, how it works, and how we can create reactive variables using newly created methods and functions. This article is targeted at developers who have a good understanding of how Vue 2.x works and are looking to get familiar with the new Vue 3.We’re going to build a simple application to better understand this topic. The code for this app can be found on GitHub.By default, JavaScript isn’t reactive. This means that if we create the variable boy and reference it in part A of our application, then proceed to modify boy in part B, part A will not update with the new value of boy. let framework = 'Vue'; let sentence = `${framework} is awesome`; console.log(sentence) // logs "Vue is awesome" framework = 'React'; console.log(sentence) //...
How to Exclude Internal Traffic in Google Analytics 4
Google Tag Manager

How to Exclude Internal Traffic in Google Analytics 4

When you implement Google Analytics 4, you are tracking your own interactions/events as well. That’s the default. That becomes even a larger problem when you’re working with a larger business (having more employees). Every visit/event made by an employee skews your data. Luckily, this can be fixed because you can exclude internal traffic in Google Analytics 4.But there are several catches here. If you exclude yourself, you won’t be able to see your events in the DebugView (while testing with GTM). At least that’s what I noticed while debugging. This is inconvenient.And if you have to exclude multiple people, relying on the IP address might not be the best option. In this blog post, I wanted to show you how to exclude internal traffic in Google Analytics 4 and also tackle the aforementi...
Cross-domain tracking in Google Analytics 4
Google Tag Manager

Cross-domain tracking in Google Analytics 4

Note: If you are looking for a Cross-domain tracking guide for Universal Analytics, read this guide instead.If you are familiar with cross-domain tracking in UA, you probably know that most of the configuration is done either on the code level (e.g. in gtag.js) or in GTM (GA tags). Because of that, many marketers and web analysts were confused about what to do where. Luckily, in Google Analytics 4, things have been greatly simplified.In this guide, I will show how to configure cross-domain tracking in Google Analytics 4. First, we’ll start with the problem that cross-domain tracking solves and then we will go to the actual configuration. Table of contentsThe problem of multiple domains What is cross-domain tracking in Google Analytics 4? How does cross-domain tracking work in G...
Custom metrics in Google Analytics 4
Google Tag Manager

Custom metrics in Google Analytics 4

If you have tried to configure Google Analytics 4, you should already be familiar with custom dimensions. Basically, any custom text parameter that you send to GA4 (and that you want to use in the reports), should be registered as a custom dimension.But you can also customize your setup by sending custom metrics. What are they and how can you configure them?In this blog post, I’ll share the steps on how to configure custom metrics in Google Analytics 4.First, let’s start with some theory, and then we’ll dive into the practical stuff. Table of contentsWhat are dimensions in Google Analytics? What are metrics in Google Analytics? A number can also be a dimension Examples of Custom Metrics How to configure custom metrics in GA4?#1. Update the GA4 event tag #2. Test the...
Scroll tracking with Google Analytics 4 and Google Tag Manager
Google Tag Manager

Scroll tracking with Google Analytics 4 and Google Tag Manager

Compared to Universal Analytics, Google Analytics 4 offers more built-in tracking capabilities. This includes file downloads, outbound clicks, scroll tracking, and more. But did you know that the built-in scroll tracking in Google Analytics 4 tracks only when someone scrolls below the 90% percent mark of the page height? What if you want to track other thresholds as well (e.g. 25%, 50%, 75%)? Maybe in the future, that will also become built-in, but as of the moment of writing this blog post, it’s either 90% or nothing. In this blog post, I wanted to show you how to implement scroll tracking with Google Analytics 4 and Google Tag Manager. There are two possible approaches here and I’ll explain them both. Also, I’ll show several examples of the Analysis Hub report where you can see your scro...
Google Tag Manager

“Pages per Session” Conversion in Google Analytics 4

In Universal Analytics, conversions were called “goals” and there were several types of them that you could create: destination-based goal, event-based goal, session-duration-based, and a goal that counted based on the number of pages per session.When Google Analytics 4 was introduced, it was still pretty simple to recreate destination-based and event-based goals/conversions. But about the other two types?Currently, conversions based on session duration (e.g. if a session is longer than 5 minutes, that’s a conversion) would still require some additional code (or input from developers), thus it’s quite challenging (I’ve added this idea to my backlog of ideas for blog posts).But if you want to track conversion if a visitor views 3 or more pages per session, that is completely possible ...
How to Use Exploration Reports in Google Analytics 4
Google Tag Manager

How to Use Exploration Reports in Google Analytics 4

Compared to Universal Analytics, Google Analytics is missing a lot of predefined reports that we are familiar with (e.g. landing page, site search, etc.). I don’t know if this will change in the future, but I hope so!In the meantime, we got a pretty powerful suite of reporting capabilities called Analysis Hub. It’s the place where you can do ad-hoc analysis and dig deeper into your data. In today’s blog post, I wanted to focus on one particular part of it, Exploration Reports in Google Analytics 4. Table of contentsMain componentsVariablesSegments Dimensions and metricsTab settingsSegment comparisons Rows Columns Values FiltersThe Output (report)Examples of Exploration reports Landing pages report Order coupon code report Additional things ...
Javascript, Web Tricks

How to disable the mobile keyboard from displaying on click of the input field

Have you ever needed a way to disable the mobile screen keyboard from displaying for a specific input field?I was recently working on a Shopify website where there was a filter on the products listing page. I found an issue that on click of that filter it was opening keyword on the mobile screen. I debugged and found that it's a bootstrap filter and creating an input box automatically at run time.The solution to this was rather simple and I’d like to share it here for anyone else who is looking for a solution to this problem.To block the mobile device keyboard from displaying you simply need to set the field to readonly with jQuery as displayed in the code below.// Using ID field$('#input_id').attr('readonly','readonly');// Using class name$('.input_class').attr('reado...
Google Tag Manager

Enhanced Measurement in Google Analytics 4: The Guide

When installed on a website (without any additional configurations), Universal Analytics (a.k.a. GA3) was tracking just page views. If you want to see any other interactions in your reports, you’d have to implement additional event tracking. To improve that, Google Analytics 4 offers more out-of-the-box interactions that are tracked without the need to change the website’s code or configure a GTM container. That suite of auto-tracking features is called Enhanced Measurement. Of course, you will still need to implement a bunch of recommended or custom events to get the most out of GA, but the enhanced measurement is a welcome addition for those who are just looking for very basics. However, there are some nuances as well (that I’ll also talk about). Table of Contents + Hide table of co...
CSS Tricks

How to Make GraphQL and DynamoDB Play Nicely Together

Serverless, GraphQL, and DynamoDB are a powerful combination for building websites. The first two are well-loved, but DynamoDB is often misunderstood or actively avoided. It’s often dismissed by folks who consider it only worth the effort “at scale.”That was my assumption, too, and I tried to stick with a SQL database for my serverless apps. But after learning and using DynamoDB, I see the benefits of it for projects of any scale.To show you what I mean, let’s build an API from start to finish — without any heavy Object Relational Mapper (ORM) or GraphQL framework to hide what is really going on. Maybe when we’re done you might consider giving DynamoDB a second look. I think it is worth the effort. The main objections to DynamoDB and GraphQL The main objection to DynamoDB is that it is...
Web Tricks

Integrating A Dialogflow Agent Into A React Application

Dialogflow is a platform that simplifies the process of creating and designing a natural language processing conversational chat assistant which can process voice or text input when being used either from the Dialogflow console or from an integrated web application.Although the integrated Dialogflow Agent is briefly explained in this article, it is expected that you have an understanding of Node.js and Dialogflow. If you are learning about Dialogflow for the first time, this article gives a clear explanation of what Dialogflow is and its concepts.This article is a guide on how a built a Dialogflow agent with voice and chat support that can be integrated into a web application with the help of an Express.js back-end application as a link between a React.js Web application and the Agent ...
CSS Tricks

How to Add Commas Between a List of Items Dynamically with CSS

Imagine you have a list of items. Say, fruit: Banana, Apple, Orange, Pear, Nectarine. We could put those commas (,) in the HTML, but let’s look at how we could do that in CSS instead, giving us an extra level of control. We’ll make sure that last item doesn’t have a comma while we’re at it.I needed this for a real project recently, and part of the requirements were that any of the items in the list could be hidden/revealed via JavaScript. The commas needed to work correctly no matter which items were currently shown.One solution I found rather elegant solution is using general sibling combinator. We’ll get to that in a minute. Let’s start with some example HTML. Say you start out with a list of fruits: <ul class="fruits"> <li class="fruit on">Banana</li> <li cl...
Google Tag Manager

Track Clicks with Google Analytics 4 and GTM

If you are just starting to get a grip on Google Tag Manager, click tracking is probably one of the most demanded things you want to implement. There are many clickable elements on your website and you want to understand how website visitors are interacting with them.In this blog post, we will take a look at how to track clicks with Google Analytics 4 and Google Tag Manager.First, we will look at some automatic click-tracking capabilities in GA4, and then we will extend the list of tracked events with help of GTM.By the way, if you are completely new (or just starting) with Google Analytics 4, download my free e-book below.Ready? Let’s get started. Table of contents + Hide table of contents +Why track clicks? Automatic click tracking in GA4 (Enhanced Measurement) Track...
A Guide to DebugView in Google Analytics 4
Google Tag Manager

A Guide to DebugView in Google Analytics 4

When you implement something in Google Analytics (or any other platform), never trust your gut. Always verify that the data was actually received by the platform and is displayed in reports the way you expect it.In Universal Analytics, this was done by checking real-time reports (to verify events, conversions, page views). But if you wanted to debug things like Enhanced Ecommerce, you had to wait until the data lands in the standard reports. This means hours of delay between the configuration and the actual debugging.Luckily, that has changed in GA4 with a new feature called DebugView (I mean, it’s new if we compare to Universal Analytics). DebugView in Google Analytics 4 allows checking the incoming data at a more granular level (without the need to wait for hours).Table of Conte...
Recommended Events in Google Analytics 4
Google Tag Manager

Recommended Events in Google Analytics 4

There’s a lot to cover when it comes to event tracking in GA4. But since the platform is now event-based, it’s natural that I have a bunch of guides related just to events. In this quick guide, we’ll take a closer look at one group of events, recommended events. The list of recommended events (in alphabetical order) I presume that some of the visitors of this blog post are just looking for the full list of all recommended events in Google Analytics 4. If you’re one of them, then here it is. I have combined all lists from Google’s documentation into a single list. But if you want to learn the full picture of the recommended events, then jump to the next chapter and read/watch with great attention.add_payment_info (when a user submits their payment information).Parameters: coupon, curre...