Recherche
Effacer la recherche
Fermer la recherche
Applications Google
Menu principal

Créer des annonces Gmail avec du code HTML personnalisé

Si vous êtes un annonceur expérimenté, vous pouvez créer des annonces différentes des modèles d'annonces Gmail existants avec du code HTML personnalisé. Vous pouvez y inclure des vidéos et plusieurs incitations à l'action. Pour créer des annonces Gmail avec votre propre mise en page, importez vos fichiers HTML personnalisés dans AdWords. 

Cet article explique comment configurer et importer vos annonces Gmail personnalisées.

Avant de commencer

Important : Gardez à l'esprit que les annonces Gmail HTML personnalisées utilisent l'URL de destination, et sont incompatibles avec les URL finales et les modèles de suivi. En savoir plus sur les URL mises à jour

 

Identifiez l'interface AdWords que vous utilisez. En savoir plus

Instructions

Une annonce Gmail HTML personnalisée correspond à un dossier ZIP contenant tous les fichiers pour l'annonce réduite et développée. Pour éviter tout problème, veuillez tenir compte des spécifications de mise en forme strictes détaillées ci-dessous.

Limites globales relatives à l'annonce :

  • Taille maximale du dossier ZIP : 1,25 Mo
  • Nombre maximal de fichiers : 100
  • Taille maximale des fichiers : 500 Ko

Comment créer votre annonce réduite ?

Pour votre annonce réduite, ajoutez deux fichiers à votre dossier ZIP :

  • Image du logo (nommée "logo.png", "logo.jpg" ou "logo.gif")
  • Fichier texte (nommé "teaser.txt")

Spécifications relatives à l'image du logo

Le fichier doit être nommé exactement "logo.png", "logo.jpg" ou "logo.gif", et le fichier doit être au format PNG, JPG ou GIF.

  • Taille maximale de l'image du logo : 144 x 144 pixels
  • Taille maximale du fichier : 500 Ko
  • Formats de fichier : PNG, JPG ou GIF (sans animation)

L'image du logo correspond à une petite icône, un graphique ou un logo de marque.

L'image s'affiche sous la forme d'un carré de 50 x 50 pixels sur les appareils à résolution normale, voire jusqu'à 144 x 144 pixels sur certains écrans pour une image plus nette. 

Spécifications relatives au fichier texte

Le fichier doit être nommé exactement "teaser.txt" et être au format TXT. Voici un exemple d'un fichier texte correctement mis en forme :

Advertiser: nom de l'entreprise
Subject: 20 % de réduction sur tous les produits Nom de l'entreprise
Description: Achetez des produits neufs à prix réduit !
Display URL: www.example.com
Landing Page: https://www.example.com/sale 

Remarque : Suivez précisément l'exemple. Veillez à inclure à la fois la catégorie (comme "Annonceur") et vos informations spécifiques. Le tableau ci-dessous indique les limites du nombre de caractères et contient des conseils supplémentaires sur les éléments à inclure.

  Limite du nombre de caractères Éléments à inclure
Annonceur 20 Nom ou domaine de votre entreprise
Subject 25 Titre (peut inclure une offre, un pourcentage de remise ou une annonce très attractive)
Description 100 Brève description ou incitation à l'action
Display URL 32 URL telle qu'elle apparaîtra dans l'annonce
Landing page Aucune limite URL de redirection de l'accroche (utilisée comme URL de destination pour les clics sur l'"URL affichée courte de l'expéditeur" lors de l'ouverture de l'annonce développée). Vous pouvez ajouter une URL statique de suivi des clics dans ce champ. Il s'agit de la page à laquelle les internautes accèdent lorsqu'ils cliquent sur votre URL à afficher.

 

Créer une annonce développée

Pour votre annonce développée, vous devez ajouter un fichier HTML et un dossier d'images à votre dossier ZIP :

  • Dossier d'images (nommé "Images") contenant les fichiers image pour l'annonce développée
  • Fichier HTML (nommé exactement "index.html")

Spécifications relatives au dossier d'images

  • Votre annonce doit contenir au moins une image (100 au maximum). Pour intégrer des vidéos dans votre annonce développée, accédez à la section correspondante ci-dessous.
  • Largeur maximale par image : 650 pixels
  • Hauteur maximale par image : 1 000 pixels (Remarque : pour une efficacité optimale, nous recommandons de ne pas dépasser 650 pixels pour l'ensemble de l'annonce, incluant l'intégralité du texte et des images.)

Spécifications relatives au fichier HTML

Spécificités techniques

  • URL : le fichier doit contenir au moins une URL absolue (15 au maximum), et tous les caractères spéciaux doivent être encodés (par exemple, les espaces et signes #).
  • Mise en forme : contrôlez la mise en page à l'aide des tables HTML standards afin d'assurer une présentation cohérente sur l'ensemble des appareils.
  • Suivi : vous pouvez utiliser des URL de suivi statiques pour le suivi des clics externes. Vous n'êtes pas autorisé à utiliser des pixels de suivi des impressions ni des URL de suivi dynamiques. Si vous utilisez le modèle "Annonce Gmail HTML personnalisée", assurez-vous d'ajouter les URL de suivi que vous souhaitez utiliser dans le fichier index.html, ainsi que dans le fichier teaser.txt.
  • Balisage : les balises HTML (utiliser l'encodage UTF8), certaines balises HTML5 ("ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME", "WBR") et certaines propriétés CSS (seulement pour les attributs de style, par exemple : <div style="color: black" >) sont acceptées.

Balisage non autorisé

  • Javascript : les balises <script> sont automatiquement supprimées de l'annonce.
  • Feuilles de style : les balises <link> sont automatiquement supprimées de l'annonce.
  • Flash
  • HTML5 : seules les balises "ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME" et "WBR" sont acceptées.
  • Audio
  • iFrame
  • Images animées : GIF

Propriétés CSS acceptées

azimuth border-right-color font-size-adjust list-style padding-bottom text-decoration-style
arrière-plan border-right-style font-stretch list-style-image padding-left text-emphasis
background-attachment border-right-width font-style list-style-position padding-right text-emphasis-color
background-blend-mode border-spacing font-synthesis list-style-type padding-top text-emphasis-style
background-clip border-style font-variant margin pause text-indent
background-color border-top font-variant-alternatives margin-bottom pause-after text-justify
background-image border-top-color font-variant-caps margin-left pause-before text-kashida-space
background-origin border-top-left-radius font-variant-east-asian margin-right pitch text-orientation
background-position border-top-right-radius font-variant-ligatures margin-top pitch-range text-overflow
background-repeat border-top-style font-variant-numeric marker-offset quotes text-transform
background-size border-top-width font-weight max-height richness text-underline-position
border border-width height max-width speak unicode-bidi
border-bottom box-sizing image-orientation min-height speak-header vertical-align
border-bottom-color caption-side image-resolution min-width speak-numeral voice-family
border-bottom-left-radius clear ime-mode mix-blend-mode speak-punctuation white-space
border-bottom-right-radius color isolation object-fit speech-rate width
border-bottom-style direction layout-flow object-position stress word-break
border-bottom-width display layout-grid opacity table-layout word-spacing
border-collapse elevation layout-grid-char outline text-align word-wrap
border-color empty-cells layout-grid-char-spacing outline-color text-align-last writing-mode
border-left nombre décimal layout-grid-line outline-style text-autospace zoom
border-left-color font layout-grid-mode outline-width text-combine-upright  
border-left-style font-family layout-grid-type overflow text-decoration  
border-left-width font-feature-settings letter-spacing overflow-x text-decoration-color  
border-radius font-kerning line-break overflow-y text-decoration-line  
border-right font-size line-height padding text-decoration-skip  

Ajouter une vidéo au fichier HTML de l'annonce développée

  1. Comment ajouter une vidéo ?

    Vous pouvez intégrer une vidéo YouTube dans une annonce, avec une fenêtre de prévisualisation. Sur un ordinateur, lorsqu'un internaute clique sur l'image de la vidéo, celle-ci est lue en mode Lightbox dans Gmail. Une fois le visionnage terminé, l'utilisateur est redirigé vers l'annonce Gmail développée. Sur un appareil mobile, la vidéo est lue sur le lecteur vidéo désigné de la personne (tel que l'application YouTube ou un navigateur). 

    Instructions : Pour intégrer une vidéo YouTube, ajoutez le code du lien YouTube, de la source de l'image et du texte affiché en les adaptant à votre annonce. Par exemple :

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0"><img src="images/play.jpg" alt="Vidéo Gmail"></a>

    Remarque : Lorsque vous prévisualisez l'annonce dans AdWords, la vidéo YouTube ne s'affiche pas ou n'est pas lue en mode Lightbox.

  2. Comment ajouter une vidéo dans un nouvel onglet ?

    Si vous souhaitez que la vidéo soit lue dans un nouvel onglet sur YouTube plutôt qu'en mode Lightbox, définissez la classe "nonplayable".

    Par exemple :

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" class="nonplayable"><img src="images/play.jpg" alt="Vidéo Gmail"></a>

  3. Important : Incluez un bouton de lecture dans votre image d'aperçu

    Pour montrer aux utilisateurs que le fait de cliquer sur l'image entraînera la lecture d'une vidéo, votre image d'aperçu doit contenir un bouton de lecture. AdWords n'ajoute rien aux images d'aperçu pour indiquer qu'il s'agit de vidéos.

  4. Comment supprimer des vidéos intégrées les informations affichées en superposition sur une annonce ?

    Dans le compte hôte YouTube, vous pouvez désactiver l'affichage d'annonces en superposition de vos vidéos. En savoir plus

Ajouter un formulaire intégré au fichier HTML de l'annonce développée

Remarque : Cette fonctionnalité n'est disponible que pour les clients qui ont été ajoutés à la liste blanche. 

L'ajout de formulaires HTML dans les annonces Gmail permet de réduire le nombre d'étapes avant la conversion. Créez le formulaire à l'aide du code HTML et des propriétés CSS acceptées. Les champs que vous utilisez doivent uniquement provenir de la liste des champs de formulaire autorisés ci-dessous.

Problèmes de confidentialité

Si un formulaire est intégré à l'annonce, vous devez inclure un lien vers vos règles de confidentialité et respecter le Règlement AdWords relatif à la collecte et à l'utilisation irresponsables de données.

Toutes les informations saisies dans les formulaires vous seront transmises directement à l'aide de la méthode GET ou POST. Rien n'est transmis via les serveurs Google ni enregistré sur ces serveurs. Vous êtes responsable du traitement des données.

Lorsque vous créez des formulaires dans vos annonces HTML personnalisées, n'oubliez pas que les utilisateurs hésiteront peut-être à partager certaines informations ou seront peu disposés à le faire, notamment lorsqu'ils soumettent des informations en dehors de votre site Web.

Avant de créer un formulaire HTML, posez-vous les questions suivantes :

  • Les informations que vous demandez sont-elles inutiles dans le cadre d'une proposition d'offre pertinente à l'utilisateur ?
  • Si les informations tombaient entre de mauvaises mains, pourraient-elles être utilisées pour nuire à l'utilisateur ?

Si vous avez répondu "oui" à l'une de ces questions, il n'est sans doute pas judicieux d'inclure un formulaire HTML dans votre annonce.

Étape 1. Créez votre formulaire

Vous trouverez ci-après des champs autorisés dans les formulaires HTML pour les annonces Gmail.

Informations générales Champs de formulaire autorisés
Catégorie Nom (prénom, nom de famille)
Adresse
Ville
État
Code postal
Pays
Adresse e-mail
Numéro de téléphone
Tranche d'âge
Entre 13 et 18 ans
Entre 18 et 24 ans
Entre 25 et 34 ans
Entre 35 et 44 ans
Entre 45 et 54 ans
Entre 55 et 64 ans
65 ans ou plus
Sexe
Heure d'appel souhaitée
Programme ou produit d'intérêt
Éducation Année d'obtention du diplôme
Niveau d'éducation atteint
Annonces classées et locales Zone géographique souhaitée pour le service recherché
Type de service
Finance/assurance
Plages pour les champs en euros :
0 - 14 999
15 000 - 24 999
25 000 - 39 999
40 000 - 59 999
60 000 - 74 999
75 000 - 99 999
Plus de 100 000
Montant du prêt (plage de valeurs)
Devise
Type de financement (prêt, prêt immobilier, carte de paiement)
Revenus du foyer (plage de valeurs)
Actifs investissables (plage de valeurs)
Montant de couverture d'assurance vie (plage de valeurs)
Membre du corps militaire
Propriétaire ou locataire (auto, logement, etc.)
Évaluez votre crédit
très médiocre
médiocre
assez satisfaisant
bien
excellent
Quelle est la valeur de votre logement ? (plage de valeurs)
Automobile Marque et modèle de la voiture
Voyages Origine ou destination
Date de départ/retour
B2B Entreprise
Métier
Fonction
Nombre de salariés
1-10
10-50
50-100
100-500
Plus de 500

Étape 2. Ajoutez des validations de formulaire

Pour garantir que les internautes saisissent des informations valides, vous pouvez ajouter les validations de formulaire suivantes.

Saisie obligatoire : Pour vous assurer qu'un champ de saisie n'est pas laissé vide, ajoutez "required". <input required type="text" size="25">
Saisie du numéro de téléphone* : Pour vous assurer que le format du numéro de téléphone est correct, ajoutez l'attribut "x-autocompletetype="phone-full"". Toute chaîne composée de 10 chiffres sera considérée comme un format accepté. <input type="text" x-autocompletetype="phone-full" size="25">
Saisie de l'adresse e-mail* : Pour vous assurer que le format de l'adresse e-mail est correct, ajoutez l'attribut "x-autocompletetype="email"". Toute chaîne de texte sous la forme xxx@xxx.xxx sera considérée comme un format accepté. <input type="text" x-autocompletetype="email" size="25">
Saisie du code postal* : Pour vous assurer que le format du code postal est correct, ajoutez l'attribut "x-autocompletetype="postal-code"". Toute chaîne commençant par cinq chiffres sera considérée comme un format accepté. <input type="text" x-autocompletetype="postal-code" size="25">

* Si le champ n'est pas désigné comme obligatoire, il ne sera validé que s'il contient une valeur.

Liens associés

Cet article vous a-t-il été utile ?
Comment pouvons-nous l'améliorer ?
Se connecter à AdWords

Bénéficiez d'une aide et de conseils spécifiques au compte en vous connectant avec l'adresse e-mail de votre compte AdWords, ou découvrez comment faire vos premiers pas avec AdWords.