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 Google Ads. 

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

Avant de commencer

Important : N'oubliez pas 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 de l'image du logo

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

  • Taille maximale de l'image du logo : 144 px x 144 px, proportions 1:1
  • Taille maximale du fichier : 150 Ko
  • Format du fichier : PNG, JPG ou GIF (sans animation)

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

L'image s'affichera sous la forme d'un carré 50 x 50 sur les appareils à résolution normale, mais nous acceptons jusqu'à 150 Ko pour une image plus nette sur certains écrans.

Spécifications du 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 de 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 exactement cet exemple, en vous assurant de saisir les en-têtes en anglais (exactement comme indiqué ci-dessous).Veillez également à inclure à la fois la catégorie (par exemple, "Advertiser") et vos informations spécifiques. Le tableau ci-dessous indique le nombre maximal de caractères et contient des conseils supplémentaires sur les éléments à inclure.

En-têtes Limite du nombre de caractères Éléments à inclure
Advertiser 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 90 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 utilisateurs 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 choisissez le modèle "Annonce Gmail HTML personnalisée", assurez-vous d'ajouter aux fichiers index.html et teaser.txt les URL de suivi que vous souhaitez utiliser.
  • Balisage : nous acceptons 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 tels que <div style="color: black" >).

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. 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 (l'application YouTube ou un navigateur, par exemple). 

    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 Google Ads, la vidéo YouTube ne s'affiche pas ou n'est pas lue en mode Lightbox.

  2. 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. Google Ads n'ajoute rien aux images d'aperçu pour indiquer qu'il s'agit de vidéos.

Liens associés

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?

Vous avez encore besoin d'aide ?

Connectez-vous pour accéder à des options d'assistance supplémentaires afin de résoudre rapidement votre problème.