So geht’s: Website-Elemente in deiner App ausblenden

Manchmal enthält eine Website Elemente, die im Browser sinnvoll sind, aber in der App nicht angezeigt werden sollten. Häufige Beispiele sind Banner, die Nutzer auffordern, die App herunterzuladen, Cookie-Banner, die Apple-Reviewer verwirren, Zahlungsbuttons während des App Reviews oder Website-Navigation, die durch das Menü der App ersetzt wird.

Wenn du app-spezifisches Verhalten direkt in deine Website einbauen willst, kannst du auch erkennen, ob ein Besucher die App nutzt. Lies unseren Guide dazu, wie du zwischen Website- und App-Nutzern unterscheidest.

In den folgenden Abschnitten geht es um verschiedene Einstellungen, die du in deinen „Website Customization“-Einstellungen anpassen kannst. Hier kannst du die Website-Customization-Einstellungen deiner App öffnen.

Selektoren um Elemente auszublenden

Nutze „Hide Element Selectors“, wenn bestimmte Elemente in der App niemals angezeigt werden sollen. Gib CSS-Selektoren für die Elemente ein, die du ausblenden möchtest. Die App blendet alle passenden Elemente aus, wenn deine Website in der App angezeigt wird.

Das passt gut für App-Download-Hinweise, doppelte Website-Navigation oder andere Elemente, die auf der Website nützlich sind, aber in der App unnötig.

Einzufügendes CSS

In der Regel sind „Hide Element Selectors“ vorzuziehen, weil sie schneller funktionieren (kein Flackern, bevor CSS angewendet wird). Du kannst aber auch „CSS to Inject“ verwenden, wenn reine Ausblend-Selektoren nicht ausreichen und du das Seiten-Design in der App anpassen willst. Das CSS wird in die angezeigte Website injiziert, und du musst es nicht in ein style-Tag packen.

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

Einzufügendes JavaScript

Nutze „JavaScript to Inject“, wenn das Ausblenden oder Ändern von Elementen Logik erfordert oder du keinen guten CSS-Selektor findest. Das JavaScript läuft einmal pro Seitenaufruf nach dem DOMContentLoaded-Event, und du musst es nicht in ein script-Tag packen.

Hier ist ein Beispiel, das mit einer Schleife dynamisch geladene Social-Login-Buttons ausblendet, die Apple nicht erlaubt:

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 für KI-erstellte Websites

Wenn deine Website mit einem KI-Tool erstellt wurde, kannst du das nutzen, um dir beim Ausblenden von Elementen zu helfen. Wenn du z. B. alle zahlungsbezogenen Elemente in der App einfach ausblenden willst, kannst du ihm diesen Prompt geben:

Wir brauchen eine einfache Möglichkeit, alle zahlungsbezogenen Elemente auf der Website auszublenden. Gib dazu allen UI-Elementen, die mit Zahlungen zu tun haben, die HTML-Klasse „payment“. Wenn ein übergeordnetes Element die payment-Klasse hat, müssen seine Kindelemente die Klasse nicht auch haben, da sie automatisch ausgeblendet werden, wenn das übergeordnete Element ausgeblendet wird. Implementiere keine Ausblend-Logik, das passiert außerhalb der Website.

Füge anschließend den CSS-Selektor .payment zu deinen „Hide Element Selectors“ hinzu und alles Zahlungsbezogene wird in der App nicht mehr angezeigt.