Avancé

L'onglet Avancé regroupe les paramètres de suivi, de connexion à d'autres outils et de personnalisation. Seuls le propriétaire du compte et les admins le voient : les collaborateurs qui ont le rôle Membre n'y ont pas accès.

Remarque

Les options de suivi et de personnalisation de cette section nécessitent un plan Pro. La bannière de cookies est disponible sur tous les plans.

Clé API

Votre clé API est un code secret qui relie TinyPages à des outils d'automatisation externes comme Zapier ou Make. Elle vous permet de créer vos propres scénarios, par exemple ajouter automatiquement un contact à TinyPages lorsqu'une nouvelle ligne est ajoutée à un Google Sheet, ou envoyer un message Slack lorsque quelqu'un achète un produit.

Votre clé est déjà créée : elle s'affiche, en partie masquée, sous Clé API. Cliquez sur l'icône de copie à côté, puis collez-la dans l'outil que vous voulez connecter. Utiliser la clé directement dans des outils comme Zapier ou Make nécessite un plan Pro. La connexion à Claude ou ChatGPT reste gratuite sur tous les plans.

La documentation complète de l'API est disponible sur api.tinypages.dev/docs.

Régénérer votre clé

Régénérer votre clé coupe d'un coup tous les accès existants. C'est utile quand un membre quitte votre équipe, par exemple, ou si vous pensez que votre clé a été partagée par erreur.

1. Cliquez sur l'icône en forme de flèches circulaires à côté de votre clé.
2. Confirmez avec Régénérer la clé.

L'ancienne clé cesse de fonctionner immédiatement. Il vous faudra ensuite reconnecter Claude ou ChatGPT, et coller la nouvelle clé dans les outils qui utilisaient l'ancienne, comme Zapier ou Make.

Bannière de cookies

Si vos visiteurs sont en Europe, la loi (RGPD) vous demande d'obtenir leur accord avant de mesurer leurs visites avec Google Analytics ou de les suivre pour vos publicités. Dans la rubrique Cookies, activez Afficher la bannière de cookies et TinyPages s'en occupe sur toutes les pages de votre site.

Vos visiteurs voient alors une bannière en bas de l'écran avec trois choix : Tout accepter, Tout refuser ou Personnaliser. Personnaliser leur permet de choisir entre deux catégories, la mesure d'audience et la publicité. Les cookies indispensables au site (connexion à l'espace membre, paiement, formulaires) restent toujours actifs.

Tant qu'un visiteur n'a pas donné son accord, TinyPages met en attente les outils que vous avez ajoutés sur cette page :

• Google Analytics ne se charge qu'une fois la mesure d'audience acceptée.
• Facebook Pixel et ses événements (inscription, ajout au panier, achat) ne se chargent qu'une fois la publicité acceptée. Rien de sa visite n'est envoyé à Meta, ni depuis son navigateur, ni par l'API de conversions.
• Google Tag Manager se charge dès que le visiteur accepte l'une des deux catégories, et transmet son choix à vos balises (Google Consent Mode). Pour les balises d'autres réseaux présentes dans votre conteneur, réglez leurs conditions de consentement directement dans Tag Manager.

Le choix est gardé en mémoire pendant 6 mois, puis la bannière réapparaît. Une petite étiquette cookie en bas à droite de vos pages, à côté de « Built with TinyPages » quand il est affiché, permet au visiteur de changer d'avis à tout moment. S'il retire son accord, les cookies concernés sont supprimés et la page se recharge.

La bannière et l'étiquette s'affichent sur vos pages web, votre blog et vos formulaires. Elles n'apparaissent ni sur la page de commande ni dans l'espace membre, pour ne jamais cacher le bouton de paiement ou les leçons. Un visiteur qui arrive directement sur une page de commande sans avoir fait de choix (depuis un lien de paiement que vous avez partagé, par exemple) y est suivi normalement : la vente remonte bien à Meta et à Google. Un visiteur qui a refusé les cookies ailleurs sur votre site n'est jamais suivi, page de commande comprise.

TikTok, Pinterest et autres outils ajoutés dans le code personnalisé

Par défaut, les scripts collés dans Code personnalisé se chargent pour tous les visiteurs, quel que soit leur choix. Pour qu'un script attende l'accord du visiteur, ajoutez data-consent à sa balise <script> :

• data-consent="ads" pour les outils publicitaires comme TikTok, Pinterest, Snapchat, LinkedIn ou X
• data-consent="analytics" pour les outils de statistiques comme Hotjar ou Matomo

Prenons le pixel TikTok. Collez le code fourni par TikTok, puis ajoutez l'attribut dans la balise d'ouverture :

<script data-consent="ads">
  !function (w, d, t) { /* la suite du code copié depuis TikTok */ }(window, document, 'ttq');
</script>

Ce script ne se charge alors qu'une fois la publicité acceptée. Si le code contient plusieurs balises <script>, ajoutez l'attribut à chacune. Les scripts sans attribut, comme un compte à rebours ou un outil d'affiliation, continuent de se charger pour tout le monde. Pour le Pixel Facebook et Google Analytics, utilisez plutôt leurs champs dédiés ci-dessus : TinyPages s'en occupe pour vous, événements compris.

Attention

Si votre code personnalisé contient déjà un outil de cookies comme Cookiebot ou Axeptio, laissez ce réglage désactivé pour que vos visiteurs ne voient pas deux bannières.

Facebook Pixel

Connectez votre Pixel Meta pour que Facebook et Instagram voient ce qui se passe sur vos pages : qui les consulte, qui s'inscrit et qui achète. C'est ce retour qui permet à Meta de montrer vos publicités aux bonnes personnes et de mesurer les résultats réels de votre budget.

Deux champs sont à remplir, et chacun joue son rôle :

• ID du Pixel : il identifie votre pixel. Seul, il permet au navigateur du visiteur de signaler l'activité à Meta.
• Clé d'accès (API de conversions) : elle permet à TinyPages d'envoyer ces mêmes événements à Meta directement depuis ses serveurs, et pas seulement depuis le navigateur du visiteur. C'est ce qui rend le suivi des ventes fiable. Beaucoup de navigateurs (Safari sur iPhone, bloqueurs de publicité, cookies refusés) bloquent le signal côté navigateur, si bien que sans cette clé certains achats n'arrivent jamais jusqu'à Meta, alors que les vues de page, elles, remontent toujours.

Une fois les deux champs enregistrés, TinyPages déclenche pour vous ces événements Facebook standards :

• PageView quand une page est consultée
• Lead quand quelqu'un s'inscrit via un bloc Formulaire email sur vos pages (ou, si vous utilisez le double opt-in, quand il confirme son email)
• AddToCart quand une page de commande se charge
• Purchase quand un paiement est finalisé

Ajouter votre clé d'accès

1. Dans Meta Events Manager, allez dans « Datasets » et sélectionnez votre dataset (c'est ce que Meta appelle désormais votre pixel).
2. Ouvrez l'onglet « Settings », puis dans le menu de gauche ouvrez « Server-side » (côté serveur) et cliquez sur « Conversions API ».
3. Sous « Set up direct integration », cliquez sur « Generate access token », puis copiez la clé (elle commence par EAA).
4. De retour dans TinyPages, collez-le dans le champ Clé d'accès situé à côté de l'ID du Pixel, puis enregistrez.

Les vues remontent mais pas les ventes ?

C'est presque toujours que la clé d'accès est manquante. Avec seulement l'ID du Pixel, le suivi des achats dépend du navigateur du client, qui le bloque souvent. Ajoutez la clé d'accès de l'API de conversions en suivant les étapes ci-dessus pour que TinyPages signale chaque vente directement à Meta. Gardez aussi à l'esprit que Meta peut mettre quelques heures avant d'afficher un nouvel achat.

Google Tracking

Saisissez un Google Tag Manager ID ou un Google Analytics ID pour ajouter le suivi à l'ensemble de votre site. C'est la solution conseillée si vous voulez des statistiques plus détaillées que les compteurs de vues de TinyPages.

Code personnalisé

Collez ici le code à ajouter sur toutes les pages publiques de votre site : scripts de suivi d'autres outils, fenêtres de discussion (chat), polices personnalisées, petits ajustements de style avec un bloc <style>, ou tout autre code dont votre site a besoin sur toutes ses pages. Dans ce champ, TinyPages ne garde que quatre types de balises : <script>, <style>, <meta> et <link>. Tout le reste, comme une <div>, une <iframe> ou un bloc <noscript>, est ignoré sans message. Pour afficher quelque chose sur une page, ajoutez plutôt un bloc Code dans l'éditeur. Les balises <meta> et <link> sont placées dans le <head> de vos pages (pratique pour une balise de vérification de site), et les scripts se chargent une fois la page affichée. Si vous utilisez la bannière de cookies, voyez comment faire attendre l'accord du visiteur à un script.

Étaler un bloc Code sur toute la largeur de la fenêtre

Un bloc Code occupe normalement la colonne de la page (1080 px). Si l'un d'eux a besoin de toute la largeur de la fenêtre (un contenu intégré large, une carte, un tableau), vous pouvez le libérer depuis ce champ. Sur votre page publiée, faites un clic droit sur le bloc, choisissez Inspecter, puis copiez la valeur de son attribut data-node-id. Un bloc ajouté par Claude, ChatGPT ou l'API n'a pas de data-node-id : pour le cibler, ajoutez un nouveau bloc Code dans l'éditeur, collez-y le même code, puis supprimez l'ancien. Collez ensuite ceci en remplaçant XXXX par cette valeur :

<style>
.editor-theme:has(> .tp-custom-html[data-node-id="XXXX"]) { max-width: 100% !important; }
.tp-custom-html[data-node-id="XXXX"] {
  --wide-block-max-width: none;
  margin-inline: calc(-1 * var(--page-gutter));
}
</style>

Seul ce bloc s'étale. Le texte, les images et les autres blocs de la page gardent leur largeur habituelle, et la page ne défile jamais sur le côté. Pour libérer tous les blocs Code de votre site, retirez les deux [data-node-id="XXXX"].

Suivre les conversions de vos publicités

Si vous faites de la publicité sur X (Twitter), TikTok, LinkedIn ou une plateforme similaire, vous voulez qu'elle sache quand quelqu'un s'inscrit ou achète chez vous. C'est grâce à ce retour que chaque plateforme apprend à qui montrer vos publicités. TinyPages signale chacun de ces moments clés sur votre page, et il vous suffit de quelques lignes dans le champ Code personnalisé pour les relier à votre plateforme.

Une fonction intégrée, onTinyPagesEvent, est déjà disponible sur chacune de vos pages, vous n'avez donc rien à installer. Vous lui indiquez le moment à surveiller, et ce qu'il faut faire quand il se produit.

Vous pouvez réagir à trois moments :

Moment	Quand il se produit	Informations que vous recevez
lead	Un visiteur s'inscrit via un bloc Formulaire email (les formulaires créés dans Formulaires ne le déclenchent pas)	email, prénom, nom, téléphone
add_to_cart	Une page de commande s'ouvre	produit, montant, devise
purchase	Un paiement aboutit	email, produit, montant, devise, prénom, nom, téléphone

Le prénom, le nom et le téléphone ne sont remplis que si votre formulaire les demande. Si un formulaire ne collecte qu'un email, les autres champs restent vides, alors vérifiez toujours une valeur avant de l'utiliser.

Exemple : envoyer une inscription vers X (Twitter). Chargez d'abord votre pixel de base X (remplacez YOUR_PIXEL_ID par le vôtre), puis réagissez à l'inscription :

<!-- Votre pixel de base X (Twitter) -->
<script data-consent="ads">
!function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments)},s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='https://static.ads-twitter.com/uwt.js',a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script');
twq('config','YOUR_PIXEL_ID');
</script>

<!-- Envoyer la conversion quand quelqu'un s'inscrit -->
<script data-consent="ads">
onTinyPagesEvent('lead', function (lead) {
  twq('event', 'tw-xxxxx-xxxxx', {
    email_address: lead.email || undefined,
    phone_number: lead.phone || undefined,
  });
});
</script>

Chaque balise <script> porte data-consent="ads" : quand la bannière de cookies est activée, elle attend que le visiteur accepte la publicité (voir plus haut). Sans bannière, l'attribut ne change rien.

Exemple : suivre un achat.

<script data-consent="ads">
onTinyPagesEvent('purchase', function (order) {
  twq('event', 'tw-xxxxx-xxxxx', {
    value: order.value,
    currency: order.currency,
    email_address: order.email || undefined,
  });
});
</script>

Vous utilisez Google Tag Manager ? Les trois mêmes moments sont aussi envoyés dans votre couche de données (data layer) sous les noms tinypages_lead, tinypages_add_to_cart et tinypages_purchase. Créez un déclencheur de type Événement personnalisé pour chaque nom, puis lisez les détails avec des variables de couche de données sous tinypages, par exemple tinypages.email ou tinypages.value.

Supprimer votre compte

Tout en bas de l'onglet, Supprimer mon compte efface définitivement votre compte et toutes ses données. Cette action est irréversible, pensez à exporter ce que vous souhaitez conserver avant. Seul le propriétaire du compte voit cette option.