Ce guide explique comment afficher et interpréter les données de monitoring (statistiques réseau, CPU, RAM, etc.) d'un Serveur Cloud.

Surveiller l'activité d'un Serveur Cloud managé

Pour accéder au monitoring

1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
2. Cliquez directement sur le nom attribué au produit concerné.
3. Cliquez sur Monitoring dans le menu latéral gauche

Différentes données sont disponibles pour surveiller l'activité de vos Serveurs Cloud, dont notamment:

• le trafic entrant et sortant (réseau)
• la moyenne de la charge système (load average)
• la moyenne de la charge CPU
• la quantité de mémoire vive (RAM) utilisée
• l'espace disque utilisé
• le nombre de hits / sec.
• la moyenne des requêtes MySQL effectuées

Interpréter les statistiques

En interprétant le monitoring des ressources d'un Serveur Cloud vous pourrez estimer les ressources (la puissance) dont vous avez besoin pour faire fonctionner vos sites et applications Web.

Charge système totale

La charge système totale résume en pourcentage le niveau d'utilisation des processeurs virtuels. Dans cet exemple, le serveur utilise donc moins de 10% de ses ressources (0.10).

Processeur (CPU) et mémoire (RAM)

Ces graphiques montrent que moins de 10% des processeurs virtuels sont utilisés et que moins de 3 Go de RAM sont réellement exploités. Dans cet exemple, la configuration de ce serveur est donc surdimensionnée par rapport aux besoins réels.

Mémoire mise en cache élevée

La mémoire cache élevée sur un serveur n'est pas anormale et est souvent bénéfique dans de nombreux cas. Voici pourquoi :

1. Mise en cache pour des performances accrues : Les systèmes d'exploitation modernes, tels que Linux, utilisent la mémoire libre pour mettre en cache des données provenant du disque afin d'améliorer les performances. Lorsque vous accédez à des fichiers ou des applications, le système peut rapidement récupérer les données à partir du cache au lieu de les lire à partir de périphériques de stockage plus lents, tels que les disques durs. Cela contribue à réduire le temps de réponse global de votre serveur et peut améliorer considérablement les performances.
2. Utilisation efficace de la mémoire : Une utilisation élevée de la mémoire due à la mise en cache signifie que votre serveur utilise efficacement la mémoire disponible. La mémoire inutilisée est une mémoire gaspillée. Ainsi, tant que la mémoire est utilisée à des fins utiles comme la mise en cache, c'est un signe positif.
3. Gestion automatique de la mémoire : Les systèmes d'exploitation sont conçus pour ajuster automatiquement la taille du cache en fonction des besoins des applications en cours d'exécution. Si une application a besoin de plus de mémoire, le cache peut réduire sa taille pour l'accommoder. Cette gestion dynamique de la mémoire assure un équilibre entre la mise en cache et le service des applications actives.
4. Perspective de surveillance : Du point de vue de la surveillance, voir une utilisation élevée de la mémoire due au cache peut initialement susciter des inquiétudes, mais il est essentiel d'interpréter les mesures dans le contexte du comportement de votre serveur. Si vous constatez de bonnes performances et ne remarquez aucun signe de problèmes liés à la mémoire, tels que des échanges (swapping) ou des plantages d'applications, l'utilisation élevée du cache est probablement attendue et bénéfique.

En résumé, une mémoire cache élevée sur un serveur est normale et peut contribuer à améliorer les performances globales du système. Ne vous inquiétez pas si vous observez une utilisation importante de la mémoire cache, tant que votre serveur fonctionne correctement et sans problèmes évidents liés à la mémoire. La mise en cache est un outil essentiel pour optimiser les performances et tirer le meilleur parti des ressources disponibles.

Ce guide explique comment ajuster la configuration d'un site Node.js hébergé sur l'infrastructure Infomaniak. Vous apprendrez à adapter le comportement de votre application en fonction de son évolution, de ses dépendances ou de vos préférences techniques.

Prérequis

• Installer un site Node.js sur votre hébergement.
• Tester vos modifications en local avant de les appliquer en production.
• Vérifier que vos scripts (start, build) sont bien définis dans votre fichier package.json.
• Si vous modifiez la structure de votre projet, pensez à ajuster le dossier d'exécution et les commandes associées.
• Important : Le port d'écoute défini dans le Manager doit impérativement correspondre à celui utilisé dans le code de l'application.

Accéder à la configuration

Chaque site dispose d'un tableau de bord dédié pour contrôler l'application (start, stop, restart), consulter les logs d'exécution, gérer les versions de Node.js et activer les certificats SSL :

1. Cliquez ici afin d'accéder à la gestion de votre site sur le Manager Infomaniak (besoin d'aide ?).
2. Cliquez directement sur le nom attribué au site concerné.
3. Cliquez sur Gérer sous Paramètres avancés :
   
4. Cliquez sur l'onglet Node.js pour accéder aux réglages :
   

Commandes et automatisation

Dossier d'exécution

Le dossier d'exécution indique l'emplacement sur le serveur où seront exécutées les commandes de construction (build) et de lancement. Il doit pointer vers le répertoire racine de votre application, là où se trouve votre fichier package.json.

./          // Root directory
./app       // Subfolder named app
./backend   // Subfolder named backend

Commande de construction (Build)

Si votre application nécessite une étape de préparation (installation des dépendances, compilation TypeScript, minification), renseignez ici la commande à exécuter. C'est la méthode recommandée pour déployer vos mises à jour.

Contrairement à une exécution manuelle en SSH, cette interface utilise un environnement aux performances boostées pour garantir une construction rapide sans impacter les ressources de votre site en production. Vous pouvez y enchaîner plusieurs tâches (comme un git pull suivi d'un build) et suivre l'avancement ainsi que les logs du processus en temps réel directement depuis le Manager.

# Example: install dependencies and build
npm install && npm run build

# Example: update code and build with yarn
git pull && yarn install && yarn build

Note : Si votre projet est déjà compilé ou ne nécessite aucune étape intermédiaire, ce champ peut rester vide.

Commande de lancement

Cette instruction démarre votre serveur. Elle doit être identique à celle utilisée dans votre environnement de développement local pour lancer le point d'entrée de l'application.

# Option 1: Direct file launch
node index.js

# Option 2: Using npm script
npm start

# Option 3: Using yarn script
yarn start

Port d'écoute

Votre application doit impérativement écouter sur le port dynamique attribué par le Manager. Ce port est transmis à votre code via la variable d'environnement PORT.

// Use the port provided by the environment
const port = process.env.PORT || 8080;

app.listen(port, () => {
  console.log(`Application started on port ${port}`);
});

Version de Node.js

Vous pouvez sélectionner la version de Node.js souhaitée dans les réglages. Il est conseillé de privilégier une version stable (LTS) pour assurer la sécurité et la pérennité de votre projet.

Appliquer et valider les changements

Une fois vos modifications enregistrées dans le Manager, vous devez redémarrer votre application depuis le tableau de bord pour que les nouveaux paramètres (nouvelle version de Node, nouveau port ou nouvelle commande de build) soient pris en compte.

En cas de difficulté au démarrage, vous pouvez consulter la console d'exécution ou vous référer à cet autre guide pour un dépannage.

Ce guide présente plusieurs exemples d'utilisation de Varnish sur Serveur Cloud Infomaniak.

Préambule

• Consultez ces ressources complémentaires sur le langage de configuration Varnish (VCL) pour maîtriser le traitement des requêtes, le routage et la mise en cache :
  • VCL Tutorial
  • VCL user guide
  • VCL Reference

Configuration de Varnish

Une fois installé, la configuration de Varnish repose sur des règles précises de mise en cache et de purge. Veillez à restreindre l'accès pour éviter que des entités non autorisées puissent vider votre cache.

Voici un exemple de fichier de configuration regroupant les cas d'usage les plus fréquents :

vcl 4.0;

# Default backend configuration
backend default {
    .host = "127.0.0.80";  # Backend IP address
    .port = "80";           # Backend port
}

# Access Control List (ACL) for purge authorization
acl purge {
    "localhost";            # Local access
    "1.2.3.4";              # Trusted home IP
    "42.42.42.0"/24;        # Trusted company range
    ! "42.42.42.7";         # Specific IP exclusion (e.g., problematic user)
}

# Handle incoming requests
sub vcl_recv {
    # Handle PURGE requests
    if (req.method == "PURGE") {
        # Check if client IP is authorized
        if (!client.ip ~ purge) {
            return (synth(405, "IP not authorized for PURGE requests."));
        }
        return (purge);
    }

    # Custom PURGEALL for image directory
    if (req.method == "PURGEALL" && req.url == "/images") {
        if (!client.ip ~ purge) {
            return (synth(405, "IP not authorized for PURGEALL requests."));
        }
        # Invalidate all image-related objects in cache
        ban("req.url ~ \.(jpg|png|gif|svg)$");
        return (synth(200, "Images purged."));
    }

    # Bypass cache for authorized requests (e.g., admin panels)
    if (req.http.Authorization) {
        return (pass);
    }
}

# Handle backend responses before caching
sub vcl_backend_response {
    # Set TTL for images to 1 day
    if (beresp.http.content-type ~ "image") {
        set beresp.ttl = 1d;
    }

    # Respect backend's "uncacheable" instruction
    if (beresp.http.uncacheable) {
        set beresp.uncacheable = true;
    }
}

Purge via l'interface CLI

Dès lors que vos règles sont actives, vous pouvez tester la purge de votre site (ex: "domain.xyz") en utilisant l'outil curl :

# Purge the homepage
$ curl -X PURGE https://domain.xyz/

# Expected Varnish response
<!DOCTYPE html>
<html>
<head>
    <title>200 Purged</title>
</head>
<body>
    <h1>Success 200: Purge completed</h1>
    <p>The page has been successfully purged.</p>
    <h3>Guru Meditation:</h3>
    <p>XID: 2</p>
    <hr>
    <p>Varnish Cache Server</p>
</body>
</html>

Pour purger une URL spécifique, modifiez simplement le chemin de la requête :

# Purge a specific file
$ curl -X PURGE https://domain.xyz/some_path/some_file.html

# Expected Varnish response
<!DOCTYPE html>
<html>
<head>
    <title>200 Purged</title>
</head>
<body>
    <h1>Success 200: Purge completed</h1>
    <p>The file has been successfully purged.</p>
    <h3>Guru Meditation:</h3>
    <p>XID: 4</p>
    <hr>
    <p>Varnish Cache Server</p>
</body>
</html>

Ou pour déclencher la purge groupée des images définie dans le VCL :

# Execute PURGEALL for images
$ curl -X PURGEALL https://domain.xyz/images

# Expected Varnish response
<!DOCTYPE html>
<html>
<head>
    <title>200 Purged images</title>
</head>
<body>
    <h1>Success 200: Images purged</h1>
    <p>All images have been successfully purged.</p>
    <h3>Guru Meditation:</h3>
    <p>XID: 32770</p>
    <hr>
    <p>Varnish Cache Server</p>
</body>
</html>

Purge depuis un CMS (PHP)

La gestion du cache peut aussi se faire dynamiquement via votre backend. Dans la configuration précédente, nous avons ajouté un contrôle sur l'en-tête Uncacheable. Votre CMS peut envoyer cet en-tête pour forcer Varnish à ne pas stocker une réponse.

Voici comment envoyer une requête de purge programmatique en PHP :

<?php
// Initialize cURL for a specific URL
if ($curl = curl_init("http://127.0.0.1/some_url")) {
    curl_setopt_array($curl, [
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_CUSTOMREQUEST => "PURGE",
        CURLOPT_HTTPHEADER => [
            "Host: {$_SERVER['HTTP_HOST']}" // Match the target host
        ]
    ]);

    curl_exec($curl);
    
    // Check if the purge was successful (HTTP 200)
    if (curl_getinfo($curl, CURLINFO_HTTP_CODE) == 200) {
        echo "Cache purged!";
    }
    curl_close($curl);
}
?>

Ce guide explique comment consulter les informations sur les visiteurs ayant accédé aux sites de votre Hébergement Web (stats de fréquentation).

Préambule

• Le résultat est présenté dans un format simple avec graphiques, permettant une interprétation aisée.
• Les statistiques annuelles, mensuelles, journalières et horaires sont affichées par site, adresse HTTP, site de référence, pays, etc.
• Prenez connaissance de cet autre guide si vous recherchez spécifiquement les logs d'accès.

Accéder aux statistiques de visites

Pour consulter les statistiques de fréquentation du public :

1. Cliquez ici pour accéder à la gestion de votre site sur le Manager Infomaniak (besoin d'aide ?).
2. Cliquez directement sur le nom attribué au site concerné.
3. Cliquez sur Statistiques dans le menu latéral gauche :
   
4. La partie supérieure vous permet de choisir:
   1. le site,
   2. le type de statistiques,
   3. la période,
   4. ou de télécharger les données pour un outil tiers :
      

Explications des termes

Il n'y a pas de distinction entre humains et robots. Vous pouvez aussi utiliser des outils comme Matomo, Open Web Analytics ou Google Analytics.

Signification de "Commercial (com)" et "Unresolved"

"Commercial" représente souvent une part importante du trafic géographique. Il inclut les utilisateurs connectés via des fournisseurs d'accès (FAI) utilisant un domaine .com. Cette extension étant utilisée par de nombreux FAI et entreprises mondialement, elle ne permet pas de déterminer un pays précis.

Les "unresolved" sont des adresses IP non résolues géographiquement, souvent à cause de paramètres de confidentialité, de l'usage de VPN ou de restrictions réseaux.

Ce guide est destiné aux utilisateurs de Site Creator Infomaniak qui souhaitent optimiser le référencement de leur site.

Préambule

• Infomaniak est l'un des hébergeurs le plus performant du marché francophone, ce qui contribue au bon référencement de vos sites.
• En revanche, Infomaniak n'interviendra pas sur le contenu ou le développement des sites hébergés (prenez connaissance de cet autre guide concernant le référencement).

Ajouter Site Creator à Google

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Pour soumettre votre site au moteur de recherche Google:

1. Cliquez sur le bouton Applications dans le menu latéral gauche.
2. Cliquez sur l'application Ajouter à Google:
   

Cette application permet 2 opérations:

1. Ouvrir l'interface Google Search Console permettant la gestion des analyses de votre site:
   
2. Vous pouvez y insérer le code de vérification fourni par Google Search Console dans le cas où vous choisissez la méthode simple (lire ci-dessous):
   

Vérification de la propriété (demandée par Google)

Quand vous souhaitez ajouter votre site à l'outil Google, et que vous cliquez sur le bouton à l'étape 1 ci-dessus, il vous sera fait 2 propositions:

1. la méthode pour monitorer un domaine entier, qui requiert une vérification qu'il faudra faire au niveau de votre nom de domaine (sur l'interface Infomaniak si votre nom de domaine / zone DNS est géré par Infomaniak),
2. la méthode plus simple permettant d'indiquer l'URL précise de votre site et pour laquelle la vérification se fera directement depuis Site Creator:
   

1. Méthode avec vérification de la propriété du nom de domaine)

1. Entrez l'URL de votre Site Creator au complet et cliquez sur Continuer:
   
2. Vérifiez que le type TXT soit sélectionné et cliquez sur le bouton COPIER:
   
3. Cliquez ici afin d'accéder à la gestion de votre nom de domaine si celui-ci est géré auprès d'Infomaniak (sinon il faudra appliquer ces opérations chez le prestataire concerné).
4. Cliquez directement sur le nom attribué au produit concerné.
5. Cliquez sur Zone DNS dans le menu latéral gauche.
6. Cliquez sur le bouton pour ajouter un enregistrement:
   
7. Sélectionnez le type TXT dans la liste.
8. Cliquez sur le bouton Suivant:
   
9. Laissez ce champ vide ou entrez le terme venant avant votre nom de domaine si vous avez créé un site xxx.domain.xyz (dans cet exemple il s'agirait de rentrer visit dans le champ Source, puisque Site Creator est créé sur https://visit.exemple-domaine.ch).
10. Collez l'information récupérée au point 2 ci-dessus.
11. Cliquez sur le bouton pour Enregistrer:
    
12. Revenez sur l'outil Google et cliquez sur Vérifier (patientez quelques minutes si la vérification ne se fait pas):
    
13. Ca y est, le lien est établi entre votre Site Creator et la console d'analyse ; cliquez sur le bouton pour aller configurer la propriété:
    

2. Méthode simple

1. Entrez l'URL de votre Site Creator au complet et cliquez sur Continuer:
   
2. Cliquez sur le chevron ‍ pour développer la rubrique TAG HTML permettant d'obtenir l'information à coller dans Site Creator pour prouver son appartenance.
3. Cliquez sur le bouton COPIER:
   
4. Collez l'information dans la zone prévue à cet effet sur Site Creator.
5. Enregistrez les changements:
   
6. Revenez sur l'outil Google et cliquez sur Vérifier (patientez quelques minutes si la vérification ne se fait pas):
   
7. Ca y est, le lien est établi entre votre Site Creator et la console d'analyse ; cliquez sur le bouton pour aller configurer la propriété:
   

Définir les balises Meta

Une fois dans Site Creator:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur Paramètres généraux.
3. Cliquez sur SEO et métadonnées.
4. Insérez titre, description et mots clés du site entier:
   
   

C'est aussi ici que vous pouvez gérer le fichier robots.txt si nécessaire.

Pour définir ceci mais pour une page précise:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur Paramètres généraux.
3. Cliquez sur Paramètres de sous-page.
4. Cliquez sur SEO & Métadonnées.

Si vous n'intervenez pas sur cette page, c'est Site Creator qui gère dynamiquement vos balises.

Vous pouvez aussi gérer les URL de vos pages indépendamment du titre SEO de votre page (page nommée "Contact" côté SEO alors que son URL sera par exemple "/enterprise").

Quels "Meta Keywords" ?

Pour entrer plusieurs mots-clés, séparez-les par une virgule ou similaire:

Sitemap.xml

A ne pas confondre avec le module Plan du site, le fichier sitemap.xml liste toutes les pages de votre site pour aider les moteurs de recherche à les découvrir et à les indexer efficacement. Vous pouvez l'examiner pour comprendre la structure du site ; remplacez domain.xyz par votre nom de domaine pour y accéder (de façon publique) depuis un navigateur:

https://domain.xyz/sitemap.xml

Soumettez votre URL propre à Google Search Console (prenez connaissance du premier chapitre plus haut sur ce guide) et autres outils de webmasters pour améliorer l'indexation.

Insérer des codes traceurs

Votre site Web intègre un module Statistiques simple mais vous pouvez utiliser Google Analytics ou d'autres méthodes de tracking (comme Facebook Pixel, Google Tag...) qui nécessitent l'insertion d'un code sur votre site:

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur Paramètres généraux.
3. Cliquez sur SEO et statistiques.
4. Parcourez la page vers le bas et insérez vos codes pisteurs.

Ce guide explique comment enregistrer ou archiver l'intégralité de vos diffusions Streaming vidéo, ce qui peut être utile pour créer des replays TV ou revisionner les vidéos enregistrées par des caméras de surveillance par exemple.

Gérer l'enregistrement automatique des diffusions en direct

Pour activer cette option :

1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
2. Cliquez directement sur le nom attribué au produit concerné.
3. Activez l'enregistrement des directs par le bouton à bascule (toggle switch) depuis le tableau de bord du flux:
   

Une fois cette fonctionnalité activée, le flux sera automatiquement et perpétuellement enregistré à partir du moment qu'il est envoyé vers (ou tiré par) la plateforme d'Infomaniak.

Restez vigilant par rapport à votre espace FTP qui pourrait rapidement être saturé. En cas de besoin, vous avez également la possibilité de planifier manuellement des enregistrements depuis l'outil de planification.

Fonctionnement des enregistrement automatiques

Une fois cette option activée, un fichier mp4 sera automatiquement généré après chaque diffusion, lequel sera transféré vers l'espace FTP ou VOD configuré par vos soins.

Précisions importantes :

• Une diffusion est définie comme le moment entre la connexion et la déconnexion jusqu'à l'encodeur vidéo.
• Qualité des enregistrements : dans le cas d'un flux multi-bitrate, la qualité source maximum sera conservée.
• Limitation de la taille des fichiers : en cas de diffusion en continu, vous avez la possibilité de définir la durée maximum de chaque fichier mp4 ; cette option vous permet d'éviter de générer des fichiers trop lourds et de garantir l'enregistrement de vos archives vers l'espace FTP ou VOD de votre choix (et une fois la durée atteinte, l'enregistrement est automatiquement stoppé puis envoyé par FTP et un nouvel enregistrement est lancé).

Personnalisation des noms des enregistrements

Afin de vous permettre de facilement identifier et classer vos archives, le nom des enregistrements est personnalisable de manière dynamique à l'aide de paramètres spécifiés entre des accolades.

Exemple :

template_{stream_id}_{date|format:YYYY-MM-dd_hh:mm:ss}_{fragment_id|from:1|prefix:fragment_(|suffix:)}.{extension}

• stream_id = représente l'identifiant du flux sous forme d'une chaîne de caractères.
• date|format: ISO 8601 = date du jour de l'enregistrement.
• time|format: ISO 8601 = heure de l'enregistrement.
• datetime|format: ISO 8601 = date et heure de l'enregistrement.
• fragment_id|from:number|prefix:string|suffix:string: = numéro du fragment dans le cas où un enregistrement est découpé avec possibilité de le préfixer et/ou de le suffixer.
  • Chaque fragment sera incrémenté, "from" permettant d'indiquer quel sera le premier fragment de référence.
• extension = extension finale du fichier.

Ces paramètres et leurs options sont optionnels et leur ordre est totalement libre. Ils peuvent être utilisés autant de fois que souhaité. Si vous fournissez la même option plusieurs fois, seule la dernière sera prise en compte. Toute option non reconnue sera simplement ignorée.

Exemple 1

Situation : vous avez deux programmations quotidiennes, la première démarre à 10h00 et la seconde à 20h05. En configurant le nommage des fichiers de cette façon template_{date|format:hh:mm:ss} vous obtiendrez les noms de fichier suivants :

Pour la journée du 5 décembre 2019 :

• Le premier enregistrement à 10h00 s'appellera: template-10:00:00.mp4
• Le second enregistrement à 20h05 s'appellera: template-20:05:00.mp4

Pour la journée du 6 décembre 2019 :

• Le premier enregistrement à 10h00 s'appellera: template-10:00:00.mp4
  L'enregistrement de la veille du même nom sera écrasé et remplacé par celui-ci.
• Le second enregistrement à 20h05 s'appellera: template-20:05:00.mp4
  L'enregistrement de la veille du même nom sera écrasé et remplacé par celui-ci.
• etc.

Cette logique peut d'avérer particulièrement utile pour avoir un système d'enregistrement en boucle, par exemple pour une vidéo surveillance. L'utilisateur ira récupérer la vidéo uniquement en cas de besoin et cela évite d'archiver un nombre de vidéos potentiellement infini au risque de saturer l'espace FTP.

Exemple 2

Situation : vous avez cette fois un enregistrement perpétuel, 24h/7, avec une limitation de la durée des fichiers fixée à 360 minutes. En configurant le nommage des fichiers de cette façon template_{date|format:YYYY-MM-dd}_{fragment_id|from:1|prefix:fragment_(|suffix:)}.{extension} vous obtiendrez les noms de fichier suivants :

• Le premier fichier de la journée à 0h00 s'appellera: template_2019-02-05.mp4
• Le second fichier de la journée à 6h00 s'appellera: template_2019-02-05_fragment(1).mp4
• Le troisième fichier de la journée à 12h00 s'appellera: template_2019-02-05_fragment(2).mp4
• Le quatrième fichier de la journée à 18h00 s'appellera: template_2019-02-05_fragment(3).mp4

En configurant le nommage des fichiers de cette façon template_{date|format:YYYY-MM-dd}_{fragment_id|from:0|prefix:fragment_(|suffix:)}.{extension} vous obtiendrez les noms suivants :

• Le premier fichier de la journée à 0h00 s'appellera: template_2019-02-05_fragment(0).mp4
• Le second fichier de la journée à 6h00 s'appellera: template_2019-02-05_fragment(1).mp4
• Le troisième fichier de la journée à 12h00 s'appellera: template_2019-02-05_fragment(2).mp4
• Le quatrième fichier de la journée à 18h00 s'appellera: template_2019-02-05_fragment(3).mp4

Ce tutoriel présente la création de menus de navigation pour votre site réalisé avec Site Creator Infomaniak, ainsi que leur composition, styles et paramètres.

Prérequis

• Accéder à Site Creator :
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour lancer l'éditeur :
    

Les différents menus de navigation

Les différentes pages qui composent votre site peuvent être accessibles au sein d'un ou plusieurs menus de navigation :

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Par défaut la liste de vos pages apparaît, classées dans 2 rubriques principales : MAIN MENU et LEGAL :
   

Mais vous pouvez en ajouter plusieurs.

Ces menus avec les pages qu'ils contiennent sont ensuite repris à différents endroits de votre site, selon le thème choisi notamment:

• Vous trouverez souvent le menu principal placé en haut de page :
  
• et les autres menus seront automatiquement proposés dans le pied de page :
  

Gérer les menus

Ajouter un nouveau menu

Pour cela :

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Survolez un titre de menu dans l'arborescence existante.
3. Cliquez sur l'icône "+" qui apparait au survol :
   

Vous pourrez gérer la présence du menu dans le plan du site ou le supprimer (lui ainsi que toutes ses pages) :

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Survolez un titre de menu dans l'arborescence existante et cliquez sur l'icône de roue dentée qui apparait au survol :
   
3. Choisissez les réglages désirés et validez en bas de page :
   

Prenez connaissance de cet autre guide pour ne pas faire apparaitre de menu du tout.

Créer un sous-élément dans un menu

Pour cela :

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
   • La liste de vos pages apparaît.
2. Avec la souris déplacer une page légèrement vers la droite sous une autre page :
   
   • Elle deviendra une sous-page et votre menu sur le site pourra afficher l'arborescence ainsi créée :
     
   • Prenez également connaissance de l'astuce ci-dessous…

Titre du menu non cliquable

Choisissez si nécessaire de ne pas rendre cliquable le tout premier élément d'un menu avec élément de sous-menu (comme configuré ci-dessus) :

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur Paramètres généraux afin de modifier ce réglage sous Options sous-menu :
   

Élément de menu contenant un lien vers un autre site Web

Pour cela :

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
   • La liste de vos pages apparaît.
2. Cliquez sur le bouton Ajouter une page en dessous de l'arborescence existante :
   
3. Entrez un nom de page et cliquez sur Afficher plus d'options.
4. Choisissez la redirection d'URL pour spécifier la destination lors du clic :
   

Menu supérieur supplémentaire

Pour afficher une "barre de menu" tout en haut de votre page :

1. Cliquez sur le bouton Design dans le menu latéral gauche.
2. Cliquez sur Plus de paramètres.
3. Activez la Barre de menus d'en-tête :
   
4. Une fois activée vous pouvez la personnaliser grâce au lien Réglages au même endroit :
   

Styles de menu

Pour gérer les différents styles de menu :

1. Cliquez sur le bouton Design dans le menu latéral gauche.
2. Cliquez sur Éditeur de menu :
   
3. Puis sur Configuration :
   
4. Vous pourrez notamment décider de l'emplacement de vos menus (sur la gauche de la page ou placé en haut, fixe ou mobile, type "menu hamburger ☰" à droite ou normal, etc.) :
   

Changer la couleur du menu "hamburger" (☰)

Si ce bouton de menu à trois lignes horizontales ☰ apparait par exemple blanc sur blanc sur un appareil mobile :

1. Cliquez sur le bouton Design dans le menu latéral gauche.
2. Cliquez sur Éditeur de menu.
3. Cliquez sur Titre du menu / logo.
4. Ajustez la couleur du texte :
   

Adopter un nouveau thème de menu

Changez complètement de style prédéfini grâce aux thèmes tout en haut du sous-menu :

• Cliquez sur Modèles de menu (toujours sous Design, puis Éditeur de menu) :
  

Menu fixe

La plupart des menus proposés vont bouger avec le contenu de la page.

• Le menu disparait si on descend dans la page :
  
  
   
• Vous pouvez définir un menu qui devra toujours être fixé au bord supérieur (avec différentes options visuelles) :
  
  

Pour activer ou désactiver le menu fixe :

1. Cliquez sur Design.
2. Cliquez sur Éditeur de menu.
3. Cliquez sur Configuration principale.
4. Choisissez Dans l'en-tête dans l'encadré Type de menu.
5. Le bouton à bascule (toggle switch) Fixé au sommet s'affiche plus bas et vous pouvez l'activer.
6. Cliquez sur Enregistrer :
   

Certains modèles de menu (comme le #3 et le #16) appliquent directement les réglages optimaux pour un menu fixe.

Insérer vos menus dans le corps de la page

Un module Menu de sous-pages permet l'insertion de vos menus et sous-menus à n'importe quel endroit de votre page :

• Ajoutez l'élément depuis les Apps:
  

Le module plan du site affiche tous les menus et toutes vos pages dans un seul bloc.

Définir l'URL de la page

Par défaut si le nom de votre page est Contact alors l'URL pour l'atteindre sera www.domain.xyz/contact.

Si par la suite vous changez le nom de la page pour Hello alors l'URL sera www.domain.xyz/hello.

Pour définir l'URL personnalisée de la page sur laquelle vous vous trouvez :

1. Cliquez sur le bouton Réglages dans le menu latéral gauche.
2. Cliquez sur SEO & Métadonnées (sous Paramètres de cette sous-page).
3. Le premier champ en haut permet de définir l'adresse de la page. Tout espace sera transformé en trait d'union et les caractères spéciaux, accents, symboles, etc. sont à éviter :
   

Si des changements d'URL sont enregistrés en cours de création de site alors qu'un menu contient déjà un lien vers la page en question, il sera adapté de façon dynamique.

Ce guide concerne l'utilisation de l'outil Newsletter proposé par Infomaniak et détaille les différentes possibilités de création et rédaction de mailing ciblé aux abonnés figurant sur les listes de contacts au sein de l'outil.

Créer et envoyer une newsletter

Vos newsletters se gèrent depuis le menu latéral gauche intitulé "Campagnes" qui permet de voir vos précédents envois et d'en créer d'autres:

1. Cliquez ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
2. Cliquez sur le nom du domaine concerné dans le tableau qui s'affiche:
   
3. Cliquez sur Campagnes dans le menu latéral gauche.
4. Cliquez sur Créer une campagne:
   

1. Détails : configurer l'expédition

Pour commencer la rédaction de votre Newsletter, complétez les informations requises:

1. Entrez un sujet pour l'e-mail (visible par le destinataire et dans la liste de vos envois).
2. Insérez si nécessaire une émoticône.
3. Insérez si nécessaire des variables (champs personnalisés).
4. C'est exactement le même principe pour le message de prévisualisation / aperçu (que vous pouvez prévisualiser avec le reste du sujet sur la partie droite de la fenêtre).
   • Ensuite, pour que cet extrait soit visible une fois votre Newsletter arrivée chez un utilisateur de l'app Web Mail Infomaniak, il faut que celui-ci ait activé ce paramètre:
     
   • Sur Gmail c'est ce paramètre qu'il faut activer:
     
   • Le résultat une fois l'option activée:
     
   • Par défaut, ce sont les premières lignes du message qui apparaitront si rien n'est spécifié, ces 2 champs étant facultatifs.  
5. Entrez un nom correspondant à l'expéditeur (visible par le destinataire).
6. Entrez l'adresse mail de l'expéditeur (parmi celle existantes au niveau du domaine correspondant à la Newsletter ; l'adresse mail doit exister et être valable).
7. Choisissez la langue (pour la langue utilisée dans les envois annexes comme celui de la désinscription).
8. Activez ou désactivez le tracking.
9. Activez ou désactivez la partie UTM.
10. Cliquez sur Continuer pour passer à l'étape suivante (votre Newsletter est désormais sauvegardée en mode brouillon):
    

2. Choisir le thème de la Newsletter

1. Si vous avez précédemment sauvegardé des modèles de rédaction (blocs et designs configurés à votre goût) vous pouvez les retrouver sous l'onglet “Mes modèles” afin de les réutiliser.
2. Sinon cliquez sur l'onglet des modèles.
3. Survolez un design pré-configuré pour démarrer l'édition à partir de ce modèle ou le prévisualiser.
4. Cliquez sur le modèle vierge pour débuter une toute nouvelle création à partir de l'éditeur de blocs:
   

3. Rédiger et éditer le contenu

1. En tout temps, vos modifications sont sauvegardées et peuvent être annulées ; vous pouvez également prévisualiser le rendu (desktop / mobile) de votre Newsletter (et envoyer un test).
2. L'onglet Sections regroupe différents éléments pré-construits, comme des blocs destinés à la partie supérieure (en-tête / header) ou inférieure (pied de page (footer), etc.
3. Cliquez sur le chevron ‍‍  pour développer le contenu et sélectionner un élément:
   
4. Cliquez sur l'onglet Blocs pour obtenir des éléments plus simples que vous pourrez utiliser pour la composition de votre mise en page.
5. Glissez les éléments choisis dans la partie latérale droite à l'endroit désiré:
   
6. Chaque élément peut encore être ajusté quand vous cliquez dessus:
   1. Le texte peut être mis en forme grâce à la barre d'outil qui apparait au-dessus (des variables peuvent également être insérées).
   2. L'édition plus globale de l'élément se trouvera toujours dans le panneau latéral gauche (couleur de fond, sélection du fichier (5 Mo max.) pour les blocs image, etc.)
   3. Le bloc lui-même peut-être déplacé sur la page, dupliqué ou supprimé:
      
7. Cliquez sur Styles pour administrer les caractéristiques qui composent vos différents éléments.
8. Choisissez vos éléments à personnaliser.
9. Ajoutez par exemple une bordure au style des boutons.
10. Toutes les nouvelles insertions de boutons et tous les boutons existants sans personnalisation seront affectés par la modification:
    
11. En tout temps, il est possible d'attribuer le style qui a été décidé pour les différents éléments (point 8 ci-dessus) en appliquant le style par défaut aux éléments ayant été personnalisés auparavant:
    
12. Au moment de sauvegarder, s'il manque les informations obligatoires au sujet de la désinscription de l'utilisateur, celles-ci seront ajoutées à votre contenu:
    
13. Il est possible de sauvegarder votre modèle afin de le réutiliser lors d'autres rédactions de Newsletter (le modèle sera visible sous l'onglet dédié, lire point 2.1 ci-dessus) en cliquant sur le chevron ‍ à droite du bouton d'enregistrement:
    
14. Cliquez sur le bouton d'enregistrement en haut à droite lorsque vous avez terminé la rédaction de votre Newsletter.

4. Choix des destinataires

Pour sélectionner vos abonnés (mode simple):

1. Sélectionnez tous les d'abonnés en cochant la case.
2. Le nombre total d'abonnés représenté par cet élément est affiché à droite, idem pour les éléments développés ci-dessous).
3. Vous pouvez soustraire au nombre total de destinataires des abonnés automatiquement sélectionnés en fonction de critères que vous avez pré-établi au niveau de la segmentation ; vous pourriez aussi ne sélectionner que cette segmentation.
4. Vous pouvez soustraire au nombre total de destinataires des abonnés groupés ; vous pourriez aussi ne sélectionner que ce groupe.
5. Le nombre total d'abonnés à qui la Newsletter sera envoyée est automatiquement mis à jour en fonction de vos choix:
   

Pour effectuer une sélection des destinataires en fonction de certains critères (prenez connaissance de cet autre guide):

1. Cliquez sur l'onglet Avancé:
   

Celui-ci permet d'ajouter des critères (attention si vous en ajoutez plusieurs, la condition supplémentaire peut se trouver avec “ET” mais également avec “OU” ce qui peut inclure ou exclure un grand nombre d'abonnés en fonction de vos critères).

Comme pour l'onglet précédent, le nombre total des destinataires est mis à jour en bas de page de façon dynamique en fonction de vos choix.

5. Prévisualiser et tester l'envoi

Cette avant-dernière étape est récapitulative: elle permet de vérifier les principales caractéristiques de votre envoi et de modifier d'éventuelles informations en dernière minute.

Lorsque vous êtes prêt, cliquez sur le bouton bleu en bas à droite pour continuer vers la dernière étape.

6. Déclencher un envoi immédiat ou retardé

La dernière étape vous permet de choisir le moment où envoyer votre Newsletter:

• L'envoi peut être programmé pour l'heure désirée, ou déclenché immédiatement:
  

Ce guide vous aide à identifier et corriger la plupart des erreurs de messagerie rencontrées après l'envoi d'un e-mail à un destinataire. Prenez connaissance de cet autre guide si vous recherchez des informations au sujet d'erreurs obtenues lors de la configuration d'une adresse mail dans un logiciel/client de messagerie.

Préambule

• En général, un message d'erreur au niveau de la messagerie fait suite à…
  • … une mauvaise configuration du nom de domaine utilisé avec votre messagerie,
  • … un problème chez (le fournisseur mail de) votre destinataire.
• Dans tous les cas, un rapport d'échec de livraison (Mailer Daemon ou Mail Delivery Subsystem) contenant l'explication est envoyé à l'expéditeur.

Chercher et identifier l'erreur mail

Lorsque votre message ne parvient pas à votre destinataire, un premier rapport d'échec (Temporary Delivery Failure Report) est envoyé et spécifie que le serveur va tenter de renvoyer votre message plusieurs fois.

Un rapport de non-remise finale (Final Delivery Failure Report ou Undeliverable Mail) émis par le serveur du correspondant est envoyé à l'expéditeur (via un passage par le serveur de mail Infomaniak, d'où la mention d'Infomaniak au début de la plupart des messages d'erreur que vous pouvez recevoir) pour l'informer que l'e-mail n'a pas pu être livré même après plusieurs tentatives.

La notification contient toujours la raison de l'échec. Exemple ci-dessous:

This is the mail system at host smtp-1-1234.mail.infomaniak.ch.
I'm sorry to have to inform you that your message could not be delivered to one or more recipients. It's attached below.
For further assistance, please send mail to postmaster.
If you do so, please include this problem report. You can delete your own text from the attached returned message.
The mail system anna.a@abc.xyz: host mxbw-abc-xyz.abc-ab12.abc.ch[123.456.789.00] said: 550 5.1.1
anna.a@abc.xyz recipient rejected, account administratively disabled (in reply to RCPT TO command) 

Donc ici l'adresse de votre correspondant est visiblement suspendue par son fournisseur de messagerie (account administratively disabled).

Parfois il faut chercher la raison du message d'erreur reçu parmi ses pièces jointes (souvent un fichier texte brut). Exemple:

Reporting-MTA: dns; mxbw.abc.ch‍ [123.456.789.00]
Received-From-MTA: dns; smtp-1-1234.mail.infomaniak.ch [12.345.678.99]
Arrival-Date: Tue, 01 Aug 2023 15:49:22 +0200
Final-recipient: rfc822; anna.a@abc.xyz
Diagnostic-Code: smtp; 552 RCPT TO:anna.a@abc.xyz‍ Mailbox disk quota exceeded
Last-attempt-Date: Tue, 01 Aug 2023 15:49:22 +0200

Ici la boite mail de votre correspondant externe à Infomaniak semble pleine (Mailbox disk quota exceeded).

Cas les plus courants

SPF Failure

L'enregistrement SPF (Sender Policy Framework) n'est pas correctement configuré:

Subject: Delivery Status Notification (Failure)
From: Mail Delivery System mailer-daemon@domain.xyz
To: Anna.A anna.a@abc.xyz
This is an automatically generated Delivery Status Notification.
Delivery to the following recipient failed due to SPF failure:
anna.a@abc.xyz
Technical details of SPF failure:
The sender's domain domain.xyz does not have a valid SPF record. Please contact your email administrator to correct the SPF configuration.

Solution: vérifiez la configuration de votre nom de domaine et notamment l'enregistrement de type SPF si votre site Web est hébergé chez Wix ou un autre fournisseur.

User Unknown

L'adresse e-mail spécifiée dans le message est invalide ou n'existe pas:

Subject: Delivery Status Notification (Failure)
From: Mail Delivery System mailer-daemon@domain.xyz
To: Anna.A anna.a@abc.xyz
This is an automatically generated Delivery Status Notification.
Delivery to the following recipient failed permanently:
anna.a@abc.xyz
Technical details of permanent failure:
The email address does not exist. Please check the recipient's email address and try again.

Solution: vérifiez soigneusement l'adresse mail du destinataire et corrigez-la si nécessaire ; assurez-vous d'utiliser une adresse mail valide pour le destinataire.

Temporary Failure

Le serveur de messagerie du destinataire rencontre des problèmes temporaires ou est indisponible.

Solution: attendez un certain temps, puis réessayez d'envoyer le message ultérieurement. Si le problème persiste, contactez le support technique du destinataire pour obtenir de l'aide.

Blocked by SPAM Filter (ou Content Rejected)

Le serveur de messagerie du destinataire a bloqué le message en raison de règles de filtrage anti-spam:

Subject: Delivery Status Notification (Failure)
From: Mail Delivery System mailer-daemon@domain.xyz
To: Anna.A anna.a@domain.xyz
This is an automatically generated Delivery Status Notification.
Delivery to the following recipient failed due to the message being rejected as spam:
anna.a@domain.xyz
Technical details of delivery failure:
The content of the message triggered the spam filters of the recipient's email server. Please review the message content and try again.

Solution: vérifiez si votre message contient des éléments susceptibles d'être considérés comme du spam (mots-clés, liens suspects, etc.). Contactez le destinataire pour vérifier si le message a été filtré dans le dossier des envois indésirables.

Prenez connaissance de cet autre guide au sujet du spam sortant et cet autre guide au sujet du spam entrant.

Bad Reputation

Le serveur de messagerie du destinataire a bloqué le message en raison de règles de filtrage anti-spam:

gmail-smtp-in.l.google.com said: 550-5.7.1
Our system has detected that this message is likely suspicious due to the very low reputation of the sending domain.
To best protect our users from spam, the message has been blocked.
Please visit https://support.google.com/mail/answer/188131 for more information.

Solution: vérifiez la réputation du domaine, déterminez s'il n'y a pas eu récemment une exploitation involontaire de l'une de vos adresses mail à des fins malveillantes par exemple.

Domain Not Found (ou DNS Error)

Le nom de domaine du destinataire n'a pas pu être résolu ou n'existe pas.

Solution: vérifiez l'orthographe du domaine du destinataire et corrigez-la si nécessaire ; assurez-vous que le nom de domaine et les DNS sont valides et actifs.

Mailbox Full

La boîte de réception du destinataire est pleine, empêchant la réception de nouveaux messages.

Solution: informez le destinataire de la situation et demandez-lui de libérer de l'espace en supprimant des e-mails ou en archivant des éléments.

Cela ne peut pas arriver avec des adresses mail gérées par Infomaniak puisque celles-ci n'ont pas de limite de taille de stockage.

Part of their network is on our block list

Si le message d'erreur (obtenu en principe à la suite d'un envoi effectué depuis un outil en ligne, placé sur le serveur où se trouve votre site Web, par exemple une confirmation de commande du Prestashop ou autre boutique en ligne que vous gérez) contient ceci:

host hotmail-com.olc.protection.outlook.com[104.47.30.97] said: 550 5.7.1
Unfortunately, messages from [89.123.456.789] weren't sent. Please contact your Internet service provider since part of their network is on our block list.

Solution: changez la méthode d'envoi des e-mails. L'envoi est non authentifié et part depuis le serveur avec une adresse IP précise qui est apparemment bloquée chez le destinataire pour une quelconque raison (Infomaniak n'intervient pas pour demander un déblocage). Il faut donc configurer l'outil en ligne pour effectuer des envois authentifiés.

Erreurs moins fréquentes

Deferred - Delayed

Le message d'erreur Deferred - Delayed - Warning: message still undelivered after 4 hours, Will keep trying until message is 3 days old signifie que le serveur de messagerie Infomaniak a essayé de se connecter au serveur de messagerie de votre correspondant pour envoyer le message mais que pour une raison indéterminée il n'y est pas parvenu. Ce message d'erreur précise que le serveur Infomaniak continuera d'essayer d'envoyer votre message pendant la période spécifiée dans le message d'erreur. Si, passé ce délai le message n'a toujours pas été distribué, vous recevrez un dernier message d'erreur vous précisant que votre message n'a finalement pas pu être distribué et que votre correspondant ne l'a donc pas reçu.

Greylisting Delay

Cette erreur Greylisting Delay se produit lorsque le serveur de messagerie de votre destinataire utilise, comme Infomaniak, une technique appelée "greylisting" qui impose un délai temporaire lors de la première tentative de livraison d'un message provenant d'un expéditeur inconnu. Le Mailer Daemon peut éventuellement envoyer un rapport d'erreur indiquant que la livraison a été retardée en raison du greylisting. L'erreur peut également mentionner banned sender. Il faut retenter votre envoi quelques minutes/heures plus tard.

Malware message rejected

Cette erreur Malware message rejectedse produit lorsque le message contient une pièce jointe, un lien vers un site de stockage type Dropbox ou du contenu dynamique y compris dans la partie "transmise" du message (dans le cas d'un "forward" de message par exemple). Il faut essayer de renvoyer le message depuis l'app Web Mail Infomaniak (service en ligne ksuite.infomaniak.com/mail) au lieu d'une application de messagerie, et d'éliminer tout contenu susceptible de provoquer cette erreur.

Message Size Exceeded / File Too Large

Ces erreurs Message Size Exceeded / File Too Largese produisent lorsque la taille du message (ou des pièces jointes) dépasse la limite autorisée par le serveur de messagerie du destinataire. Le Mailer Daemon renverra un rapport d'erreur indiquant que la livraison a échoué en raison du dépassement de la taille du message.

Rate Limit Exceeded

Cette erreur Rate Limit Exceeded se produit lorsque l'expéditeur a dépassé la limite de fréquence ou de volume autorisée par le serveur de messagerie du destinataire. Les serveurs de messagerie peuvent imposer des limites pour prévenir le spam ou la surcharge du système.

Sender denied: auth guards failed

Prenez connaissance de cet autre guide si vous rencontrez une erreur Sender denied: auth guards failed.

The message contains a unicode character in a disallowed header

Cette erreur The message contains a unicode character in a disallowed header peut apparaitre si vous avez inséré un caractère spécial comme un cœur ♥ par exemple dans le corps du mail, le sujet ou surtout dans le nom complet ; le risque d'être refusé par les fournisseurs est très élevé: il faut rester le plus simple possible dans l'emploi des signes, caractères et polices.