Adicionando um cabeçalho e rodapé fixos

[Shaneod (Shane)]

Olá pessoal,

Estou pensando em hospedar alguns anúncios. Estou usando o plugin oficial de anúncios, que é ótimo, pois permite adicionar ativos em vários pontos do site.

No entanto, conversando com a agência de publicidade, parece que para obter a melhor visibilidade dos anúncios em dispositivos móveis, que representam a maior parte do meu tráfego, é preciso usar anúncios fixos (sticky ads) no cabeçalho ou rodapé.

O problema, é claro, é que um anúncio fixo ao longo do rodapé cobrirá botões importantes e afetará a experiência do usuário (UX), o que é inaceitável.

Existe alguma maneira de preencher a parte inferior do site com a altura de um banner, para que o banner fixo não afete elementos importantes da UX? Não quero que os usuários precisem fechar o anúncio em banner antes de poderem responder ou usar a contagem de postagens para rolar uma thread.

Além disso, com o cabeçalho fixo no Discourse, ele será afetado por um banner fixo ou o banner poderá ficar acima da barra de navegação do Discourse?

Ou isso é algo que a agência de publicidade deveria ser capaz de resolver com sua tecnologia de anúncios?

Obrigado,

Shane

[Shaneod (Shane)]

Estou pensando que posso adicionar um preenchimento na parte inferior do corpo para que o banner de anúncio fixo no rodapé não se sobreponha aos botões de resposta e, em seguida, na caixa de controle de resposta que aparece, posso definir um z-index para que ela apareça sobre o banner?

Estou apenas querendo saber se alguém já implementou com sucesso banners de anúncios fixos no cabeçalho e/ou rodapé em dispositivos móveis sem impactar a experiência do usuário.

[Don]

Olá

É possível, mas depende de muitas coisas. Você pode compartilhar o URL do seu site?

Eu usaria um plugin outlet e colocaria o banner dentro. Defina a altura do plugin-outlet igual à altura do banner, isso adicionará os espaços necessários.

Algo como isto. Nota: Este é apenas um exemplo rápido, espero que ele lhe dê algumas ideias para alcançá-lo. Podemos fazer mais se você compartilhar mais informações e o URL do seu site para verificar isso, etc…

Mobile / 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>

Mobile / 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)]

Olá @Don - obrigado por responder, eu estava pensando que algo assim seria necessário.

[Shaneod (Shane)]

Olá @Don Como funcionaria essa implementação quando você tenta responder no celular?

[Don]

Funciona, mas o banner superior deixa o compositor menor.

Provavelmente é melhor ocultar o banner quando o compositor estiver aberto.

Existe uma classe .composer-open que você pode usar aqui para ocultar o banner quando o compositor estiver aberto.

Mobile / 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));
  }
}

Editar: Fiz algumas correções no código.

[Shaneod (Shane)]

Ah cara, muito obrigado por essa ajuda - material brilhante!

[Shaneod (Shane)]

Olá @Don - estou testando isso funcionando perfeitamente no celular, apenas adicionando ao desktop e parece que deve funcionar, mas há um pequeno problema quando você clica em responder, ao contrário do celular onde a área de fixação desaparece, no desktop ela permanece no lugar, existe um hook CSS para o composer abrir no desktop?

[Shaneod (Shane)]

Olá @Don - alguma ideia de como fechar o rodapé no desktop? A versão mobile funciona muito bem, mas não consigo descobrir como remover o elemento fixo quando você abre a caixa de resposta no desktop clicando em responder. É CSS além do meu nível de habilidade.

Obrigado

[Don]

Olá @Shaneod

Desculpe pela demora. O código que escrevi acima foi colocado na seção mobile, então só funcionava no mobile. Mudei o código para que ele também se encaixe no desktop. Você precisa colocar isso na seção common e remover o existente do mobile.

Aqui está o atualizado que funciona tanto no desktop quanto no mobile.

Common / 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>

---

Common / 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)]

O Google Ads pode ser exibido nessas áreas? @Don

[Shaneod (Shane)]

Obrigado @Don, muito apreciado amigo!

[Shaneod (Shane)]

@ozkn

Os anúncios do Google podem ser exibidos nessas áreas? @Don

Sim, coloquei um anúncio fixo na área do rodapé. A ocultação da área fixa por Don quando você está respondendo significa que o anúncio não interfere na usabilidade do site!