DEV Community: Jean-Rémy Duboc

How to use GTM in a Vue 3 TypeScript Single Page Application Part 2 - Managing Events in the dataLayer

Jean-Rémy Duboc — Mon, 22 May 2023 08:07:10 +0000

In the previous article, I showed you the basic configuration for GTM in a Vue.JS application.
Now let's see how vue-gtm updates the datalayer on every page load. After that, we'll add a title for each page, using the Vue.JS router.
We will also see how to register any type of event in the dataLayer with vue-gtm.

You can refer to the following GitHub project to get all the source code: https://github.com/JeanRemyDuboc/vue-gtm/tree/Part-2.

How vue-GTM Triggers a `pageview` Event with Vue.js router

When we initialized our application in main.ts, we added the router to our configuration:

app.use(router)

We then configured the application with a new instance of vue-gtm:

app.use(
  createGtm({
    id: "GTM-xxxx",
    vueRouter: router
  })
)

Once this configuration is added, vue-gtm will update the dataLayer with a new event every time a new page is showed in the browser. But how does it work ?

Let's look in the @gtm-support/core module, which is the first building block for vue-gtm. In the file /src /gtm-support.ts, a function called trackView() is used to track page views. It has two parameters: page name (screenName) and path (path).
Later in the function, we retrieve the dataLayer object from context window:

const dataLayer: DataLayerObject[] = (window.dataLayer =
        window.dataLayer ?? []);

Then we trigger the dataLayer.push function with the necessary parameters:

  dataLayer.push({
    ...additionalEventData,
    event: this.options.trackViewEventProperty ?? 'content-view',
    'content-name': path,
    'content-view-name': screenName,
  });

trackView() is triggered in @gtm-support/vue-gtm/index.js, in the afterEach() method of the router. For more information on the afterEach() function, see the Vue.js router documentation.
Note the addition of additionalEventData, which we can use to add custom properties in each route (documentation here: https://github.com/gtm-support/vue-gtm#sync-gtm-with-your-router) .

It's as if we were writing the following code manually, each time a Vue.js "route" is triggered:

dataLayer.push({
    event: 'content-view',
    content-name: <chemin de la route (path)>,
    content-view-name: <nom de la route>
})

Note that the name of the event added to the datalayer is "content-view" by default. It can be changed in our configuration with the trackViewEventProperty parameter, for example:

app.use(
  createGtm({
    id: "GTM-T3BRZPM",
    vueRouter: router,
    trackViewEventProperty: 'page-load'
  })
)

With this new configuration, when we navigate to the /about page the triggered code will be equivalent to:

dataLayer.push({
    event: 'page-load',
    content-name: "/about",
    content-view-name: "About"
})

Updating Page Titles with the Vue.JS Router

While navigating in the Vue application, note that the <title> tag does not change when changing pages. This tag is hard coded in index.html. Without a distinct title, it will be difficult to identify each page on Google Analytics, and for the user it is better to have an explicit title for each page.
So let's modify the content of this tag dynamically, using the router of our application. The goal is to use the "name" value for each route, and put that value in <title> on every page change.

For this, we use the beforeEach method of the router. As the name suggests, this function fires before each route loads. Once triggered, we can set up a new value for <title> with the name property of the route that was just loaded.
To do all this, add the code below in main.ts:

router.beforeEach((to, from, next) => {
  // Get the page title from the route's 'name' attribute (if it exists)
  if(typeof to.name === "string"){
    const title = to.name
    // If the route has a title, set it as the page title of the document/page
    if (title) {
      document.title =  title
    }
  }
  // Continue resolving the route
  next()
})

Aaand voilà! Our page navigation is complete.

Adding a Custom Event in the DataLayer

If we add other interactions in the application, we will have to trace them manually.
Let's imagine that our application allows users to register. Once you have registered, you can trigger the login event, which is one of the recommended events in GA4.

For that, nothing could be simpler: let's use useGtm and its trackEvent method (similar to trackView):

import { useGtm } from '@gtm-support/vue-gtm';

const gtm = useGtm()
//Example of login event trigger...this should be inside a function that runs after the login
gtm.trackEvent({
  event: 'login'
})

You can use this trigger on your page views or elsewhere in the app as needed. See my example here: https://github.com/JeanRemyDuboc/vue-gtm/blob/Part-2/src/views/AboutView.vue.

And there you go! You can now track all your events with Vue.js and Google Tag Manager. Now, all you have to do is configure Google Analytics in Google Tag Manager, and add a GDPR banner.

Utiliser GTM dans une application à page unique en Vue 3 et TypeScript, Partie 1 - configuration de base

Jean-Rémy Duboc — Thu, 02 Mar 2023 10:44:09 +0000

Dans cette série, je vais vous montrer comment démarrer rapidement la configuration de analytics avec Google Tag Manager lorsque vous créez une application à page unique (Single Page Application) avec Vue.js. Le but est traquer ce qui se passe dans votre application pour l'améliorer au fil du temps, en utilisant le datalayer et Google Analytics.

Nous utiliserons TypeScript, mais il devrait être facile d'adapter tout cela en JavaScript.
Quand nous aurons terminé, vous aurez une SPA entièrement intégrée à Google Tag Manager, utilisant le routage pour suivre les "vues de page", une bannière GDPR simple, et des événements personnalisés traqués dans Google Analytics via Google Tag Manager.
Le premier article de la série vous montrera comment créer une application Vue.js simple, puis installer et configurer Google Tag Manager dessus.

Créer une application simple avec Vue.js

Pour commencer, vous aurez besoin de votre arsenal JavaScript moderne standard:

Node
NPM ou Yarn
La ligne de commande

Vue dispose d'un excellent utilitaire en ligne de commande que vous pouvez utiliser pour créer rapidement la structure de votre projet. Pour l'installer, commencez par exécuter cette commande:

npm init vue@latest

Cela lancera votre nouvelle application.

Commencez par saisir le nom de votre projet, puis:

sélectionnez "yes" pour ajouter TypeScript,
choisissez si vous voulez le support JSX (pas essentiel pour ce tutoriel, mais vous pourriez en avoir besoin pour votre propre application),
sélectionnez "yes" pour ajouter Vue Router pour le développement d'applications à page unique (plus d'informations ci-dessous),
ajoutez Pinia pour la gestion de l'état (facultatif),
choisissez les autres options comme indiqué ci-dessous:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Si vous voulez créer un autre projet plus tard, exécutez npm create vue@3, et vous verrez les mêmes options pour votre prochaine application. Pour en savoir plus, consultez la documentation complète sur le site officiel de Vue.
Nous sommes maintenant prêts à installer GTM sur notre nouvelle application!

Configurer un nouveau conteneur Google Tag Manager

Ensuite, vous aurez besoin d'un conteneur GTM. Suivez les instructions de Google Tag Manager pour créer un nouveau conteneur, et notez l'ID de votre conteneur pour une utilisation ultérieure. Consultez cet excellent article de Julius Fedorovicius pour en savoir plus sur l'ID du conteneur GTM.

Installer et configurer Vue GTM

Nous avons maintenant une application SPA très simple. Naviguez avec la ligne de commande dans le dossier racine de votre application, et exécutez npm run dev pour voir le résultat dans votre navigateur.

La prochaine étape ? Installer Vue Google Tag Manager:

npm install @gtm-support/vue-gtm

Ce plugin prend en charge notre configuration GTM, y compris la création d'un datalayer. Il permet également le traquage des vues de pages virtuelles à l'aide du routeur Vue. Cela signifie que lorsque les utilisateurs naviguent dans l'application, GTM traite chaque route comme une page distincte et ajoute l'événement approprié au datalayer. Nous pouvons ensuite suivre comment les utilisateurs naviguent entre ces "pages", comme nous le ferions pour suivre des pages web traditionnelles.

Configuration

Il faut maintenant configurer notre application pour qu'elle envoie des données vers notre conteneur GTM.
Ouvrez main.ts, et modifiez le fichier comme ci-dessous:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createGtm } from '@gtm-support/vue-gtm';

import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(
  createGtm({
    id: "<Your GTM ID>",
    vueRouter: router
  })
)
app.mount('#app')

Les références à Pinia sont bien sûr facultatives.

Voici notre configuration la plus basique pour GTM sur une application Vue. Nous connectons notre application à une instance de createGtm avec deux options simples :

l'ID de GTM que nous avons mentionné ci-dessus. Cela connecte notre compte GTM à notre application.
une référence au routeur actuellement utilisé. Cela spécifie que nous utilisons le routeur de notre application pour suivre les vues de pages (vueRoute: router). Pour voir comment le routeur est configuré, ouvrez router/index.ts.

Il existe plusieurs autres options que nous explorerons dans les articles suivants.

Déboguer les balises GTM de votre application et le datalayer avec les bons outils

Confirmer que la balise GTM est installée

Nous devrions maintenant être en mesure de voir tout cela fonctionner sans problème sur votre application en utilisant le navigateur. Rechargez votre application ; si vous avez Tag Explorer installé sur Chrome, vous pouvez voir votre balise Google Tag Manager se déclencher sur votre application :

Vérifier le datalayer dans console Chrome

Maintenant, ouvrez la console de votre navigateur, tapez datalayer, et vous verrez que le datalayer est chargé sur votre page :

Vous pouvez voir tous les événements de chargement répertoriés là-bas: le début du processus de suivi de GTM, le chargement du DOM, la première vue de page (sous l'événement content-view). Si vous accédez à la page /about, un autre événement content-view est ajouté au datalayer. Cela nous montre que le router Vue est correctement connecté à notre configuration GTM et envoie des données au datalayer:

Dans le prochain article, nous apprendrons comment tracer d'autres types d'événements sur votre application à page unique (SPA), et comment utiliser GTM pour traquer l'utilisation de votre application dans Google Analytics.

How to use GTM in a Vue 3 TypeScript Single Page Application Part 1 - basic configuration

Jean-Rémy Duboc — Thu, 02 Mar 2023 10:41:46 +0000

In this series I'll show you how to kickstart your analytics configurations with Google Tag Manager when you create a Single Page Application using Vue.js. The goal is to track what's happening in your application to improve it over time, using the datalayer and Google Analytics.

We'll be using TypeScript, but it should be easy to retrofit most of it to JavaScript.
When we're done, you'll have a SPA fully integrated with Google Tag Manager, using routing to track "page views", a simple GDPR banner, and custom events tracked into Google Analytics via Google Tag Manager.
The first post of the series will show you how to create a simple Vue.js app, then install and configure Google Tag Manager on it.

Create a Vue application

To begin with, you'll need your standard modern JavaScript weaponry:

Node
NPM or Yarn
The command line

Vue has a great command line utility you can use to scaffold your project with minimal effort. To install this, start by running this command:

npm init vue@latest

It will kick-start your new application.

Start by entering your project name, then:

select "yes" to add TypeScript,
choose if you want JSX support (not essential for this tutorial, but you might want it for your own application),
select "yes" to add Vue Router for Single Page Application development (more about that below),
add Pinia for state management (optional),
choose the other options as shown below:



✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

If you want to create another project later, run npm create vue@3, and you'll see the same options for your next app. Check the full documentation on Vue's official site.
We're now ready to set up GTM on our newly created app!

Set up a new Google Tag Manager Container

Next, you'll need a GTM container. Follow the instructions in Google Tag Manager to create a new container, and keep track of your container ID for later use. Check out this excellent article from Julius Fedorovicius to learn more about the GTM container ID.

Install and configure Vue GTM

We now have a very simple SPA to work with. Navigate into your app's root folder and run npm run dev to see it in your browser.

The next step is to install Vue Google Tag Manager:

npm install @gtm-support/vue-gtm

This plugin takes care of our GTM configuration, including the creation of a datalayer. It also enables the tracking of virtual page views using the Vue router. This means that when users navigate in the application, GTM treats each route as a separate page, and adds the appropriate event to the datalayer. We can then track how users navigate between these routes, just like we would track regular web pages.

Configuration

Now we need to configure our application so that it sends data to our GTM container.
Open main.ts, and edit it to look like this:



import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createGtm } from '@gtm-support/vue-gtm';

import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(
  createGtm({
    id: "<Your GTM ID>",
    vueRouter: router
  })
)
app.mount('#app')

References to Pinia are, of course, optional.

This is our most basic configuration for GTM on a Vue application. We hook our app to an instance of createGtm with two simple options:

the GTM ID we mentioned above. This connects our GTM account to our app.
a reference to the router currently in use. This specifies that we're using our app's router to track page views (vueRoute: router). To see how the router is configured, open router/index.ts.

There are several other options; we'll explore them in later posts.

Using debugging tools to debug your app's GTM tagging and the datalayer

Confirm that the GTM tag is installed

We should now be able to see everything come together on your app from your browser.
Reload your application; if you have Tag Explorer installed on Chrome, you can see your Google Tag Manager tag firing on your application:

Check the data layer in the console

Now open your browser console, type datalayer , and you'll see that the data layer is loaded on your page:

You can see all loading events listed in there: the start of the GTM tracking process, the DOM load, the first page view (under event content-view). If you navigate to the /about page, another content-view event is added to the data layer. This shows us that the Vue router is connected properly with our GTM setup, and is sending data to the data layer:

In the next post, we'll learn how to track other type of events on your Single Page Application, and how to use GTM to track your app's usage in Google Analytics.

Comment lire la non-fiction comme un génie 📚️

Jean-Rémy Duboc — Thu, 05 Jan 2023 14:45:34 +0000

Pour devenir polymathe, vous devrez étudier dans plusieurs domaines. En pratique, cela signifie que vous allez lire énormément.
Commençons par les livres; les livres sont une source précieuse de connaissances depuis des siècles, et je ne crois pas que cela va changer de sitôt. La majorté des informations disponibles sont encore publiées dans des livres, et beaucoup d'entre elles ne sont pas encore disponibles en ligne.
Ensuite, il y a les ressources Web : blogs, magazines en ligne, newsletters, tutoriels, etc. Pas de limite quand il s'agit d'apprendre en ligne, mais peu de gens profitent vraiment de cette opportunité.
Voici comment vous pouvez mieux lire et tirer le meilleur parti de votre lecture.

Faire de la lecture une habitude

Si vous voulez apprendre beaucoup, la lecture ne devrait pas être quelque chose que vous faisiez à l'école. Cela devrait devenir une habitude, une partie intégrante de votre personnalité.
Oubliez le speed reading. Oubliez les défis de lecture annuels. Vous avez lu un livre chaque semaine l'année dernière? Tout le monde s'en moque. Contentez-vous de lire. Apprenez. Aussi souvent que vous le pouvez.

Voici un système simple qui vous fera lire plus chaque jour :

Prenez toujours un livre ou un article partout avec vous : sur votre téléphone ou votre tablette (utilisez l'application Kindle pour les livres et Pocket pour les articles), sous forme papier, etc.
Lisez dès que vous avez quelques minutes de libre. Notex vos progrès. Vous serez surpris par la quantité d'informations que vous parvenez à absorber au fil du temps.

C'est tout. N'oubliez pas: process over goals wins every time(en)

Le seul moyen de réellement gagner est de s'améliorer chaque jour. [...] Si vous voulez de meilleurs résultats, oubliez les objectifs. Concentrez-vous plutôt sur votre système.
James Clear.

Comprenez le contexte de ce que vous lisez. Ajustez votre pensée en conséquence.

Ne lisez pas un article scientifique complexe de la même manière que vous parcourez les nouvelles. Cela peut sembler évident, mais cela transformera la façon dont vous lisez tout.
Avant de lire quoi que ce soit, assurez-vous de vérifier quelques éléments clés:

Qui est l'auteur ? Vous aurez au moins une idée des deux B : Bio et Biais. Qui sont-ils ? Pourquoi écrivent-ils cela et quel est leur parcours ? Comment leur expérience personnelle affecte-t-elle leur écriture ? Comment votre biais personnel envers eux affecte-t-il votre lecture ? Cela semble s'appliquer uniquement aux articles personnels et aux domaines de l'humanité, mais même les sciences "dures" ont leurs biais. Être biaisé, c'est être humain.
Qui est l'éditeur ? L'éditeur est le facilitateur de l'auteur, sa plateforme. Ils apportent leurs propres compétences et biais au mélange. Un bon éditeur est crucial pour la qualité et le succès d'un livre. Apprenez à identifier les meilleurs éditeurs et sites web ou newsletters dans les domaines que vous apprenez. N'importe qui peut publier n'importe quoi en ligne, ce qui signifie que la qualité est très variable. Cela rend les éditeurs en ligne encore plus pertinents. Avant de lire une resource en ligne, posez-vous quelques questions. Votre article est-il publié dans sur un site bien connue, comme un journal établi ou une newsletter de technologie respectée ? Ou est-il simplement publié dans un blog sous le nom de l'auteur ? Gardez à l'esprit que, si parce qu'un article est publié sur un blog personnel, cela ne le rend pas forcément mauvais (j'espère que cet article en est la preuve). Cela signifie simplement qu'aucun tiers n'a revu l'article avant publication et que les biais de l'auteur ont pu être manqués.
Quelle est la date de publication ? Les livres plus anciens sont le produit de leur temps, et il est faut les comprendre dans leur contexte, et non de les juger en fonction des normes actuelles. Vous devez également tenir compte de l'information obsolète et mettre à jour vos connaissances en conséquence. Les ressources en ligne sont particulièrement sujettes à l'obsolescence, en particulier en ce qui concerne la technologie. Assurez-vous que les tutoriels que vous utilisez fonctionnent avec la dernière version du framework que vous utilisez.

Ce processus peut sembler assez fastidieux, mais en pratique, il ne prend que quelques instants et devient plus rapide avec la pratique. Et n'oubliez pas, pas de lecture rapide ici. De plus, les techniques que je décris dans la prochaine section vous montreront comment vous pouvez absorber un texte beaucoup plus rapidement et en profondeur.

Utilisez un maximum les table des matières, glossaires et index

Voici la clé d'une' lecture efficace : devenez un lecteur actif et exigeant, ne vous contentez pas de passivement absorber le texte de la première à la dernière page.
Commencez toujours par la table des matières. Utilisez-la pour comprendre la structure du texte, et choisissez les parties qui vous intéressent le plus. Posez des questions, prenez des notes et vérifiez comment le livre y répond. Avant de lire un article, parcourez-le rapidement, utilisez les titres et les paragraphes pour comprendre sa structure.
Ensuite, examinez l'index pour trouver les mots-clés que vous connaissez déjà ou cherchez des mots que vous n'avez jamais rencontrés, et laissez libre cours à votre curiosité.
Voici une chose que la plupart des gens, étonnamment, n'apprennent jamais à l'école : vous n'avez pas à lire quoi que ce soit dans un ordre spécifique. C'est votre livre, votre article, vous pouvez choisir et sélectionner les passages que vous voulez lire, dans l'ordre que vous voulez. Cela s'appelle la lecture active, une compétence criminellement négligée. Faites-en une habitude et vous aurez un pouvoir surhumain.
Avec le temps, cela vous permettra de parcourir rapidement les livres, en sautant directement aux parties qui sont pertinentes pour votre recherche actuelle et en laissant de côté le reste. Vous apprendrez où trouver l'information dont vous avez besoin plus tard si nécessaire.

Voici comment "consommer" de l'information. Dans les prochaines sections, nous verrons comment la "digérer", c'est-à-dire la mémoriser.

Apprenez les trois secrets pour mémoriser ce que vous lisez.

Beaucoup ont du mal à se souvenir de ce qu'ils lisent, c'est pourquoi ils abandonnent la lecture tout court après l'école. Et qui peut leur en vouloir ? Cela semble être une perte de temps. La bonne nouvelle, c'est que, avec la lecture active, décrite ci-dessus, vous mémorisez déjà beaucoup plus.

C'est le premier secret pour mémoriser ce que vous lisez : devenez un lecteur exigeant : continuez à poser des questions pendant que vous lisez et cherchez les réponses.

Le second secret fait également partie du processus de lecture active : reliez ce que vous lisez à ce que vous savez déjà. Le cerveau fonctionne en faisant des liens : c'est pourquoi la mémorisation par cœur ne marche pas bien : s'il n'y a rien à "accrocher" sur une liste ennuyeuse qui n'a aucun contexte pour vous, le cerveau oublie très vite. C'est aussi pourquoi les connaissances se cumulent si bien : si vous connaissez un peu sur plusieurs sujets différents, vous avez plus de liens à établir et vous pouvez "aller en profondeur" sur de nombreux sujets très rapidement. C'est un super-pouvoir de polymathe.

Le troisième secret est un peu plus technique, mais en vaut largement la peine : utilisez la répétition espacée pour raviver vos connaissances. Je n'expliquerais pas en détail la répétition espacée (c'est hors-sujet pour cet article), mais en un mot, il s'agit d'utiliser quotidiennement des flashcards ou cartes mémoire informatisées. Chaque fiche est révisée à des intervalles de plus en plus longs, grâce à un algorithme spécialisé.
Je vous recommande d'utiliser Anki pour commencer : il est gratuit et possède toutes les fonctionnalités dont vous pourriez avoir besoin. Lisez cet article pour apprendre les bases d'Anki(en).

La règle d'or de la lecture et de l'apprentissage

Voici une autre chose que nous n'apprenons jamais à l'école : dans le monde réel, vous n'êtes pas obligé de continuer à lire quelque chose qui n'a pas de valeur pour vous. Vous êtes également autorisé à lire ce que vous voulez. Il n'y a pas de devoirs ou de "lecture obligatoire" dans la vie, juste le plaisir d'apprendre.
Ne laissez jamais personne vous faire honte pour ce que vous lisez ou ne lisez pas, ou pour la façon dont vous le lisez. Vous êtes libre.
Encore une fois, il suffit de lire et d'apprendre. Aussi vite ou aussi lentement que vous le souhaitez. Et si le livre, l'article de blog ou le magazine ne vous convient pas, remettez-le simplement en rayon. Ce sera peut-être pour plus tard. Peut-être jamais. Vous êtes libre.

Ce qui compte, toujours, c'est de continuer. N'arrêtez pas d'apprendre, jamais.

Ne laissez pas l'école interférer avec votre éducation.
Mark Twain

Que lisez-vous en ce moment ?

Lectures recommandées (en anglais)

The Lifetime Learner's Guide to Reading and Learning par Gary Hoover Le passionné de livres Gary Hoover vit dans un immeuble de 33 pièces, dont 32 contiennent sa bibliothèque personnelle de 57 000 livres. Peu de gens ont « consommé » ou appris et retenu autant de livres. Dans ce livre, Gary expose sa méthode pour capturer les idées importantes contenues dans les livres en 30 minutes (ou moins) sans lecture rapide.
How to Read a Book par Charles Van Doren et Mortimer Adler Publié à l'origine en 1940, ce livre est un phénomène rare, un classique toujours actuel, qui présente et explique les différents niveaux de lecture et comment les atteindre - de la lecture élémentaire à la lecture rapide en passant par l'écrémage systématique et la lecture d'inspection. Les lecteurs apprendront quand et comment "juger un livre par sa couverture", et aussi comment le radiographier, lire de manière critique et extraire le message de l'auteur du texte.

How to read non-fiction like a genius 📚️

Jean-Rémy Duboc — Tue, 03 Jan 2023 12:26:02 +0000

If you want to become a polymath, you have to study across multiple fields of knowledge. In practice, this means you're going to read a lot.
Start with books; books have been a valuable source of knowledge for centuries, and I don't believe that's going to change anytime soon. Most of the information available is still published in books, and a lot of it isn't available online yet.
Then there's web-based resources: blogs, online magazines, newsletters, tutorials, etc. The sky is the limit when it comes to learning online, but few people truly take advantage of it.
Here's how you can read better, and get the most out of your reading.

Make learning and reading a habit

If you want to learn a lot, reading shouldn't be something you used to do in school. It should become a habit, an integral part of your personality.

Forget speed-reading. Forget yearly reading challenges. Nobody cares that you've read a book every week last year. Just read. Learn. As often as you can.
Here's a simple system that will get you reading more every day:

Have a book or an article with you everywhere you go: on your phone or tablet (use the Kindle app for books and Pocket for articles), in paper form, etc.
Read whenever you have a few spare minutes. Keep track of your progress. You'll be amazed by the amount of information you manage to absorb over time.

That's it. That's all you need. Remember: process over goals wins every time

The only way to actually win is to get better each day. [...] If you want better results, then forget about setting goals. Focus on your system instead.
James Clear.

Understand the context of what you're reading, adjust accordingly

Don't read a complex scientific paper the same way you browse the news. This seems obvious, but it will transform the way you read anything.
Before you read anything, make sure you check a few things:

Who's the writer? You'll need to have at least some idea of the two Bs: Bio and Bias. Who are they? Why are they writing this, and what's their background? How does their personal experience affect their writing? How does your personal bias with them affect your reading? It seems like this should only apply to personal articles and the humanities, but even the hard sciences have their bias. To be biased is to be human.
Who's the publisher? The publisher is the author's facilitator, their platform. They bring their own skills and biases to the mix. A good publisher is crucial to the quality and success of a book. Learn to identify the top publishers and websites or newsletters in the fields you're learning about. Anyone can publish anything online, which means quality varies greatly. This makes online publishers all the more relevant. Before reading an online resource, ask yourself a few questions. Is your article published in a well-known online resource, such as an established newspaper or a respected tech newsletter? Or is it just published in a blog under the writer's own name? Keep in mind, just because a post is published on a personal blog doesn't make it bad (I hope this very article demonstrates this). It just means that no third party reviewed the article before publication, and that the author's biases and blind spots may have been missed.
When was this published? Older books are a product of their time, and you need to understand them in their proper context, not judge them based on today's standards. You also need to account for out-of-date information, and update your knowledge accordingly. Online resources are especially prone to obsolescence, especially when it comes to tech. Make sure that the tutorials you use work with the latest version of whatever framework you're using.

This process may seem quite tedious, but in practice it only takes a few moments, and gets faster with practice. And remember, we don't care about speed-reading here. Besides, the techniques I describe in the next section will show you how you can absorb a text much faster, and much deeper.

Use and abuse table of contents, glossaries and indexes

This is the key to effective reading: become an active and demanding reader, don't just passively absorb the text from start to finish.
Start with the table of contents, always. Use it to understand the structure of the book, and pick the parts that interest you most. Ask questions, make a note, and go check how the book answers them. Before you read an article, skim it, use the headlines and paragraphs to understand it's structure.
Then, look at the index to find connections to keywords you already know about, or look for words you never encountered and indulge your curiosity.
Here is something most people, astonishingly, never learn at school: you do not have to read anything in a specific order. This is your book, your article, you can pick and choose which bits you want to read, in whatever order you want. This is called active reading, a criminally neglected skill. Make that a habit and you got yourself a superpower.
Over time, doing this will enable you to go through books quickly, jumping straight to0 parts that are relevant to your current research, leaving out the rest. Learning were to find the information you need later if needed.

This is how to "consume" information. In the next sections we'll have a look at how to "digest" it, aka memorisation.

Learn the three secrets to memorising what you read

Most people struggle to remember what they read, which is why they give up on reading altogether after school. And who can blame them? It seems like a waste of time. The good news is, with active reading, described above, you're already memorising a lot more.

That's the first secret to memorising what you read: become a demanding reader: keep asking questions as you read, and look for answers.

The second secret is also part of the active reading process: connect what you read to what you already know. The brain works by making connections: that's why rote memorisation doesn't work well: if there's nothing to "peg" onto a bland list that has no context for you, the brain just forgets. That's also why knowledge compounds so well: if you know a little about a lot of different subjects, you have more connections to make and you can "go deep" on many topics very quickly. That's a polymath superpower.

The third secret is a bit more involved, but worth the effort: use spaced repetition to keep your knowledge alive. Explaining spaced repetition in detail is out of the scope of this post, but in a nutshell it's using computerised flash cards every day. Each card is revised at increasingly long intervals, based on a specialised algorithm.
I recommend using Anki to get started: it's free and has all the features you're likely to need. Read this post to learn the basics of Anki.

The golden rule of reading and learning

Here's something else we never learn about reading in school: in the real world, you do not have to keep reading anything that's not valuable to you. You're also allowed to read whatever the hell you want. There are no assignments or "required reading" in life, just the pleasure of learning.
Never, ever let anyone shame you for what you're reading or not reading, or how you're reading it. You're free.
Once again, just read and learn. As fast or as slowly as you please. And if the book, the blog post or the magazine isn't for you, just put it back on the shelf. Maybe later. Maybe never. You're free.

What matters, always, is that you just keep going. Don't stop learning, ever.

Don't let schooling interfere with your education.
Mark Twain

What are you reading at the moment? Let me know !

Analytics Integration with TypeScript, React and Styled Components - Part 1: Setting up the Tools

Jean-Rémy Duboc — Mon, 05 Dec 2022 08:13:41 +0000

In this series of tutorials, we are going to create a simple web applications using 3 technologies:

TypeScript as our language of choice
React will be our framework to develop our app
Styled Components to manage styling with CSS-in-JS

We will learn how to track user actions in the app using Google Analytics 4. We'll also use the Web Vitals library to measure and send the app's performance data to GA4.

The aim is to dive into the basics of modern front-end workflows, and how they integrate with Google Analytics.

Prerequisites

In this first part of the tutorial, we'll learn how to set up the basic tools for this application.

To do this tutorial you'll need:

your command line tool of choice
node, npm and npx installed on your computer. At the time of writing I'm using node 16.11.0, npx 8.0.0 and nvm 0.39.1.

I'm also using VSCode and the Git bash command line, but you can use whatever command line and code editor you prefer.

Creating a new React app with TypeScript

The first step is to use create-react-app to generate a simple application as a starting point. create-react-app spares us the work of configuring several build tools, and makes our life easier. Among many others, it will automatically set up Webpack and Babel(configured to compile TypeScript), as well as web-vitals.
All of this in a single command!

Go to the folder where you want you application to live, then type the below in your command line:

npx create-react-app my-react-ts-app --template typescript

That's it ! Your application now lives in a new folder called /my-react-ts-app. You'll notice a few configuration files already in place such as package.json and tsconfig.json. You also have the source files for the application itself already in place in the /src folder.

Start your application by typing:

npm start

Install Styled Components for TypeScript

The next step is to add Styled Components to our apps. Start by installing the styled-components library:

npm i styled-components

Then, we install the styled-components types for TypeScript:

npm i --save-dev @types/styled-components

Read more about these types at: https://github.com/DefinitelyTyped/DefinitelyTyped.

We've just installed the styled-components declaration file. Ready to go!

Add a new styled component

Now we'll create a very basic style component, with conditional styling. Create a new file called Heading.tsx with the following content:

import styled from 'styled-components';

export const Heading = styled.h1<{ active: boolean }>`
  color: ${props => (props.active ? 'red' : 'blue')};
`;

export default Heading;

This will create a new <h1> component class that takes a boolean prop called active, If active is set to true, we set header's color to blue, otherwise we'll paint it red.

Let's test it: go to App.tsx and copy the below content:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Heading from './Heading';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Heading active={false}>My Heading</Heading>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer">
          Learn React
        </a>
      </header>
    </div>
  );
}


export default App;

We've imported the Heading component class, and inserted a heading with active set to false.
Here's what the result should look like:

Well done! You're ready to build your React application in TypeScript using Styled Components!

Intégration analytics avec TypeScript, React et les Styled Components - partie 1: l'outillage

Jean-Rémy Duboc — Mon, 05 Dec 2022 08:08:23 +0000

Dans cette série de tutoriels, nous allons créer une application web toute simple avec trois technologies :

TypeScript sera notre language de programmation,
React sera notre framework pour développer notre application,
Styled Components pour gérer les styles avec CSS-in-JS.

Nous allons ensuite traçer les actions utilisateurs dans l'application avec Google Analytics 4. Nous utiliserons aussi la librairie Web Vitals pour mesurer les performances de l'application et envoyer les résultats vers GA4.

L'objectif est de comprendre les workflow front-end modernes, et leurs intégrations avec Google Analytics.

Prérequis

Pour faire ce tutoriel, vous aurez besoin de :

votre application de ligne de commande favorite
node, npm et npx installés sur votre ordinateur. Au moment d'écrire cet article, j'utilise node 16.11.0, npx 8.0.0 et npm 8.0.0.

J'utilise également VSCode et la ligne de commande Git bash, mais vous pouvez utiliser la ligne de commande et l'éditeur de code que vous préférez.

Création d'une nouvelle application React avec TypeScript

La première étape consiste à utiliser create-react-app pour générer une application simple comme point de départ. create-react-app nous facilite la vie en configurant les outils de base automatiquement. Entre autres choses, il configurera automatiquement Webpack et Babel (configuré pour compiler TypeScript), ainsi que web -vitals.
Tout ça en une seule commande !

Naviguez dans le dossier où vous voulez que votre application soit installée, puis tapez la command suivante :

npx create-react-app my-react-ts-app --template typescript

Et voilà ! Votre application vit maintenant dans un nouveau dossier appelé /my-react-ts-app. Vous remarquerez quelques fichiers de configuration déjà en place tels que package.json et tsconfig.json. Vous avez également les fichiers source de l'application elle-même déjà en place dans le dossier /src.

Démarrez votre application en tapant :

npm start

Installer des Styled Components pour TypeScript

L'étape suivante consiste à ajouter des styled components à nos applications. Commencez par installer la bibliothèque styled-components :

npm i styled-components

Ensuite, nous installons les types styled-components pour TypeScript :

npm i --save-dev @types/styled-components

En savoir plus sur ces types sur : https://github.com/DefinitelyTyped/DefinitelyTyped.

Nous venons d'installer le fichier de déclaration qui contient tous les types nécessaires à l'utilisation des styled components en TypeScript. C'est parti !

Ajouter un nouveau composant stylé

Nous allons maintenant créer un composant de style très basique, avec un style conditionnel. Créez un nouveau fichier nommé "Heading.tsx" avec le contenu suivant :

import styled from 'styled-components';

export const Heading = styled.h1<{ active: boolean }>`
  color: ${props => (props.active ? 'red' : 'blue')};
`;

export default Heading;

Cela créera une nouvelle classe de composant <h1> qui prend un prop booléen appelé active. Si active est défini sur true, nous définissons la couleur de notre titre h1 sur bleu, sinon nous le peindrons en rouge.

Testons-le : ouvrez App.tsx et copiez le contenu ci-dessous :

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Heading from './Heading';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Heading active={false}>My Heading</Heading>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}


export default App;

Nous avons importé la classe de composants Heading et inséré un titre avec active défini sur false.
Voici à quoi devrait ressembler le résultat :

Joli travail! Vous êtes prêt à créer votre application React en TypeScript à l'aide des Styled Components !

A Simple App with TypeScript, React and Styled Components - Part 1: setting up the tools

Jean-Rémy Duboc — Tue, 29 Nov 2022 00:00:00 +0000

this series of tutorials, we are going to create a simple web applications using 3 technologies:

TypeScript as our language of choice
React will be our framework to develop our app
Styled Components to manage styling with CSS-in-JS

The aim is to learn the basics of these tools and have you write your own application in no time.
Let's see what you'll need to get started.

Prerequisites

To do this tutorial you'll need:

your command line tool of choice
node, npm and npx installed on your computer. At the time of writing I'm using node 16.11.0, npx 8.0.0 and nvm 0.39.1.

I'm also using VSCode and the Git bash command line, but you can use whatever command line and code editor you prefer.

Creating a new React app with TypeScript

Go to the folder where you'll want you application to live, then type the below in your command line:

npx create-react-app my-react-ts-app --template typescript

Start your application by typing:

npm start

Install Styled Components for TypeScript

The next step is to add Styled Components to our apps. Start by installing the styled-components library:

npm i styled-components

Then, we install the styled-components types for TypeScript:

npm i --save-dev @types/styled-components

Read more about these types at: https://github.com/DefinitelyTyped/DefinitelyTyped.

We've just installed the styled-components declaration file. Ready to go!

Add a new styled component

Now we'll create a very basic style component, with conditional styling. Create a new file called Heading.tsx with the following content:

import styled from 'styled-components';

export const Heading = styled.h1<{ active: boolean }>`
  color: ${props => (props.active ? 'red' : 'blue')};
`;

export default Heading;

This will create a new <h1> component class that takes a boolean prop called active, If active is set to true, we set header's color to blue, otherwise we'll paint it red.

Let's test it: go to App.tsx and copy the below content:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Heading from './Heading';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Heading active={false}>My Heading</Heading>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}


export default App;

We've imported the Heading component class, and inserted a heading with active set to false.
Here's what the result should look like:

Well done! You're ready to build your React application in TypeScript using Styled Components!

Une application simple avec TypeScript, React et les Styled Components

Jean-Rémy Duboc — Fri, 25 Nov 2022 07:53:55 +0000

Dans cette série de tutoriels, nous allons créer une application web simple avec trois technologies :

TypeScript sera notre language de programmation,
React sera notre framework pour développer notre application,
Styled Components pour gérer les styles avec CSS-in-JS.

L'objectif est d'apprendre les bases de ces outils pour vous permettre d'écrire votre propre application en un rien de temps.
Voyons ce dont vous aurez besoin pour commencer.

Prérequis

Pour faire ce tutoriel, vous aurez besoin de :

votre application de ligne de commande favorite
node, npm et npx installés sur votre ordinateur. Au moment d'écrire cet article, j'utilise node 16.11.0, npx 8.0.0 et npm 8.0.0.

J'utilise également VSCode et la ligne de commande Git bash, mais vous pouvez utiliser la ligne de commande et l'éditeur de code que vous préférez.

Création d'une nouvelle application React avec TypeScript

Naviguez dans le dossier où vous voulez que votre application soit installée, puis tapez la command suivante :

npx create-react-app my-react-ts-app --template typescript

Démarrez votre application en tapant :

npm start

Installer des Styled Components pour TypeScript

L'étape suivante consiste à ajouter des styled components à nos applications. Commencez par installer la bibliothèque styled-components :

npm i styled-components

Ensuite, nous installons les types styled-components pour TypeScript :

npm i --save-dev @types/styled-components

En savoir plus sur ces types sur : https://github.com/DefinitelyTyped/DefinitelyTyped.

Nous venons d'installer le fichier de déclaration qui contient tous les types nécessaires à l'utilisation des styled components en TypeScript. C'est parti !

Ajouter un nouveau composant stylé

Nous allons maintenant créer un composant de style très basique, avec un style conditionnel. Créez un nouveau fichier nommé "Heading.tsx" avec le contenu suivant :

import styled from 'styled-components';

export const Heading = styled.h1<{ active: boolean }>`
  color: ${props => (props.active ? 'red' : 'blue')};
`;

export default Heading;

Testons-le : ouvrez App.tsx et copiez le contenu ci-dessous :

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Heading from './Heading';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Heading active={false}>My Heading</Heading>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}


export default App;

Nous avons importé la classe de composants Heading et inséré un titre avec active défini sur false.
Voici à quoi devrait ressembler le résultat :

Joli travail! Vous êtes prêt à créer votre application React en TypeScript à l'aide des Styled Components !

Les développeurs doivent être paresseux: voilà pourquoi

Jean-Rémy Duboc — Fri, 25 Nov 2022 07:25:49 +0000

Je pense que c'est une bonne chose pour les programmeurs (ou, en réalité, n'importe quel travailleur) d'être paresseux.

Je pense vraiment que les recruteurs devraient rechercher le développeur le plus paresseux qu'ils puissent trouver.
OK, OK, tout le monde, posez vos fourches et vos torches, et laissez-moi vous expliquer.

Deux types de paresse

L'autre jour, sur Twitter, quelqu'un a demandé s'il fallait utiliser des points-virgules en JS. Mon avis ? Je ne m'embête pas avec ça. Pour moi, c'est du gaspillage de frappe, un effort inutile. Cela ne rend pas le code meilleur ou plus facile à lire, et si ça peut faire gagner quelques millisecondes ici et là, je suis à 100% pour. J'essaie toujours de trouver la voie de la moindre résistance, ce que j'ai appelé "l'option du plus faible effort" dans mon tweet.
Cela a provoqué une tempête dans un vers d'eau, et certains ce sont vexé:

Ew. Lowest effort option? That ethos couldn’t lead to great software…

That being said, when I’m speed coding on @LeetCode I’ve begun dropping the semicolons. I’m so ashamed of myself. 🤦‍♂️😜
— Zakery Kates (@zakkates) November 11, 2022

I disagree. Semi-colons are there to separate the end of each line and therefore serve a purpose to both compiler and programmer. There's no way low effort is always the best policy - it just leads to lazy programming.
— Daniel Hartgrove (@danhartgrovexyz) November 12, 2022

Il y a quelques points techniques valables ici, mais la réponse qui m'a le plus dérangé a été le "ewww, peu d'effort ? Mais c'est pour les perdants !" viscérale. Cela me dérange parce qu'ils ont mal compris ce que je voulais dire. Je ne parlais en aucun cas de tout lâcher, de ne pas faire son travail sérieusement.

Je crois que ces commentateurs ont lu "l'option du plus faible effort" et ont compris "un faible effort tout le temps". Ce n'est absolument pas ce que je veux dire. Je parlais de la vraie paresse, comme Larry Wall le décrit dans le livre Perl :

The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful, and document what you wrote so you don’t have to answer so many questions about it. Hence, the first great virtue of a programmer.

La vraie « paresse » = optimisation

Voyez-vous, cher lecteur, nous ne parlons pas de relâchement ici. Il ne s'agit pas de copier et coller du code manuellement jusqu'à ce qu'il soit temps de rentrer à la maison, parce qu'on a la flemme d'écrire un script avec une ou deux regexps qui feront le travail en quelques secondes. L'écriture du script demande certe plus d'efforts au départ, mais vous fera économiser des heures de travail fastidieux sur le long terme. Et peut-être aider vos collègues. Et vous donner plus de temps libre pour travailler sur quelque chose de plus intéressant, ou simplement pour vous détendre un peu si vous en avez envie.

Je veux prendre le chemin de la moindre résistance, oui, mais c'est seulement pour obtenir plus de qualité, pour avancer, pour accélérer les choses, et, au final, pour éviter de perdre un temps précieux sur du baratin inutile.

En outre, je ne crois plus à la paresse de toute façon.

Je suis tombé sur un autre exemple l'autre jour. Un collègue implémentait une nouvelle fonctionnalité de paiement (temporaire) sur l'un de nos sites. Nous voulions savoir quand les utilisateurs ont finalisé un achat sur le site, à la fois dans Universal Analytics et dans GA4. Étant donné qu'il y avait quelques paramètres inhabituels dans le traçage de cette fonctionnalité, il avait initiallement envisagé de déclencher les événements directement dans son code, à l'aide du protocole de mesure d'Universal Analytics et du protocole de mesure de GA4 pour suivre tout ça. Gardez à l'esprit que nous avions déjà une configuration complète de Google Tag Manager, avec UA et GA4 déjà en place.

Mon cerveau paresseux s'est simplement demandé "a-t-on vraiment besoin de faire tout ce boulot pour une fonctionnalité temporaire ?". Il s'avère qu'il existait une solution simple avec très peu de code : il suffit de pousser les données concernant l'achat dans le datalayer, et d'ajuster GTM pour déclencher correctement les événements. Boom. Tout ça été bouclé en quelques heures.

Du coup j'ai passé le reste de la journée à regarder la télé. Je plaisante.

Developers should be lazy; here's why

Jean-Rémy Duboc — Fri, 25 Nov 2022 07:13:50 +0000

I believe it's a good thing for programmers (or any worker, really) to be lazy. I truly think hiring managers should seek the laziest developer they can find.
All right, people, put your pitchforks down and let me explain.

Two kinds of laziness

On Twitter the other day, someone asked if one should use semicolons in JS. My take? I don't bother. To me, it's wasted typing, wasted effort for no benefit. It doesn't make the code any better or easier to read, and it might save a few milliseconds here and there. I'm all about that. I'm all about choosing the path of least resistance, what I called "the lowest effort option" in my tweet.
This caused a bit of a storm in a teacup, and triggered a few folks:

Ew. Lowest effort option? That ethos couldn’t lead to great software…

That being said, when I’m speed coding on @LeetCode I’ve begun dropping the semicolons. I’m so ashamed of myself. 🤦‍♂️😜
— Zakery Kates (@zakkates) November 11, 2022

I disagree. Semi-colons are there to separate the end of each line and therefore serve a purpose to both compiler and programmer. There's no way low effort is always the best policy - it just leads to lazy programming.
— Daniel Hartgrove (@danhartgrovexyz) November 12, 2022

There's a few valid technical points there, but the response that bothered me most was the immediate "ewww, low effort? That's for losers." gut reaction. It bothers me because they misinterpreted what I meant. I wasn't talking about slacking off and not doing a good job.

I believe these responder read "the lowest effort option", and understood "low effort all the time". That is not what I mean. I was talking about true laziness, the way Larry Wall describes it in the Perl book:

The quality that makes you go to great effort to reduce overall energy expenditure. It makes you write labor-saving programs that other people will find useful, and document what you wrote so you don’t have to answer so many questions about it. Hence, the first great virtue of a programmer.

True laziness = optimisation

You see, dear reader, we're not talking about slacking off here. It's not about copying and pasting code manually until it's time to go clock out and go home, because you can't be bothered to write a script with regexp or two that will do the job for you in seconds. Writing the script takes more effort initially, but will save hours of tedious labor down the line. And maybe help your colleagues. And give you more free time to work on something more interesting, or just to relax for a bit if you feel like it.

I want to take the path of least resistance, yes, but it's only to get more quality, to scale, to speed things up, and ultimately, to avoid spending precious company time on useless BS.

Besides, I no longer believe laziness is real anyway.

I came across another example just the other day. A collegue was implementing a new (temporary) payment feature on one of our sites. We needed to track when users finalised a purchase on the site in both Universal Analytics and GA4. Because there were a few odd parameters in the tracking, he was planning on triggering the events in his code, using Universal Analytics's measurement protocol and GA4's measurement protocol directly to track all this. Keep in mind we already had a fully fledge Google Tag Manager setup, with both UA and GA4 configured.
My Lazy brain just went "do we really need to do all that work for a temporary feature?". Turns out there was a simple, low-code solution: just push data about the purchase in the datalayer, and tweak GTM to trigger the events correctly. Boom. All done in a few hours.

I spent the rest of the day watching TV. Just kidding.

Understanding Default Dimensions in Google Analytics 4

Jean-Rémy Duboc — Wed, 09 Nov 2022 08:17:50 +0000

What is a dimension in GA4? A Few Examples

Google Analytics is a tool designed to collect data. To know what the data represents, we use dimensions.
For example, when a user browses a web page, Google Analytics measures the following dimensions:

The URL of the page
Day and time
The the user's location, distributed over several dimensions: continent, country, city, etc.
Possibly dimensions describing the original source of the user (campaign, medium, )
etc.

Quick reminder: in GA4, unlike Universal Analytics, a page visit is represented by an event.

Now let's see how we can visualise these dimensions in our reports on GA4.

Use dimensions in reports on GA4

The reports available by default in GA4 are simply used to view the dimensions present by default, grouped by category. Let's see, for example, the "User Acquisition" report:

In this report we can see, arranged in a line, the values defined for an acquisition dimension, the First user default channel grouping. This dimension represents the group of origin of the first interaction with a user: organic search (Organic Search), sponsored search (Paid Search), direct traffic, etc.
The columns show us the different metrics related to this dimension: number of new users, sessions with engagement, conversions, etc.
The acquisition report allows you to see these same metrics linked with other dimensions: source of the first interaction, first ad group of the user, etc.
This report therefore allows you to see the acquisition and promotion techniques that work best. We can answer questions such as: what is my most effective promotional campaign? Does organic traffic generate more conversion than traffic from promotional campaigns, etc. ?

Secondary Dimensions

You can also add secondary dimensions to group the dimensions into subcategories:

In the example below we have aggregated users by first grouping by default, and by country (the country is the secondary dimension):

Don't hesitate to explore the other reports to observe the multiple dimensions at your disposal.

Some default dimensions to know on GA4

By default, Google Analytics 4 provides us with a wide range of dimensions. You can see a complete list in the official Google documentation.
Let us see some of these dimensions in details.

Where do your users come from? Attribution dimensions and traffic sources

Attribution and traffic source dimensions help identify users and sessions based on criteria such as:

Marketing campaigns used for acquisition
acquisition support (email, CPC, etc.)
source (the publisher or the source of inventory having generated traffic)
data relating to Google Ads or Search Ads 360:
account name
ad group
keyword
query
etc.
data relating to creatives on Google Display & Video 360

Attribution dimensions are user-driven, while Traffic Source dimensions are user-driven and session-driven.

Understanding your Visitors - Demographics, Geographies and Device

In order to best serve our customers, we need to know who they are. Identifying customers by certain criteria can help us know if our app is serving the right people, understand how people from different backgrounds use our app, compare different populations, and more.

For example, you can use the dimensions of demographic data automatically deduced by Google, after having activated Google signals

Age
Gender
Hobbies

The geographical origin of visitors is measured with the following default dimensions:

City/City ID
Continent and subcontinent/ID UN M29 of subcontinent
Country/ID ISO 3166 of country
Region/Region ID

We can also know what type of platforms are used to navigate our application. It's very useful to provide the best user experience. For example, if we know that 90% of our visitors are on a tablet device with a relatively low screen resolution, we will favor optimization for this configuration (or try to understand why users prefer this option, which may reveal a problem on other platforms).
The Platform/Device dimensions to consider are:

Browser
Device
Device category (mobile, tablet or computer)
Operating system
Platform ("Android", "iOS" and "Web")
Screen resolution

Important note: make sure you have users' consent in advance (using the appropriate GDPR tools) before recording this type of personal data.

Know what your users are doing - events, page/screen, and user lifetime

Now let's move on to the details of user actions on our application.
For events, we have two key dimensions at our disposal:

Event name
Is it a conversion event ("true" if the event is a conversion)

To know what type of page or screen our users are on, we have, among others, the following dimensions at our disposal:

Page location (page URL or screen)
Page referrer (the previous page in the user's journey, which can be on your site or another site)
Page title

Engagement metrics will be used to measure data such as time spent on page.

Finally, to find out if visitors are loyal and often return to the application, we can use "User lifetime" type dimensions such as:

Date of the first session
Date of first visit
Date of last activity
Date of first purchase
Date of last purchase

Measure the commercial performance of your application - E-commerce dimensions

Finally, if you have an e-commerce site, Google Analytics provides you with a large number of dimensions to describe the products you sell, such as:

Currency
Item brand
Item category (with 5 levels of hierarchy for your subcategories)
Discount voucher for the item
Item ID
Item name
Local price of the item
Shipping tier (by road transport, by air, next day, etc.)
Tax amount
Transaction ID
etc.

Dimension activation and monitoring

To create reports that suit your needs, you will need to enable and test the necessary dimensions. Some dimensions are activated and populated by default, but others, depending on the data collected, must be activated in a specific way.
Refer to the Google documentation to find out how to activate each dimension.

To see at a glance which dimensions are available on your property, use the dimensions and metrics explorer provided by Google.

What dimensions do you use for your Google Analytics reports and why? Feel free to share your experiences!

DEV Community: Jean-Rémy Duboc

How to use GTM in a Vue 3 TypeScript Single Page Application Part 2 - Managing Events in the dataLayer

How vue-GTM Triggers a pageview Event with Vue.js router

Updating Page Titles with the Vue.JS Router

Adding a Custom Event in the DataLayer

Utiliser GTM dans une application à page unique en Vue 3 et TypeScript, Partie 1 - configuration de base

Créer une application simple avec Vue.js

Configurer un nouveau conteneur Google Tag Manager

Installer et configurer Vue GTM

Configuration

Déboguer les balises GTM de votre application et le datalayer avec les bons outils

Confirmer que la balise GTM est installée

Vérifier le datalayer dans console Chrome

How to use GTM in a Vue 3 TypeScript Single Page Application Part 1 - basic configuration

Create a Vue application

Set up a new Google Tag Manager Container

Install and configure Vue GTM

Configuration

Using debugging tools to debug your app's GTM tagging and the datalayer

Confirm that the GTM tag is installed

Check the data layer in the console

Comment lire la non-fiction comme un génie 📚️

Faire de la lecture une habitude

Comprenez le contexte de ce que vous lisez. Ajustez votre pensée en conséquence.

Utilisez un maximum les table des matières, glossaires et index

Apprenez les trois secrets pour mémoriser ce que vous lisez.

La règle d'or de la lecture et de l'apprentissage

Lectures recommandées (en anglais)

How to read non-fiction like a genius 📚️

Make learning and reading a habit

Understand the context of what you're reading, adjust accordingly

Use and abuse table of contents, glossaries and indexes

Learn the three secrets to memorising what you read

The golden rule of reading and learning

Recommended reading

Analytics Integration with TypeScript, React and Styled Components - Part 1: Setting up the Tools

Prerequisites

Creating a new React app with TypeScript

Install Styled Components for TypeScript

Add a new styled component

Intégration analytics avec TypeScript, React et les Styled Components - partie 1: l'outillage

Prérequis

Création d'une nouvelle application React avec TypeScript

Installer des Styled Components pour TypeScript

Ajouter un nouveau composant stylé

A Simple App with TypeScript, React and Styled Components - Part 1: setting up the tools

Prerequisites

Creating a new React app with TypeScript

Install Styled Components for TypeScript

Add a new styled component

Une application simple avec TypeScript, React et les Styled Components

Prérequis

Création d'une nouvelle application React avec TypeScript

Installer des Styled Components pour TypeScript

Ajouter un nouveau composant stylé

Les développeurs doivent être paresseux: voilà pourquoi

Deux types de paresse

La vraie « paresse » = optimisation

Developers should be lazy; here's why

Two kinds of laziness

True laziness = optimisation

Understanding Default Dimensions in Google Analytics 4

What is a dimension in GA4? A Few Examples

Use dimensions in reports on GA4

Secondary Dimensions

Some default dimensions to know on GA4

Where do your users come from? Attribution dimensions and traffic sources

Understanding your Visitors - Demographics, Geographies and Device

Know what your users are doing - events, page/screen, and user lifetime

Measure the commercial performance of your application - E-commerce dimensions

Dimension activation and monitoring

How vue-GTM Triggers a `pageview` Event with Vue.js router