> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/publishers/it/siti-e-zone/configurazione-annunci-nativi.md). # Configurazione annunci nativi Creazione di una [annuncio nativo](/publishers/it/siti-e-zone/create-zone.md#recommendation-widget) la zona è semplice ma estremamente personalizzabile. È possibile utilizzare processi leggermente diversi per configurare una zona di annunci nativi a seconda delle proprie 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 corrispondente. * **Scenario B**: vuoi configurare la zona pubblicitaria in modo che corrisponda a una dimensione o a un rapporto personalizzato dell'immagine, in modo 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 annunci nativi. ## Creazione di una zona di annunci nativi Quando sei connesso come editore, 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**. ![Crea zona nativa](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/1lsZ4Ki3CIL173vBDbzo/assets/hires/create-zone-native.png) Compila i dettagli della zona e fai clic su **Avanti**. {% tabs %} {% tab title="Scenario A: Layout rapido: imposta il rapporto d'aspetto" %} 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 si utilizza il **Layout rapido**, la zona pubblicitaria che crei si adatterà automaticamente alle dimensioni del contenitore in cui la inserisci. {% stepper %} {% step %} ### Passo 1 ![Passo nativo 1](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/i4nnDybTXZj0jYx8l8ie/assets/hires/native/sca-step1.png) Seleziona la **Layout rapido** scheda. Nella **Layout desktop** sezione, imposta il numero di colonne e righe di annunci che desideri sul desktop. {% endstep %} {% step %} ### Passo 2 ![Passo nativo 2](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/XcQLr7Fi2GR8u2O7oLcD/assets/hires/native/sca-step2.png) 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 adattarti alle miniature del tuo sito. {% endstep %} {% step %} ### Passo 3 ![Passo nativo 3](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/5LzyX7rTkfZEucmCbY04/assets/hires/native/sca-step3.png) * Una volta scelto il rapporto d'aspetto, usa la casella di controllo per scegliere se desideri mostrare il testo o meno, quindi decidi dove visualizzarlo. * Questo testo consiste in un **Titolo** e una **Descrizione**. Puoi attivarli e disattivarli singolarmente nelle sezioni **Titolo** e **Descrizione** se lo desideri. * Controlla l'anteprima sulla destra per vedere come appare la tua zona pubblicitaria e, se necessario, modifica di nuovo le impostazioni. {% endstep %} {% step %} ### Passo 4 ![Passo nativo 4](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/pXcT9dbHa7ocZdeuSgGC/assets/hires/native/sca-step4.png) * Ripeti i passi 1-3 sopra nella sezione **Layout mobile** per configurare la tua zona pubblicitaria per il mobile. {% endstep %} {% step %} ### Passo 5 ![Passo nativo 5](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png) * Controlla l'anteprima sia per **Desktop** e **Mobile** sul lato destro della schermata. Puoi impostare dove avviene il punto di passaggio tra la visualizzazione desktop e mobile nel menu a discesa **Punto di interruzione mobile** di **Opzioni avanzate**. * Il punto di interruzione può essere impostato a **800px** per iPad, **450px** per mobile e **Non responsivo**. Quando modifichiamo il punto di interruzione, cambia il fatto che le impostazioni nella sezione Layout desktop influiscano su desktop e iPad, oppure solo sul desktop. * Quando sei soddisfatto dell'anteprima, fai clic su **Crea**. {% endstep %} {% step %} ### Passo 6 ![Passo nativo 6](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png) * 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. {% endstep %} {% endstepper %} {% endtab %} {% tab title="Scenario B: Layout rapido: imposta una dimensione immagine personalizzata" %} 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. {% stepper %} {% step %} ### Passo 1 ![Passo nativo 7](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/esjgXHOuLYDy2kSfiWXV/assets/hires/native/scb-step1.png) * Seleziona la **Layout rapido** scheda. Nella **Layout desktop** sezione, imposta il numero di colonne e righe di annunci che desideri sul desktop. {% endstep %} {% step %} ### Passo 2 ![Passo nativo 8](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/9knI85T5uv4S2k0ennMD/assets/hires/native/scb-step2.png) * 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 è responsivo, quando il sito viene visualizzato anche le immagini si adatteranno man mano che la dimensione dello schermo diminuisce. Le informazioni su **Dimensione del widget** e **Dimensione immagine** verranno visualizzate nell'angolo in alto a destra sopra l'anteprima. {% endstep %} {% step %} ### Passo 3 ![Passo nativo 9](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/YWchSf0txs1p9pbnCBXb/assets/hires/native/scb-step3.png) * Una volta impostata la dimensione dell'immagine, scegli se desideri mostrare il testo o meno usando la casella di controllo **Testo** e scegli dove visualizzarlo. * Controlla l'anteprima sulla destra per vedere come appare la tua zona pubblicitaria e, se necessario, modifica di nuovo le impostazioni. {% endstep %} {% step %} ### Passo 4 ![Passo nativo 10](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/A8dhcTNINaI7ni1fz9Ho/assets/hires/native/scb-step4.png) * Ripeti i passi 1-3 nel **Layout mobile** per configurare la tua zona pubblicitaria per il mobile. {% endstep %} {% step %} ### Passo 5 ![Passo nativo 11](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/4EatUeZ6VmU4VsaUQpfE/assets/hires/native/scb_advance1.png) * Nel **Opzioni avanzate** sezione, puoi impostare quanti pixel di **Spaziatura verticale** e **Spaziatura orizzontale** desideri attorno a ciascun annuncio. {% hint style="info" %} **Nota**: modificando queste impostazioni cambierai la dimensione complessiva della zona pubblicitaria. {% endhint %} {% endstep %} {% step %} ### Passo 6 ![Passo nativo 12](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png) * Controlla l'anteprima sia per **Desktop** e **Mobile** sul lato destro della schermata. Puoi impostare dove avviene il punto di passaggio tra la visualizzazione desktop e mobile nel menu a discesa **Punto di interruzione mobile** di **Opzioni avanzate**. * Il punto di interruzione può essere impostato a **800px** per iPad, **450px** per mobile e **Non responsivo**. Quando modifichiamo il punto di interruzione, cambia il fatto che le impostazioni nella sezione Layout desktop influiscano su desktop e iPad, oppure solo sul desktop. * Quando sei soddisfatto dell'anteprima, fai clic su **Crea**. {% endstep %} {% step %} ### Passo 7 ![Passo nativo 13](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png) * 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. {% endstep %} {% endstepper %} {% endtab %} {% tab title="Scenario C: Layout personalizzato: imposta una dimensione fissa della zona" %} 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 correttamente. {% stepper %} {% step %} ### Passo 1 ![Passo nativo 13](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/JEhQvAhXNjExOj7GXOyw/assets/hires/native/scc-step1.png) Seleziona la **Layout personalizzato** scheda. Nella **Layout desktop** sezione, imposta la **Larghezza** e **Altezza** della zona pubblicitaria totale che desideri creare. {% endstep %} {% step %} ### Passo 2 ![Passo nativo 14](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/WVwRdNmMUtNGQnymV67U/assets/hires/native/scc-step2.png) 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. {% endstep %} {% step %} ### Passo 3 ![Passo nativo 15](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/oObBcmxtsFqPjD2pa1fl/assets/hires/native/scc-step3.png) Una volta scelto quante colonne e righe desideri, scegli se vuoi mostrare il testo o meno usando la casella di controllo **Testo** e scegli dove visualizzarlo usando il menu a discesa **Posizione del testo** . {% endstep %} {% step %} ### Passo 4 ![Passo nativo 15](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/wdY8i3TWgXoyIWW3SYrW/assets/hires/native/scc-step4.png) Ripeti i passi 1-3 nel **Layout mobile** per configurare la tua zona pubblicitaria per il mobile. {% endstep %} {% step %} ### Passo 5 ![Passo nativo 16](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png) * Controlla l'anteprima sia per **Desktop** e **Mobile** sul lato destro della schermata. Puoi impostare dove avviene il punto di passaggio tra la visualizzazione desktop e mobile nel menu a discesa **Punto di interruzione mobile** di **Opzioni avanzate**. * Il punto di interruzione può essere impostato a **800px** per iPad, **450px** per mobile e **Non responsivo**. Quando modifichiamo il punto di interruzione, cambia il fatto che le impostazioni nella sezione Layout desktop influiscano su desktop e iPad, oppure solo sul desktop. * Quando sei soddisfatto dell'anteprima, fai clic su **Crea**. {% endstep %} {% step %} ### Passo 6 ![Passo nativo 17](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png) Copia il **tag HTML della zona** e aggiungilo al tuo sito. {% endstep %} {% endstepper %} {% endtab %} {% endtabs %} ## Selezione di Non responsivo nel punto di interruzione mobile * Quando il Punto di interruzione mobile è impostato su Non responsivo in Opzioni avanzate, sullo schermo apparirà la finestra modale seguente. ![Non responsivo2](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/AHKGWus2UFehm3E9QMTe/assets/hires/unresponsive2.png) ![Non responsivo3](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/MbemiUHb7Szd9C1r4JWZ/assets/hires/unresponsive3.png) * Facendo clic su **CONTINUA** nella finestra modale verrà mostrato il layout desktop per gli annunci su tutti i dispositivi, inclusi mobile e tablet. * Il layout mobile non sarà più modificabile dall'utente quando è selezionato Non responsivo. * Le impostazioni dell'immagine vengono aggiornate alla dimensione personalizzata predefinita (larghezza - 200px e altezza - 200px) se non salvate in precedenza. ## Uso del CSS personalizzato con gli annunci nativi ![banner](https://1080419390-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGoSwRYjxsR1XS6va6yLj%2Fuploads%2FbUrcdZCax7qachURBVTS%2Fimage.png?alt=media\&token=75616bc9-e5e7-42a2-8c9b-34707a1e0bc2) 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ù sul CSS [qui](https://www.w3schools.com/css/default.asp). {% hint style="info" %} **Nota**: tieni presente che le modifiche al CSS personalizzato non verranno visualizzate nell'anteprima: saranno visibili solo sul tuo sito. {% endhint %} ### Classi CSS per gli annunci nativi All'inizio nella casella sono fornite cinque classi CSS, e puoi incollare altri stili come preferisci. Queste cinque classi CSS definiscono i seguenti elementi più importanti dell'annuncio nativo: ![CSS dell'annuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/ThwwsRHFlTOSbIoMqI1E/assets/hires/native-ad-css-class.png) | Classe | Azione | | ---------------------------------- | --------------------------------------------- | | .msg-native-widget-outer-container | Definisce l'intero contenitore del widget. | | .msg-native-widget-item | Definisce i contenitori dei singoli elementi. | | .msg-native-widget-item-image | Definisce l'immagine. | | .msg-native-widget-item-title | Definisce il testo del titolo. | | .msg-native-widget-item-text | Definisce il testo della descrizione | ### Classi CSS aggiuntive Puoi anche definire lo stile dell'annuncio nativo usando queste classi CSS aggiuntive: | Classe | Azione | | ------------------------------------- | ----------------------------------------------------------------------------- | | .msg-native-widget | Racchiude l'intero widget. | | .msg-native-widget-header | Racchiude gli elementi dell'intestazione. | | .msg-native-widget-outer-container | Racchiude tutti gli annunci. | | .msg-native-widget-item-container | Racchiude il riquadro dell'annuncio. | | .msg-native-widget-item-image-wrapper | Racchiude l'immagine nel riquadro dell'annuncio. | | .msg-native-widget-item-image-ratio | Imposta il rapporto d'aspetto dell'immagine dell'annuncio. | | .msg-native-widget-item-content | Racchiude tutto il testo del riquadro dell'annuncio. | | .msg-native-widget-item-content-box | Racchiude il titolo, la descrizione e il brand del contenitore dell'annuncio. | | .msg-native-widget-item-brand | Definisce lo stile del brand dell'annuncio. | **Esempi** * I seguenti esempi mostrano come gli editori possono adattare gli stili CSS nella configurazione della zona di annunci nativi in base alle proprie esigenze. {% stepper %} {% step %} #### 1. Per posizionare la casella di testo sopra l'immagine. ![esempio di CSS dell'annuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/QFAzxUnKNOild5gSn0VS/assets/hires/native-ad-css-text-on-image.png) ```css .msg-native-widget-item-content { position: absolute !important; bottom: 0px !important; z-index: 3 !important; top: unset !important; height: 50px !important; left: 15px; } ``` {% endstep %} {% step %} #### 2. Per modificare la dimensione della casella di testo. ![esempio di CSS dell'annuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/qx3YHuopQjx13mXCcF6v/assets/hires/native-ad-css-size-of-text-box.png) ```css .msg-native-widget-item-content { height: 50px !important; } ``` {% endstep %} {% step %} #### 3. Per posizionare la casella di testo sopra l'immagine e aggiungere uno sfondo alla casella di testo con opacità. ![esempio di CSS dell'annuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rrwKCULO65AOG3mF2Y5z/assets/hires/native-ad-css-text-on-image-with-background.png) ```css .msg-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; } .msg-native-widget-item-title { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } .msg-native-widget-item-text { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } .msg-native-widget-item-brand { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } ``` {% endstep %} {% step %} #### 4. Per arrotondare i bordi dell'immagine. ![esempio di CSS dell'annuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/FwVaN0LAs4cUEaw1RaTy/assets/hires/native-ad-css-round-the-corners.png) ```css .msg-native-widget-item-image { border-radius: 5% !important; } ``` {% endstep %} {% step %} #### 5. Per impostare uno stile per il carattere. In questo modo l'editore può usare i caratteri disponibili sul proprio sito web e non solo quelli disponibili nella configurazione della zona. ![esempio di CSS dell'annuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/4VgfwQ8IQHImagcqHtFr/assets/hires/native-ad-css-other-options.png) ```css .msg-native-widget-item-title, .msg-native-widget-item-text, .msg-native-widget-item-brand { font-family: fantasy !important; } ``` {% endstep %} {% step %} #### 6. Per aggiungere spaziatura tra l'immagine e il testo, così il testo può essere vicino o lontano dall'immagine. Puoi anche usare padding-bottom per aggiungere spazio sotto il testo. ![esempio di CSS dell'annuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/zusqVYVxOAml6RhFfaHw/assets/hires/native-ad-css-change-padding.png) ```css .msg-native-widget-item-content { padding: 30px !important; } ``` {% endstep %} {% step %} #### 7. Per personalizzare il colore di sfondo della casella di testo in modo che influenzi solo la casella di testo sotto ciascuna immagine, lasciando trasparente lo spazio tra le immagini e le caselle o con un colore di sfondo diverso. ![esempio di CSS dell'annuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/H08catOYIpWoAcmXJHoh/assets/hires/native-ad-css-customise-background-color.png) ```css .msg-native-widget-item-content { background-color: #ABE1FA !important; padding: 10px !important; } .msg-native-widget-outer-container { background-color: white !important; padding: 10px !important; } .msg-native-widget-item-title { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } .msg-native-widget-item-text { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } .msg-native-widget-item-brand { margin-left: 5px !important; padding-top: 3px !important; color: white !important; } ``` {% endstep %} {% step %} #### 8. Per aggiungere un bordo che copra un'immagine e la relativa casella di testo. Questo aiuterà a separare ciascuna immagine all'interno di quel widget nativo. ![esempio di CSS dell'annuncio nativo](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/ZPr4F1I8Cbu9MhAnXpGy/assets/hires/native-ad-css-set-border.png) ```css .msg-native-widget-item-container { border: 10px #0073B7 solid !important; padding: 10px !important; } .msg-native-widget-outer-container { margin: 10px !important; } ``` {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.exoclick.com/publishers/it/siti-e-zone/configurazione-annunci-nativi.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.