Recherche
Effacer la recherche
Fermer la recherche
Applications Google
Menu principal

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

Pour bénéficier d'une flexibilité optimale dans la conception de vos annonces Gmail, utilisez du code HTML personnalisé. Si vous êtes un annonceur expérimenté, vous pouvez ainsi créer des annonces différentes des modèles d'annonces Gmail existants. Cette méthode vous permet d'inclure des formulaires intégrés, des vidéos, des numéros de téléphone, voire 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

Si vous souhaitez utiliser un modèle, accédez à l'article "Créer des annonces Gmail avec des modèles". Sachez que les modèles d'annonces peuvent inclure des vidéos YouTube. 

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

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.

Comment créer votre 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) et certaines propriétés CSS (seulement pour les attributs de style, par exemple : <div style="color: black">) sont acceptées.

Balisage non autorisé

  • Code JavaScript (les balises <script> seront automatiquement supprimées de l'annonce)
  • Feuilles de style (les balises <link> et <style> seront automatiquement supprimées de l'annonce)
  • Code Flash
  • Code HTML5
  • Son
  • Cadres iFrame
  • Images animées (GIF)

Propriétés CSS acceptées

background border-bottom-width border-top-color font-size margin-top padding-right
background-attachment border-collapse border-top-left-radius font-stretch max-height padding-top
background-clip border-color border-top-right-radius font-style max-width quotes
background-color border-left border-top-style font-variant min-height table-layout
background-image border-left-color border-top-width font-weight min-width text-align
background-origin border-left-style border-width letter-spacing outline text-decoration
background-position border-left-width caption-side line-height outline-color text-indent
background-repeat border-radius clear list-style outline-style text-overflow
background-size border-right color list-style-image outline-width text-transform
border border-right-color direction list-style-position overflow vertical-align
border-bottom border-right-style display list-style-type overflow-x white-space
border-bottom-color border-right-width empty-cells margin overflow-y width
border-bottom-left-radius border-spacing float margin-bottom padding word-break
border-bottom-right-radius border-style font margin-left padding-bottom word-spacing
border-bottom-style border-top font-family margin-right padding-left word-wrap

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

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