🐛 fix(analytics): documentation et correctif version standalone [DS-3…

…746] (#895)

- Apporte des éléments correctifs à l'issue #880
  - correctifs dans la version standalone :
    - configuration appliquée au logging (verbose, production)
    - retrait de dépendances non requises
  - ajout de documentation sur la version standalone
    - installation
    - fonctionnalités disponibles
  - Extraction de Modes du fichier de la class Options pour réduire les dépendances

src/analytics/doc/analytics.md

@@ -14,7 +14,7 @@
 > Les différents tests effectués semblent montrer un fonctionnement global sans que nous puissions garantir une compatibilité optimale sur ces versions. N'hésitez pas à nous remonter tous problèmes rencontrés.
 
 
-Le système de design apporte avec lui un outil de collecte de données analytics basé sur la solution Eulérian. Ce package, bien que fourni par le DSFR, peut être utilisé indépendamment de celui-ci via une version standalone.
+Le système de design apporte avec lui un outil de collecte de données analytics basé sur la solution Eulérian. Ce package, bien que fourni par le DSFR, peut être utilisé indépendamment de celui-ci via une [version standalone](analytics/installation.md#Version standalone).
 
 
 

src/analytics/doc/analytics/actions.md

@@ -12,6 +12,9 @@ Les actions correspondent aux évènements et aux interactions que l’on souhai
 
 * Les actions d'interaction sont limitées dans leur envoi à la seule première interaction avec l'élément dans la page, sauf si la donnée associée à l'envoi change. Par exemple, un bouton particulier dans le menu enverra des données au premier click, puis sera limité. Si la page change, il enverra de nouveau des données au premier click. Dans le cas d'un composant de recherche, chaque interaction enverra une requête de recherche différente et passera outre la règle de limitation. Si la requête de recherche est identique à la précédente, celle-ci ne sera pas envoyée.
 
+> **Note** :
+> Les actions ne sont pas supportées dans la [version standalone](./installation.md#Version standalone). Pour mesurer les actions avec l'API analytics, utiliser la version complète du DSFR
+
 #### ActionName
 
 Lorsqu’une action est émise, un actionName est envoyé à Eulérian.
@@ -23,8 +26,8 @@ Ce nom d’action est constitué de 3 éléments :
 * Title : la hiérarchie des intitulés des éléments ou la valeur de l'attribut `data-fr-analytics-action`
 * Id : l'id de l'élément (correspondant à l'attribut `id`sur l'élément) - obligatoire.
 
-> **Important**
-> ⚠️ **Un id est obligatoire sur tous les éléments traqués** (retrouvez les éléments du dsfr nécessitant un id dans la colonne “element” du [tableau d'actions des composants du dsfr](actions/component-actions.md)).
+> **⚠️ Important :**
+> **Un id est obligatoire sur tous les éléments traqués** (retrouvez les éléments du dsfr nécessitant un id dans la colonne “element” du [tableau d'actions des composants du dsfr](actions/component-actions.md)).
 >Il est nécessaire que l’id soit :
 >  * unique : L’id doit être unique au site, par exemple:
 >    * Deux boutons différents ne doivent pas avoir le même id, même sur des pages différentes
@@ -33,7 +36,7 @@ Ce nom d’action est constitué de 3 éléments :
 
 exemple d’actionName : `(click)_titre_niveau_2_›_titre_niveau_3_›_label_de_l_element_[button-id-1]`
 
-> **Note**
+> **Note :**
 > Les espaces sont remplacé par des `_` [_ | low line (U+005F) @ Graphemica](https://graphemica.com/_)
 > Les niveaux de hiérarchie sont séparé par des `›` [› | single right-pointing angle quotation mark (U+203A) @ Graphemica](https://graphemica.com/%E2%80%BA)
 > Les caractères suivants `"'<>*$&~`|\?^~` étant restreints par Eulerian, ils sont remplacés par une équivalence en caractère fullwidth : [Graphemica | Halfwidth and Fullwidth Forms](https://graphemica.com/blocks/halfwidth-and-fullwidth-forms)
@@ -49,7 +52,7 @@ L’API analytics utilise des actions pour suivre les interactions de l’utilis
 
 L'ajout de l'attribut `data-fr-analytics-rating` sur élément particulier permet d'activer la mesure du taux d’interaction sur cet élément, à savoir le rapport entre le nombre de fois où il a été affiché et le nombre de fois où une interaction a eu lieu.
 
-> **Important**
+> **⚠️ Important :**
 > Cette fonctionnalité entraîne un envoi de donnée plus important, la donnée d'affichage étant automatiquement envoyée tandis que l'envoi de la donnée d'interaction se fait à l'intervention de l'utilisateur. Pour rappel, le modèle de facturation dépend du volume d'appels envoyés à Eulerian et l'envoi de multiples affichages de composants entraîne donc une hausse de la consommation de données. Il est important de s’assurer de la pertinence de chaque élément où cette fonctionnalité est activée afin d'optimiser l'envoi de données.
 
 

src/analytics/doc/analytics/collector.md

@@ -48,7 +48,7 @@ _Boolean_
 
 Défini si la mesure d'audience des actions est activée ou non.
 
-* Par défaut, la mesure d'audience des actions est activée.
+* Par défaut, la mesure d'audience des actions est désactivée (`false`)
 
 * * *
 

src/analytics/doc/analytics/installation.md

@@ -1,18 +1,44 @@
 ## Installation
 
+#### Au sein du DSFR
+
 Pour installer le système d’analytics, il suffit d’importer le fichier javascript :
 `/dist/analytics/analytics.module.js` **après** `dsfr.module.js`
 
-Le script d’Eulerian est automatiquement chargé au sein du package, attention à ne pas l’insérer dans la page afin
-d'éviter les doublons.
+Fonctionnalités disponibles :
+- Intégration CMP
+- Optout
+- Collecte de pages
+- Actions dans les composants
+- Actions hors composants
+
+Le script d’Eulerian est automatiquement chargé au sein du package, attention à ne pas l’insérer dans la page afin d'éviter les doublons.
+
+> **⚠️ Important :** 
+> Pour les versions du dsfr inférieures à dsfr-1.9.0 (minimum 1.3.0), il est nécessaire d’ajouter le fichier : `/dist/patch/patch.module.js` **avant** `dsfr.module.js`
+
+Il est préférable d'utiliser l'api dans ses dernières versions pour profiter des optimisations et correctifs
+
+Analytics est un package à part, il n’est pas compris dans le fichier js global du DSFR. Il n'est cependant pas totalement autonome et est dépendant du core du DSFR (compris dans le fichier global du DSFR)
+
+#### Version standalone
+
+Pour installer la version standalone du système d’analytics, il suffit d’importer le fichier javascript :
+`/standalone/analytics/analytics.module.standalone.js`
+
+Fonctionnalités disponibles :
+- Intégration CMP
+- Optout
+- Collecte de pages
+- ~~Actions dans les composants~~
+- ~~Actions hors composants~~
 
-⚠️ Pour les versions du dsfr inférieures à dsfr-1.9.0 (minimum 1.3.0), il est nécessaire d’ajouter le fichier : `/dist/patch/patch.module.js` **avant** `dsfr.module.js`
+Cette version permet d’effectuer la mesure d'audience sans dépendance au DSFR et peut fonctionner de manière autonome.
 
-Il est préférable d'effectuer une montée de version en 1.9.3 pour profiter des optimisations optimales.
+> **⚠️ Important :**
+> La mesure des actions n'est pas disponible dans cette version
 
-Analytics est un package à part, il n’est pas compris dans le fichier js global du dsfr.
-Le package dispose tout de même d’une dépendance au DSFR, notamment au core.
-Une version standalone des analytics permet d’utiliser ce package en dehors de toutes dépendances au DSFR.
+#### Pour aller plus loin
 
 Pour le fonctionnement du package Analytics, une configuration particulière du dsfr est nécessaire :
 [Configuration](installation/configuration.md)

src/analytics/standalone/api.js

@@ -1,14 +1,28 @@
-import api from '../api.js';
 import ns from '../../core/script/api/utilities/namespace';
-import { completeAssign } from '../../core/script/api/utilities/property/complete-assign';
-import { Modes } from '../../core/script/api/options/options.js';
+import { Modes } from '../../core/script/api/options/modes.js';
+import config from '../../core/config';
 
-api.inspector = completeAssign(console, {});
+const api = {};
+
+const hasLoggingLevel = (level) => api.internals.configuration.production !== true && (level > 1 || api.internals.configuration.verbose);
+
+api.inspector = {
+  log: (...msg) => hasLoggingLevel(0) ? console.log.apply(console, msg) : null,
+  debug: (...msg) => hasLoggingLevel(1) ? console.debug.apply(console, msg) : null,
+  info: (...msg) => hasLoggingLevel(2) ? console.info.apply(console, msg) : null,
+  warn: (...msg) => hasLoggingLevel(3) ? console.warn.apply(console, msg) : null,
+  error: (...msg) => hasLoggingLevel(4) ? console.error.apply(console, msg) : null
+};
+
+const configuration = window[config.namespace];
 
 api.internals = {
-  ns: ns
+  ns: ns,
+  configuration: configuration
 };
 
 api.Modes = Modes;
+api.mode = configuration.mode || Modes.AUTO;
 
+window[config.namespace] = api;
 export default api;

src/analytics/standalone/example/index.ejs

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">
     <title>Analytics standalone</title>
-    <link href="../component/connect/connect.standalone.css" rel="stylesheet" />
     <script>
       window['<%= namespace %>'] = {
         verbose: true,

src/core/script/api/api.js

@@ -1,5 +1,6 @@
 import state from './state.js';
-import options, { Modes } from './options/options.js';
+import options from './options/options.js';
+import { Modes } from './options/modes.js';
 import config from '../../config.js';
 import engine from './engine.js';
 import inspector from './inspect/inspector.js';

src/core/script/api/options/modes.js

@@ -0,0 +1,9 @@
+export const Modes = {
+  AUTO: 'auto',
+  MANUAL: 'manual',
+  RUNTIME: 'runtime',
+  LOADED: 'loaded',
+  VUE: 'vue',
+  ANGULAR: 'angular',
+  REACT: 'react'
+};

src/core/script/api/options/options.js

@@ -1,16 +1,7 @@
 import inspector from '../inspect/inspector.js';
 import { startAtDomContentLoaded, startAuto } from './starters.js';
 import config from '../../../config';
-
-export const Modes = {
-  AUTO: 'auto',
-  MANUAL: 'manual',
-  RUNTIME: 'runtime',
-  LOADED: 'loaded',
-  VUE: 'vue',
-  ANGULAR: 'angular',
-  REACT: 'react'
-};
+import { Modes } from './modes';
 
 class Options {
   constructor () {