COMMENT

Page d'accueil

Menus

Barre d'icônes Icône de menu Accordéon Onglets Onglets verticaux En-têtes d'onglet Onglets pleine page Onglets de survol Navigation supérieure Topnav réactif Barre de navigation avec icônes Menu de recherche Barre de recherche Barre latérale fixe Navigation dans les pages Barre latérale réactive Navigation plein écran Menu hors-toile Survolez les boutons Sidenav Barre latérale avec icônes Menu de défilement horizontal Menu vertical Navigation en bas Bas de page réactif Liens de navigation de la bordure inférieure Liens de menu alignés à droite Lien de menu centré Liens de menu de même largeur Menu fixe Faites glisser la barre vers le bas sur le défilement Masquer la barre de navigation sur le défilement Réduire la barre de navigation lors du défilement Barre de navigation collante Barre de navigation sur l'image Survolez les listes déroulantes Cliquez sur Listes déroulantes Liste déroulante en cascade Liste déroulante dans Topnav Liste déroulante dans Sidenav Liste déroulante de la barre de navigation Resp Menu de sous-navigation Déposer jusqu'à Méga Menu Menu mobile Menu rideau Barre latérale réduite Panneau latéral réduit Pagination Chapelure Groupe de boutons Groupe de boutons verticaux Barre sociale collante Navigation dans les pilules En-tête réactif

Images

Diaporama Galerie de diaporamas Images modales Boite à lumière Grille d'images réactive Grille d'images Galerie d'onglets Fondu de superposition d'image Diapositive de superposition d'image Zoom de superposition d'image Titre de superposition d'image Icône de superposition d'image Effets d'images Image en noir et blanc Texte de l'image Blocs de texte d'image Texte d'image transparent Image pleine page Formulaire sur l'image Image du héros Image d'arrière-plan floue Changer Bg sur le défilement Images côte à côte Images arrondies Images d'avatars Images réactives Centrer les images Vignettes Bordure autour de l'image Rencontrer l'équipe Image collante Retourner une image Secouer une image Galerie de portefeuilles Portefeuille avec filtrage Zoom sur les images Loupe d'image Curseur de comparaison d'images Icône de favori

Boutons

Boutons d'alerte Boutons de contour Boutons partagés Boutons animés Boutons de fondu Bouton sur l'image Boutons de médias sociaux En savoir plus En lire moins Boutons de chargement Boutons de téléchargement Boutons de pilule Bouton de notification Boutons d'icône Boutons suivant/précédent Plus de bouton dans la navigation Bloquer les boutons Boutons de texte Boutons ronds Bouton de défilement vers le haut

Formes

Formulaire de connexion Formulaire d'inscription Formulaire de paiement Formulaire de contact Formulaire de connexion sociale Formulaire d'inscription Formulaire avec icônes Bulletin Formulaire empilé Formulaire réactif Formulaire contextuel Formulaire en ligne Effacer le champ de saisie Masquer les flèches numérotées Copier le texte dans le presse-papiers Recherche animée Bouton de recherche Recherche plein écran Champ de saisie dans la barre de navigation Formulaire de connexion dans la barre de navigation Case à cocher personnalisée/Radio Sélection personnalisée Interrupteur à bascule Cochez la case Détecter le verrouillage des majuscules Bouton de déclenchement à l'entrée Validation du mot de passe Basculer la visibilité du mot de passe Formulaire en plusieurs étapes Saisie automatique Désactiver la saisie semi-automatique Désactiver le correcteur orthographique Bouton de téléchargement de fichier Validation d'entrée vide

Filtres

Filtrer la liste Tableau de filtrage Éléments filtrants Liste déroulante des filtres Trier la liste Sort Table

les tables

Table à rayures zébrées Tables centrales Tableau pleine largeur Tableaux côte à côte Tableaux réactifs Tableau de comparaison

Suite

Vidéo plein écran Boîtes modales Supprimer modal Chronologie Indicateur de défilement Barres de progression Barre de compétences Curseurs de plage Info-bulles Survol de l'élément d'affichage Popups Pliant Calendrier HTML inclut Liste de choses à faire Chargeurs Évaluation étoilée Note de l'utilisateur Effet de superposition Contacter les puces Cartes Retourner la carte Carte de profil Fiche produit Alertes Faire appel à Remarques Étiquettes Cercles Style RH Coupon Groupe de liste Liste sans puces Texte réactif Texte découpé Texte lumineux Pied de page fixe Élément collant Hauteur égale Clearfix Flotteurs réactifs Snack-bar Fenêtre plein écran Faire défiler le dessin Défilement lisse Dégradé Bg Défilement En-tête collant Réduire l'en-tête lors du défilement Tableau des prix Parallaxe Ratio d'aspect Iframes réactifs Basculer J'aime/Je n'aime pas Basculer Masquer/Afficher Basculer en mode sombre Basculer le texte Basculer la classe Ajouter une classe Supprimer la classe Classe active Arborescence Supprimer la propriété Détection hors ligne Trouver l'élément caché Rediriger la page Web Zoom survol Boîte à rabat Centrer verticalement Bouton central en DIV Transition au survol Flèches Formes Lien de téléchargement Élément pleine hauteur Fenêtre du navigateur Barre de défilement personnalisée Masquer la barre de défilement Afficher/Forcer la barre de défilement Apparence de l'appareil Bordure modifiable Couleur de l'espace réservé Couleur de sélection de texte Couleur de puce Ligne verticale Diviseurs Animer des icônes Compte à rebours Machine à écrire Bientôt disponible Chat Messages Fenêtre de discussion contextuelle Écran divisé Témoignages Compteur de sections Diaporama de citations Éléments de liste fermables Points d'arrêt de périphérique typiques Élément HTML déplaçable Requêtes multimédia JS Surligneur de syntaxe Animations JS Longueur de la chaîne JS Exponentation JS Paramètres JS par défaut Obtenir l'URL actuelle Obtenir la taille d'écran actuelle Obtenir des éléments Iframe

Site Internet

Créer un site Web gratuit Créer un site Web Créer un site Web statique Créer un site Web (W3.CSS) Créer un site Web (BS3) Créer un site Web (BS4) Créer un site Web (BS5) Créer et afficher un site Web Créer un site Web d'arborescence de liens Créer un portefeuille Créer un CV Créer un site Web de restaurant Créer un site Web d'entreprise Créer un Webbook Site Web du centre Contacter la rubrique À propos de la page Grand en-tête Exemple de site Web

Grille

Disposition à 2 colonnes Disposition à 3 colonnes Disposition à 4 colonnes Grille extensible Affichage de la grille de liste Disposition des colonnes mixtes Cartes de colonne Disposition en zigzag Mise en page du blog

Google

Graphiques Google Polices Google Associations de polices Google Configurer Google Analytics

Convertisseurs

Convertir le poids Convertir la température Convertir la longueur Convertir la vitesse

Blog

Obtenir un emploi de développeur Devenez développeur front-end.

Comment configurer Google Analytics

Google Analytics est utilisé pour visualiser et comprendre le trafic Web.

C'est gratuit et facile à utiliser.

Vous pouvez le personnaliser pour de nombreux cas d'utilisation.

Cela fonctionne hors de la boîte.

Il est rapide à mettre en place. Obtenez vos idées dès aujourd'hui !

Créer mon site web gratuit ❯

Passer la lecture sur Google Analytics. Emmenez-moi directement à la première étape. Aller à la première étape

Qu'est-ce que Google Analytics

Google Analytics est une solution d'analyse Web.

Il est développé et pris en charge par Google.

La dernière version s'appelle Google Analytics 4.

Il peut être utilisé pour afficher des données telles que l'audience, les pages vues, les sessions, les données démographiques et les événements.

Pourquoi activer Google Analytics

Analysez votre trafic Web pour prendre de meilleures décisions.

Comprendre et améliorer l'entonnoir de vente.

Apprenez en expérimentant (par exemple, les tests a/b).

Google a une autre solution appelée Google Optimize. Cette solution est faite pour les tests.


À qui s'adresse Google Analytics

Google Analytics est utile pour tous ceux qui ont un site Web.

Il vous donne des informations sur les utilisateurs de votre site et sur la manière dont ils interagissent avec celui-ci.

De plus, l'interface est facile à comprendre.

Vous n'avez pas besoin d'expérience en analyse pour utiliser et naviguer dans le service.


Comment configurer Google Analytics étape par étape

Google Analytics peut être configuré de deux manières Le Global Website Tag (gtag.js) ou Google Tag Manager .

Le moyen le plus simple consiste à utiliser The Global Website Tag.

Ce didacticiel utilisera l'approche Global Website Tag.


Les préparatifs

Décidez quel éditeur de code utiliser et configurez votre environnement.

W3Schools a créé un éditeur de code facile à utiliser appelé W3Schools Spaces . Inscrivez-vous et lancez-vous en quelques clics.

Commencez gratuitement ❯

Créez votre fichier index.html afin d'être prêt à entrer le code.

Toutes les configurations. Allons-y!


Configurer Google Analytics : le Global Website Tag


Étape 1 : Créer un compte Google Analytics

Accédez à Analytics : créez un compte ou connectez-vous à Analytics

Le lien dans le paragraphe ci-dessus vous amène à la page de destination de Google Analytics.

Cliquez sur le bouton "Commencer gratuitement".

page de destination

Étape 2 : Accédez à la page d'accueil

Après avoir créé un compte ou vous être connecté, vous êtes accueilli dans la solution.

Appuyez sur le bouton "Démarrer la mesure" pour continuer.

Page d'accueil

Étape 3 : configuration du compte

Vous avez deux décisions à prendre ici.

  1. Saisissez le nom de votre compte.
  2. Décidez quelles données vous souhaitez partager.
  3. Cliquez sur le bouton "Suivant".

Un compte peut avoir plusieurs identifiants de suivi. Vous pouvez suivre plus d'un site Web avec un compte.

Présentation de la configuration du compte

Étape 4 : Configuration de la propriété

La propriété est le service que vous mesurez, tel qu'un site Web, une application, une arborescence de liens, etc.

  1. Entrez un nom de propriété.
  2. Entrez votre fuseau horaire.
  3. Entrez la devise que vous utilisez.
  4. Cliquez sur le bouton "Suivant".
Aperçu de la configuration de la propriété

Étape 5 : Ajouter des informations sur l'entreprise

Analytics utilise les informations pour personnaliser votre expérience.

  1. Sélectionnez votre catégorie d'industrie.
  2. Sélectionnez la taille de l'entreprise.
  3. Tick the boxes for how you are planning to use Analytics.
  4. Click the "Create" button to proceed.
Détails des informations sur l'entreprise

Step 6: Terms of Service Agreement

Read and understand the terms of service.

Tick the GDPR box and click the "I accept" button if you agree.

Aperçu des termes et conditions

Step 7: Email subscriptions

  1. Tick or uncheck all boxes.
  2. Click the "Save" button to continue.
Présentation de la communication par e-mail

Step 8: Select platform

Chose the platform where you are collecting data.

Then, click the relevant platform to continue.

We are continuing with "Web" as the example in this tutorial.

Sélectionnez l'aperçu de la plate-forme

Step 9: Data stream setup

Enter data stream details.

  1. The URL to your site.
  2. The name that you want to give the stream.
  3. Decide if you are to enable enhanced measurement or not.
  4. Click on the "Create stream" button to continue.
  5. The enhanced measurement can give the data more context. Improving your understanding of the traffic.

    Présentation de la configuration du flux de données

    Step 10: Web stream overview

    Here you can see a detailed overview of the web stream.

    Aperçu des détails du flux Web

    Here are the key takeaways from the overview.

    1. Stream URL.

    The Stream URL is the link to the connected site.

    URL de flux

    2. Measurement ID

    The Measurement ID is the identifier for your data stream.

    It has a format of G-XXXXXXX.

    ID de mesure

    Google Analytics 4 uses Measurement ID. Older versions use Tracking ID. You can not have both.

    3. Tagging instructions

    Decide to use Global site tag (gtag.js) or Tag manager.

    This tutorial will use the Global site tag.

    Installing the Global site tag is the easiest and quickest way of getting it up and running.

    instructions de marquage

    Step 11: Global site tag (gtag.js)

    Click the "Global site tag (gtag.js)" row.

    Balise de site globale

    Here you can see a code snippet.

    The code snippet is a script to allow Google to measure data on your site.

    You can see the Measurement ID in the second last line in the code snippet.

    The code snippet

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DNJN1PF3CS"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXX');
    </script>

    Step 12: Enter the code snippet

    Copy the code snippet.

    Make sure to include your Measurement ID.

    Locate the <head> tag in your HTML.

    Paste the code snippet just below the <head> tag.

    Save and publish the code.

    Ajouter un extrait de code

    We used W3Schools Spaces in this example.


    Step 13: Test that it works

    Ensure that you have successfully saved and published the code snippet with the correct Measurement ID.

    Open the URL for the site you have connected to the data stream.

    Click on "Real time" on the menu to the left.

    Confirm that you see yourself as an active user.

    Congrats. You have successfully enabled Google Analytics for your site!

    Analytics dashboard

    Explore Google Analytics

    Recommended related topics are Tag manager and Events

    Spend time in the service to learn about your user activity, commerce, demographics, device, and referrals.


    Tip: Ever heard of W3Schools Spaces? It is a personal space where you can make a website from scratch or use a template and host it for free.

    It has everything you need in the browser.

    Get started in a few clicks.

    Start now for free ❯

    * no credit card required