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

 

La plupart des utilisateurs gèrent désormais leurs comptes exclusivement via la nouvelle interface Google Ads. Si vous utilisez encore l'ancienne interface AdWords, choisissez Interface précédente ci-dessous. 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.

Liens associés