スティッキーヘッダーとフッターを追加する

[Shaneod (Shane)]

皆さん、こんにちは。

広告の掲載を検討しています。サイトのさまざまな場所にアセットを追加できる公式広告プラグインを使用しています。

しかし、広告代理店と話したところ、モバイルでの広告表示を最大化するには、ヘッダーまたはフッターのスティッキー広告を使用するのが最善とのことです。私のトラフィックのほとんどはモバイルです。

問題は、フッターのスティッキー広告が重要なボタンを覆い、UXに影響を与える可能性があることです。これは避けたいです。

バナーの高さに合わせてサイトの底部にパディングを追加して、スティッキーバナーが重要なUX要素に影響しないようにする方法はありますか？ユーザーが返信したり、投稿数をスクロールしてスレッドを下に移動したりするために、バナー広告を閉じなければならないようにはしたくありません。

また、Discourseのスティッキーヘッダーは、スティッキーバナーの影響を受けますか？または、バナーをDiscourseのナビバーの上に配置することはできますか？

それとも、これは広告代理店が広告技術で解決できる問題でしょうか？

よろしくお願いします。

シェーン

[Shaneod (Shane)]

本文の末尾にパディングを追加して、画面下部に固定表示される広告バナーが返信ボタンに重ならないようにし、さらにポップアップ表示される返信コントロールボックスにはz-indexを設定してバナー広告の上に表示されるようにできるのではないかと考えています。

モバイルで、ユーザーエクスペリエンスに影響を与えることなく、画面上部および/または下部に固定表示される広告バナーを実装することに成功した方がいらっしゃいましたら、ご教示いただけますでしょうか。

[Don]

こんにちは

可能です。ただし、多くの要因に依存します。サイトのURLを共有していただけますか？

プラグインのアウトレットを使用し、バナーをその中に配置することをお勧めします。プラグインアウトレットの高さをバナーの高さと同じに設定すると、必要なスペースが追加されます。

以下のようなものです。注：これはあくまで簡単な例です。これを達成するためのアイデアがいくつか得られることを願っています。より多くの情報やサイトのURLを共有していただければ、さらに対応できます。

モバイル / ヘッダー

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

モバイル / 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)]

@Donさん、ご連絡ありがとうございます。そのような対応が必要になるかもしれないと考えていました。

[Shaneod (Shane)]

@Don様、モバイルで返信する際、その実装はどのように機能しますか？

[Don]

動作はしますが、トップバナーが表示されるとコンポーザーが小さくなります。

コンポーザーが開いているときは、バナーを非表示にする方が良いでしょう。

.composer-open というクラスがあるので、コンポーザーが開いているときにバナーを非表示にするためにターゲットにできます。

モバイル / CSS

body {
--banner-height: 40px;
  // ヘッダー
  .d-header-wrap {
    top: var(--banner-height);
    transition: top 0.25s ease-in;
    .composer-open & {
      top: 0;
    }
  }
  // トップバナー
  .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;
    }
  }
  // ボトムバナー
  .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);
    .composer-open & {
      margin-bottom: 0;
    }
  }
  // コンポーザーの最大高さ計算にバナーの高さを追加
  &:not(.ios-safari-composer-hacks) #reply-control.open {
    max-height: calc(100vh - var(--header-offset) + var(--banner-height));
  }
}

編集：コードを修正しました。

[Shaneod (Shane)]

おお、この助けに本当に感謝します。素晴らしいです！

[Shaneod (Shane)]

@Don さん - モバイルでは正常に動作するテストが完了しました。デスクトップに追加しているのですが、機能するはずですが、返信を押したときに問題が発生します。モバイルではスティックエリアが消えますが、デスクトップでは所定の位置にとどまります。デスクトップでコンポーザーが開くための CSS フックはありますか？

[Shaneod (Shane)]

@Donさん、フッターをデスクトップで閉じる方法について何かアイデアはありますか？モバイル版はうまく機能しますが、デスクトップで返信をクリックして返信ボックスを開いたときに、スティッキーな要素を削除する方法がわかりません。CSSは私のスキルレベルを超えています。

よろしくお願いします。

[Don]

こんにちは @Shaneod 様

遅れて申し訳ありません。上記で書いたコードはモバイルセクションに配置されていたため、モバイルでのみ機能していました。デスクトップにも対応できるようにコードを変更しました。このコードをコモンセクションに配置し、モバイルから既存のコードを削除する必要があります。

以下は、デスクトップとモバイルの両方で機能する更新されたコードです。

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

これらの地域でGoogle広告を表示できますか？ @Don

[Shaneod (Shane)]

@Don、ありがとうございます。助かります！

[Shaneod (Shane)]

@ozkn

これらのエリアにGoogle広告を表示できますか？ @Don

はい、フッターエリアに固定広告を配置しました。返信時に固定エリアを非表示にするDonの機能により、広告がサイトの使いやすさを妨げることはありません！