Come fare: nascondere elementi del sito web dentro la tua app

A volte un sito web contiene elementi che hanno senso in un browser ma non dovrebbero essere mostrati dentro l’app. Esempi comuni sono i banner che chiedono agli utenti di scaricare l’app, i banner dei cookie che confondono i revisori Apple, i pulsanti di pagamento durante la revisione dell’app o la navigazione del sito che viene sostituita dal menu dell’app.

Se vuoi creare un comportamento specifico per l’app direttamente nel tuo sito web, puoi anche rilevare se un visitatore sta usando l’app. Leggi la nostra guida su come distinguere tra utenti del sito web e dell’app.

Le sezioni seguenti trattano varie impostazioni che puoi regolare nelle impostazioni di "Personalizzazione del sito web". Puoi aprire qui le impostazioni di personalizzazione del sito web della tua app.

Nascondi i selettori degli elementi

Usa i selettori per nascondere elementi quando elementi specifici non devono mai essere mostrati dentro l’app. Inserisci i selettori CSS per gli elementi che vuoi nascondere. L’app nasconderà tutti gli elementi corrispondenti quando il tuo sito web viene mostrato dentro l’app.

È perfetto per i prompt di download dell’app, la navigazione duplicata del sito o altri elementi utili sul sito web ma non necessari nell’app.

CSS da iniettare

Di solito i selettori per nascondere elementi sono preferibili perché funzionano più velocemente (nessun flicker prima che il CSS venga applicato), ma puoi anche usare il CSS da iniettare quando i semplici selettori di nascondimento non bastano e vuoi regolare lo stile della pagina dentro l’app. Il CSS viene iniettato nel sito web visualizzato e non devi racchiuderlo in un tag style.

.website-only-banner {
    display: none !important;
}

JavaScript da iniettare

Usa JavaScript da iniettare quando nascondere o modificare elementi richiede logica o non riesci a trovare un buon selettore CSS. Il JavaScript viene eseguito una volta per ogni caricamento pagina dopo l’evento DOMContentLoaded e non devi racchiuderlo in un tag script.

Ecco un esempio che usa un ciclo per nascondere i pulsanti di login social caricati dinamicamente che Apple non consente:

setInterval(() => {
  if (window.location.href.toLowerCase().includes("login")) {
    document.querySelectorAll("button").forEach(btn => {
      const text = btn.textContent.toLowerCase().trim();
      if (
        text.includes("sign in with google") ||
        text.includes("continue with google") ||
        text.includes("sign in with microsoft") ||
        text.includes("continue with microsoft") ||
        text.includes("sign in with facebook") ||
        text.includes("continue with facebook")
      ) {
        btn.style.display = "none";
      }
    });
  }
}, 200);

Prompt per siti web creati con l’IA

Se il tuo sito web è stato creato con uno strumento di IA, puoi usarlo per aiutarti a nascondere elementi. Per esempio, se ti serve un modo semplice per nascondere nell’app tutti gli elementi legati ai pagamenti, puoi dargli questo prompt:

Ci serve un modo semplice per nascondere dal sito web tutti gli elementi legati ai pagamenti. Per farlo, assegna a tutti gli elementi UI relativi ai pagamenti la classe HTML "payment". Se un elemento genitore ha la classe payment, i suoi elementi figli non devono avere la classe perché verranno nascosti automaticamente quando viene nascosto il genitore. Non implementare alcuna logica di nascondimento: questo avviene fuori dal sito web.

Poi aggiungi il selettore CSS .payment ai tuoi selettori per nascondere elementi e tutto ciò che riguarda i pagamenti non verrà più mostrato nell’app.