Einen Sticky-Header und -Footer hinzufügen

[Shaneod (Shane)]

Hallo Leute,

Ich schaue mir an, wie ich einige Anzeigen schalten kann. Ich benutze das offizielle Anzeigen-Plugin, das großartig ist, da es Ihnen ermöglicht, Assets an verschiedenen Stellen auf der Website hinzuzufügen.

Im Gespräch mit der Werbeagentur scheint es jedoch, dass für die beste Sichtbarkeit von Anzeigen auf Mobilgeräten, die den Großteil meines Traffics ausmachen, Sticky Ads entweder im Header oder Footer verwendet werden sollten.

Das Problem ist natürlich, dass eine Sticky Ad am unteren Rand wichtige Schaltflächen überlagert und die Benutzererfahrung beeinträchtigt, was ein No-Go ist.

Gibt es eine Möglichkeit, die Unterseite der Website um die Höhe eines Banners zu erweitern, damit das Sticky Banner keine wichtigen UX-Elemente beeinträchtigt? Ich möchte nicht, dass Benutzer das Banner-Ad schließen müssen, bevor sie antworten oder die Beitragsanzahl zum Scrollen durch einen Thread verwenden können.

Wird sich das Sticky Header bei Discourse auch durch ein Sticky Banner beeinträchtigen lassen oder könnte das Banner über der Discourse-Navigationsleiste sitzen?

Oder ist dies etwas, das die Werbeagentur mit ihrer Ad-Tech lösen kann?

Danke,

Shane

[Shaneod (Shane)]

Ich denke, ich könnte dem Body unten etwas Polsterung hinzufügen, damit das Sticky-Footer-Werbebanner die Antwortschaltflächen nicht überlagert, und dann könnte ich dem Antwortsteuerfeld, das sich öffnet, einen z-Index geben, damit es über dem Banner erscheint?

Ich frage mich nur, ob jemand erfolgreich Sticky-Header- und/oder Footer-Banner-Anzeigen auf Mobilgeräten implementiert hat, ohne die Benutzererfahrung zu beeinträchtigen.

[Don]

Hallo

Es ist möglich, aber es hängt von vielen Dingen ab. Können Sie Ihre Website-URL teilen?

Ich würde ein Plugin-Outlet verwenden und das Banner darin platzieren. Stellen Sie die Höhe des Plugin-Outlets gleich der Höhe des Banners ein, dies fügt die notwendigen Abstände hinzu.

So etwas. Hinweis: Dies ist nur ein schnelles Beispiel, ich hoffe, es gibt Ihnen einige Ideen, wie Sie es erreichen können. Wir können mehr tun, wenn Sie weitere Informationen und Ihre Website-URL zum Überprüfen usw. teilen

Mobil / Header

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
  <div class="test-top-banner"></div>
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
  <div class="test-bottom-banner"></div>
</script>

Mobil / CSS

body {
  --banner-height: 40px;
  
  .d-header-wrap {
    top: var(--banner-height);
  }

  .above-site-header-outlet.top-banner {
    @include sticky;
    top: 0;
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-top-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }

  .below-footer-outlet.bottom-banner {
    @include sticky;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-bottom-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }
  
  #topic-progress-wrapper:not(.docked) {
    margin-bottom: var(--banner-height);
  }  
}

[Shaneod (Shane)]

Hallo @Don – danke für die Rückmeldung, ich dachte mir schon, dass so etwas erforderlich sein könnte.

[Shaneod (Shane)]

Hallo @Don Wie würde diese Implementierung funktionieren, wenn Sie versuchen, auf dem Handy zu antworten?

[Don]

Es funktioniert, aber das obere Banner verkleinert den Composer.

Es ist wahrscheinlich besser, das Banner auszublenden, wenn der Composer geöffnet ist.

Es gibt eine Klasse .composer-open, auf die Sie hier abzielen können, um das Banner auszublenden, wenn der Composer geöffnet ist.

Mobil / CSS

body {
--banner-height: 40px;
  // Header
  .d-header-wrap {
    top: var(--banner-height);
    transition: top 0.25s ease-in;
    .composer-open & {
      top: 0;
    }
  }
  // Top banner
  .above-site-header-outlet.top-banner {
    @include sticky;
    top: 0;
    width: 100%;
    height: var(--banner-height);
    transition: height 0.25s ease-in;
    z-index: z("header");
    .test-top-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
      transition: height 0.25s ease-in;
      .composer-open & {
        height: 0;
      }
    }
    .composer-open & {
      height: 0;
    }
  }
  // Bottom banner
  .below-footer-outlet.bottom-banner {
    @include sticky;
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    height: var(--banner-height);
    z-index: z("header");
    .test-bottom-banner {
      width: 100%;
      height: var(--banner-height);
      background: red;
    }
  }
  // Move topic progress wrapper the top of the bottom banner
  #topic-progress-wrapper:not(.docked) {
    margin-bottom: var(--banner-height);
    .composer-open & {
      margin-bottom: 0;
    }
  }
  // Add banner height to composer max height calculation
  &:not(.ios-safari-composer-hacks) #reply-control.open {
    max-height: calc(100vh - var(--header-offset) + var(--banner-height));
  }
}

Bearbeiten: Ich habe einige Korrekturen am Code vorgenommen.

[Shaneod (Shane)]

Vielen Dank für diese Hilfe – brillante Arbeit!

[Shaneod (Shane)]

Hallo @Don – Ich teste das gerade auf dem Handy und es funktioniert super. Ich füge es gerade zum Desktop hinzu und es sieht so aus, als sollte es funktionieren, aber es gibt ein kleines Problem, wenn man auf Antworten klickt. Anders als auf dem Handy, wo der feste Bereich verschwindet, bleibt er auf dem Desktop an Ort und Stelle. Gibt es einen CSS-Hook für den sich öffnenden Composer auf dem Desktop?

[Shaneod (Shane)]

Hallo @Don - Irgendeine Idee, wie man den Footer auf dem Desktop schließt? Die mobile Version funktioniert super, aber ich kann nicht herausfinden, wie man das feste Element entfernt, wenn man das Antwortfeld auf dem Desktop öffnet, indem man auf Antworten klickt. Das ist CSS, das meine Fähigkeiten übersteigt.

Danke

[Don]

Hallo @Shaneod

Entschuldigung für die Verzögerung. Der von mir oben geschriebene Code befindet sich im mobilen Bereich und funktioniert daher nur auf Mobilgeräten. Ich habe den Code geändert, damit er auch auf Desktops passt. Sie müssen dies im gemeinsamen Bereich platzieren und das vorhandene aus dem mobilen Bereich entfernen.

Hier ist das aktualisierte, das sowohl auf dem Desktop als auch auf dem Handy funktioniert.

Gemeinsam / Header

<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
  <div class="test-top-banner"></div>
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
  <div class="test-bottom-banner"></div>
</script>

---

Gemeinsam / CSS

body {
  --banner-height: 40px;
}

.d-header-wrap {
  top: var(--banner-height);
  transition: top 0.25s ease-in;
  .composer-open & {
    top: 0;
  }
}
  
.sidebar-wrapper {
  html:not(.composer-open) & {
    height: calc(var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px) - var(--banner-height));
  }
}

.above-site-header-outlet.top-banner {
  @include sticky;
  top: 0;
  width: 100%;
  height: var(--banner-height);
  transition: height 0.25s ease-in;
  z-index: z("header");
  .test-top-banner {
    width: 100%;
    height: var(--banner-height);
    background: red;
  }
  .composer-open & {
    height: 0;
  }
}

.below-footer-outlet.bottom-banner {
  @include sticky;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  html:not(.composer-open) & {
    height: var(--banner-height);
  }
  z-index: z("composer", "content") - 1;
  .test-bottom-banner {
    width: 100%;
    height: var(--banner-height);
    background: red;
  }
}
  
#topic-progress-wrapper:not(.docked) {
  margin-bottom: var(--banner-height);
  .composer-open & {
    margin-bottom: 0;
  }
}
  
body:not(.ios-safari-composer-hacks) #reply-control.open {
  max-height: calc(100vh - var(--header-offset) + var(--banner-height));  
}

[ozkn (Mathx)]

Können Google Ads in diesen Gebieten geschaltet werden? @Don

[Shaneod (Shane)]

Danke @Don, sehr geschätzt, Kumpel!

[Shaneod (Shane)]

@ozkn

Können Google Ads in diesen Bereichen angezeigt werden? @Don

Ja, ich habe eine Sticky-Anzeige im Fußbereich platziert. Dons Verstecken des Sticky-Bereichs, wenn Sie antworten, bedeutet, dass die Anzeige die Benutzerfreundlichkeit der Website nicht beeinträchtigt!