Banner Altervista responsive

[dampyr]

Salve, ho una semplice domanda: è possibile/consentito inserire i codici dei banner di Altervista in modo che si adattino al tipo di dispositivo utilizzato?

In sostanza ho un sito che visualizza dei banner Leaderboard 728x90, e che sto rendendo responsive, ma in tal caso quando il sito è visitato da smartphone il banner andrebbe cambiato con un Video banner 300x250.
Al tempo stesso il Video banner non è il massimo in visualizzazione desktop.

Chiedo se è consentito tale utilizzo.
Grazie.

[alemoppo]

Puoi modificare il tipo di banner erogato nella versione mobile, però il codice deve essere erogato lato server: non puoi modificare il sorgente dei banner o nasconderli lato client.

Quindi potresti ad esempio decidere di erogare un banner o l'altro guardando ad esempio $_SERVER['HTTP_USER_AGENT']. Vedi ad esempio qui.

Ciao!

[dampyr]

Pensavo di fare qualcosa con CSS gestendo il display dei due div alternativi:

#altervista728 { 
	display: block;
	height: 100px; 
	margin: auto; 
	text-align: center; 
	background-color: #141414;
}

#altervista300 {
	display: none;
}

@media only screen and (max-width: 991px) {
	
	#altervista728 { 
		display: none;
	}

	#altervista300 {
		display: block;
		height: 260px; 
		margin: auto; 
		text-align: center; 
		background-color: #141414;
	}

}

Non è consentito? Si tratta di pagine html, non php (tranne una in tutto il sito).

[dampyr]

Va bene una soluzione del genere?

<div id="altervista">
    <?php
    $isMobile = (bool)preg_match('#\b(ip(hone|od|ad)|android|opera m(ob|in)i|windows (phone|ce)|blackberry|tablet'.'|s(ymbian|eries60|amsung)|p(laybook|alm|rofile/midp|laystation portable)|nokia|fennec|htc[\-_]'.'|mobile|up\.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\b#i', $_SERVER['HTTP_USER_AGENT'] );
    if($isMobile) {
        echo '/* codice video banner */';
    } else {
        echo '/* codice leaderboard */';
    }
    ?>
</div>

[alemoppo]

Pensavo di fare qualcosa con CSS gestendo il display dei due div alternativi:

No, questo modo evitalo perché potrebbe addirittura portarti all'esclusione dai circuiti pubblicitari.

Va bene una soluzione del genere?

<div id="altervista">
    <?php
    $isMobile = (bool)preg_match('#\b(ip(hone|od|ad)|android|opera m(ob|in)i|windows (phone|ce)|blackberry|tablet'.'|s(ymbian|eries60|amsung)|p(laybook|alm|rofile/midp|laystation portable)|nokia|fennec|htc[\-_]'.'|mobile|up\.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\b#i', $_SERVER['HTTP_USER_AGENT'] );
    if($isMobile) {
        echo '/* codice video banner */';
    } else {
        echo '/* codice leaderboard */';
    }
    ?>
</div>

Questa soluzione PHP invece va benissimo ed è quello che intendevo nella risposta precedente.

Ciao!

[dampyr]

Questa soluzione PHP invece va benissimo ed è quello che intendevo nella risposta precedente.

Va benissimo ai fini delle regole del circuito pubblicitario, ma se permetti non copre tutta la possibile casistica di visualizzazioni delle mie pagine: un eventuale monitor di pc con risoluzione 1024x768 vedrebbe il banner leaderboard (perché PHP risponde che non è visualizzato da mobile) che però uscirebbe dal div contenitore nonché dalla finestra del browser. Controllo che invece da CSS riesce impeccabile.
Ora non so se esiste ancora qualcuno che usa ancora risoluzioni 1024x768, tuttavia se mi commissionano un sito che si veda bene, banner pubblicitari inclusi, a tutte le risoluzioni, non posso proporgli la soluzione PHP.
Forse ho posto male la domanda in partenza?

[alemoppo]

Il problema principale è: se nascondi un banner tramite CSS, qualche browser potrebbe comunque caricare le risorse del banner non mostrandolo: quindi risulterebbe un banner erogato ma non mostrato -> rischio di esclusione dal circuito pubblicitario.

Ciao!

[dampyr]

Almeno è lecito, quando il sito non è aperto da mobile (quindi nell'else del PHP), controllare la risoluzione con un if annidato? A livello di sorgente verrebbe mostrato un solo banner e caricato solo il suo codice. Esempio:
1) Sito aperto da mobile?
- sì -> banner piccolo
- no -> 2) Risoluzione maggiore di 1000px?
-- sì -> banner grande
-- no -> banner piccolo

[alemoppo]

Certo, da PHP puoi decidere in qualsiasi modo (controllo user_agent o risoluzione o altro) e decidere con if o altre strutture quale banner mostrare.

Come spiegato prima, se il codice pubblicitario del banner che non vuoi mostrare non viene stampato in output, non c'è alcun problema. Il problema è se lo nascondi in qualche modo (esempio con CSS) perché il banner verrebbe comunque conteggiato nell'erogazione ma l'utente realmente non lo visualizzerebbe.

Ciao!

[dampyr]

L'unico modo che ho trovato per sapere la larghezza della finestra è tramite window.innerWidth in JavaScript... Solo che mi pare di non poter sfruttare tale valore poiché PHP è eseguito prima.
Infatti in HTML questo funziona (ma non mi serve per i motivi che abbiamo visto)

<script>
	var larghezza = window.innerWidth;
	document.write(larghezza);
	if(larghezza <= 992) {
		document.write("banner piccolo");
	} else {
		document.write("banner grande");
	}
</script>

Viceversa non funziona affatto questo in PHP

<script>
    var larghezza = window.innerWidth;
    document.write(larghezza);
    if(larghezza <= 992) {
        <?php echo "banner piccolo"; ?>
    } else {
        <?php echo "banner grande"; ?>
    }
</script>

[alemoppo]

Viceversa non funziona affatto questo in PHP

È normale, non puoi mischiare in quel modo PHP con javascript. Ti consiglierei di utilizzare il codice che controlla l'user agent.
Se proprio vuoi sapere la risoluzione lato PHP, dovresti fare una richiesta ajax o comunque una richiesta POST o GET con le dimensioni dello schermo da comunicare a PHP. È però una cosa molto contorta.

Ciao!