Configurazione degli annunci nativi

Creare una annuncio nativo zona è semplice ma altamente personalizzabile. Puoi utilizzare processi leggermente diversi per configurare una zona di annunci nativi in base alle tue esigenze:

Scenario A: vuoi semplicemente configurare una zona pubblicitaria, scegliere il rapporto d’aspetto delle immagini della zona di annunci nativi e poi impostare sul tuo sito la dimensione della zona pubblicitaria in modo corrispondente.
Scenario B: vuoi configurare la zona pubblicitaria in modo che corrisponda a una dimensione o a un rapporto immagine personalizzati, così che la zona pubblicitaria abbia lo stesso aspetto del tuo sito e si integri perfettamente.
Scenario C: hai una zona sul tuo sito di una dimensione specifica e vuoi creare una zona pubblicitaria che si adatti e abbia un bell’aspetto.

Qualunque scenario tu scelga, la prima cosa da fare è creare una zona di Annuncio Nativo.

Creazione di una Zona di Annuncio Nativo

Quando sei autenticato come Publisher, fai clic su Siti e Zone, Nuova zona, ed espandi la Nativo sezione, seleziona il formato Annuncio Nativo Widget di Raccomandazione e fai clic su Avanti.

Compila i dettagli della zona e fai clic su Avanti.

In questo scenario, imposti il rapporto d’aspetto delle immagini nel Pannello di Amministrazione e non è necessario impostare la dimensione totale della zona pubblicitaria. Quando usi il Layout Rapido, la zona pubblicitaria che crei si adatterà automaticamente alla dimensione del contenitore in cui la inserisci.

Passaggio 1

Seleziona la Layout Rapido scheda. Nella Layout Desktop sezione, imposta il numero di colonne e righe di annunci che desideri sul desktop.

Passaggio 2

Quindi, scegli il rapporto d’aspetto per le tue immagini dal menu a discesa Impostazioni Immagine Puoi scegliere tra 1:1, 4:3 o 16:9, per adattarlo alle miniature sul tuo sito.

Passaggio 3

Dopo aver scelto il rapporto d’aspetto, usa la casella di controllo per scegliere se vuoi mostrare o meno il testo, quindi decidi dove mostrarlo.
Questo testo consiste in un Titolo e una Descrizione. Puoi attivarli e disattivarli singolarmente nelle Titolo e Descrizione sezioni, se lo desideri.
Controlla l’anteprima a destra per vedere come appare la tua zona pubblicitaria e, se necessario, modifica di nuovo le impostazioni.

Passaggio 4

Ripeti i passaggi 1-3 sopra nella Layout Mobile sezione per configurare la tua zona pubblicitaria per il mobile.

Passaggio 5

Controlla l’anteprima sia per Desktop e Mobile sul lato destro dello schermo. Puoi impostare dove avviene il punto di interruzione tra visualizzazione desktop e mobile nel Punto di Interruzione Mobile menu a discesa di Opzioni Avanzate.
Il punto di interruzione può essere impostato a 800px per iPad, 450px per mobile e Non reattivo. Quando cambiamo il punto di interruzione, cambia se le impostazioni nella sezione Layout Desktop influenzano desktop e iPad, oppure solo il desktop stesso.
Quando sei soddisfatto dell’aspetto dell’anteprima, fai clic su Crea.

Passaggio 6

Copia il Tag HTML della Zona e aggiungilo al tuo sito.
La zona pubblicitaria si adatterà automaticamente al 100% del contenitore in cui inserisci il tag. Vale a dire, più grande è il contenitore, più grandi saranno sia la zona sia gli annunci.

In questo scenario, vuoi poter modificare la dimensione dell’immagine e la spaziatura dell’annuncio per adattarle al tuo sito. Lo faresti se vuoi davvero che gli annunci nativi sembrino parte del contenuto editoriale del tuo sito.

Passaggio 1

Seleziona la Layout Rapido scheda. Nella Layout Desktop sezione, imposta il numero di colonne e righe di annunci che desideri sul desktop.

Passaggio 2

Nel Impostazioni Immagine menu a discesa, seleziona Dimensione Personalizzata e imposta la larghezza e l’altezza delle immagini in modo che corrispondano al tuo sito. Se il sito contiene un meta tag ed è reattivo, quando il sito viene visualizzato anche le immagini si adatteranno man mano che la dimensione dello schermo diminuisce. Le informazioni sulla Dimensione Widget e il Dimensione Immagine verranno visualizzate nell’angolo in alto a destra sopra l’anteprima.

Passaggio 3

Una volta impostata la dimensione dell’immagine, scegli se vuoi mostrare o meno il testo usando la casella di controllo Testo e scegli dove mostrarlo.
Controlla l’anteprima a destra per vedere come appare la tua zona pubblicitaria e, se necessario, modifica di nuovo le impostazioni.

Passaggio 4

Ripeti i passaggi 1-3 nella Layout Mobile sezione per configurare la tua zona pubblicitaria per il mobile.

Passaggio 5

Nel Opzioni Avanzate sezione, puoi impostare quanti pixel di Spaziatura Verticale e Spaziatura Orizzontale vuoi attorno a ciascun annuncio.

Nota: modificare queste impostazioni cambierà la dimensione complessiva della zona pubblicitaria.

Passaggio 6

Controlla l’anteprima sia per Desktop e Mobile sul lato destro dello schermo. Puoi impostare dove avviene il punto di interruzione tra visualizzazione desktop e mobile nel Punto di Interruzione Mobile menu a discesa di Opzioni Avanzate.
Il punto di interruzione può essere impostato a 800px per iPad, 450px per mobile e Non reattivo. Quando cambiamo il punto di interruzione, cambia se le impostazioni nella sezione Layout Desktop influenzano desktop e iPad, oppure solo il desktop stesso.
Quando sei soddisfatto dell’aspetto dell’anteprima, fai clic su Crea.

Passaggio 7

Copia il Tag HTML della Zona e aggiungilo al tuo sito.
Assicurati che la dimensione della zona pubblicitaria sul tuo sito corrisponda alla dimensione della zona che hai appena creato.

In questo scenario, vuoi poter impostare la dimensione della zona pubblicitaria in modo che corrisponda alle esigenze del tuo sito, e modificare le impostazioni per assicurarti che gli annunci vengano visualizzati bene.

Passaggio 1

Seleziona la Layout Personalizzato scheda. Nella Layout Desktop sezione, imposta la Larghezza e il Altezza della zona pubblicitaria totale che desideri creare.

Passaggio 2

Quindi, scegli quanti Colonne e Righe di annunci desideri visualizzare nella zona pubblicitaria. Controlla l’anteprima a destra per vedere quali impostazioni funzionano per la dimensione che hai scelto.

Passaggio 3

Una volta scelto quante colonne e righe vuoi, scegli se vuoi mostrare o meno il testo usando la Testo casella di controllo, e scegli dove mostrarlo usando il menu a discesa Posizione del Testo .

Passaggio 4

Ripeti i passaggi 1-3 nella Layout Mobile sezione per configurare la tua zona pubblicitaria per il mobile.

Passaggio 5

Controlla l’anteprima sia per Desktop e Mobile sul lato destro dello schermo. Puoi impostare dove avviene il punto di interruzione tra visualizzazione desktop e mobile nel Punto di Interruzione Mobile menu a discesa di Opzioni Avanzate.
Il punto di interruzione può essere impostato a 800px per iPad, 450px per mobile e Non reattivo. Quando cambiamo il punto di interruzione, cambia se le impostazioni nella sezione Layout Desktop influenzano desktop e iPad, oppure solo il desktop stesso.
Quando sei soddisfatto dell’aspetto dell’anteprima, fai clic su Crea.

Passaggio 6

Copia il Tag HTML della Zona e aggiungilo al tuo sito.

Selezione di Non reattivo nel Punto di Interruzione Mobile

Quando il Punto di Interruzione Mobile è impostato su Non reattivo nelle Opzioni Avanzate, la finestra modale qui sotto apparirà sullo schermo.

Facendo clic su CONTINUA nella finestra modale verrà utilizzato il layout desktop per gli annunci su tutti i dispositivi, inclusi mobile e tablet.
Il layout Mobile non sarà più modificabile dall’utente quando viene selezionato Non reattivo.
Le impostazioni dell’immagine vengono aggiornate alla dimensione personalizzata predefinita (larghezza - 200px e altezza - 200px) se non salvate in precedenza.

Uso di CSS personalizzato con gli Annunci Nativi

Nel CSS personalizzato sezione, puoi aggiungere CSS personalizzato per assicurarti che la zona pubblicitaria venga visualizzata correttamente sul tuo sito. Le classi CSS più importanti sono fornite come punto di partenza. Scopri di più su CSS qui.

Nota: tieni presente che le modifiche al CSS personalizzato non verranno mostrate nell’anteprima: saranno visibili solo sul tuo sito.

Classi CSS per annunci nativi

Sono fornite cinque classi CSS nella casella iniziale, e puoi incollare ulteriore stile come preferisci. Queste cinque classi CSS stilizzano i seguenti elementi più importanti dell’annuncio nativo:

Classe

Azione

.exo-native-widget-outer-container

Stilizza l’intero contenitore del widget.

.exo-native-widget-item

Stilizza i contenitori dei singoli elementi.

.exo-native-widget-item-image

Stilizza l’immagine.

.exo-native-widget-item-title

Stilizza il testo del titolo.

.exo-native-widget-item-text

Stilizza il testo della descrizione

Classi CSS aggiuntive

Puoi anche stilizzare l’annuncio nativo usando queste classi CSS aggiuntive:

Classe

Azione

.exo-native-widget

Avvolge l’intero widget.

.exo-native-widget-header

Avvolge gli elementi dell’intestazione.

.exo-native-widget-outer-container

Avvolge tutti gli annunci.

.exo-native-widget-item-container

Avvolge il box dell’annuncio.

.exo-native-widget-item-image-wrapper

Avvolge l’immagine nel box dell’annuncio.

.exo-native-widget-item-image-ratio

Imposta il rapporto d’aspetto dell’immagine dell’annuncio.

.exo-native-widget-item-content

Avvolge tutto il testo del box dell’annuncio.

.exo-native-widget-item-content-box

Avvolge il titolo, la descrizione e il brand del contenitore dell’annuncio.

.exo-native-widget-item-brand

Stilizza il brand dell’annuncio.

Esempi

I seguenti esempi mostrano come i Publisher possono adattare gli stili CSS nella configurazione della Zona Annuncio Nativo in base alle loro esigenze.

1. Per posizionare il riquadro del testo sopra l’immagine.


 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      left: 15px;
   }

2. Per modificare la dimensione del riquadro del testo.


 .exo-native-widget-item-content {
      height: 50px  !important;
   }

3. Per posizionare il riquadro del testo sopra l’immagine e aggiungere uno sfondo al riquadro del testo con opacità.


 .exo-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      background-color: black !important;
      opacity: 0.7 !important;
    }
.exo-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

4. Per arrotondare i bordi dell’immagine.


 .exo-native-widget-item-image {
    border-radius: 5% !important;
    }

5. Per impostare uno stile per il font. In questo modo il Publisher può usare i font disponibili sul proprio sito web e diversi da quelli disponibili nella configurazione della Zona.


 .exo-native-widget-item-title, .exo-native-widget-item-text, .exo-native-widget-item-brand {
   font-family: fantasy !important;
   }

6. Per aggiungere spaziatura tra l’immagine e il testo, in modo che il testo possa essere vicino o lontano dall’immagine. Puoi anche usare padding-bottom per aggiungere spazio sotto il testo.


 .exo-native-widget-item-content {
    padding: 30px !important;
    }

7. Per personalizzare il colore di sfondo del riquadro del testo in modo che influisca solo sul riquadro del testo sotto ogni immagine, lasciando lo spazio tra le immagini e i riquadri trasparente o con un colore di sfondo diverso.


 .exo-native-widget-item-content {
    background-color: #ABE1FA !important;
    padding: 10px !important;
}
.exo-native-widget-outer-container {
    background-color: white !important;
    padding: 10px !important;
}
.exo-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.exo-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

8. Per aggiungere un bordo che copra un’immagine e il suo riquadro del testo. Questo aiuterà a separare ogni immagine all’interno di quel Widget Nativo.


.exo-native-widget-item-container {
  border: 10px #0073B7 solid !important;
  padding: 10px !important;
}
.exo-native-widget-outer-container {
  margin: 10px !important;
}

PrecedenteGestione del capping per popunder e interstitial a pagina intera SuccessivoPagamenti

Ultimo aggiornamento 1 mese fa

È stato utile?