Webflow でクエリパラメータによってコンテンツを出し分ける

はじめに

Webflow でちょっとしたダイナミックコンテンツを表示する方法について検討しました。

今回のユースケースとしては、既存サービスの一部静的ページを Webflow でホスティングし、センシティブに当たらない程度のデータを既存サービスで生成するリンク等を通してURLパラメータで渡し、コンテンツの出しわけを行う場面を想定しています。

前提事項

Webflow は任意の課金プランを使用する想定です。この記事の方法では、Custom Code の機能を使用します。

実装例

<script>
  const params = new URLSearchParams(location.search)

  // A. 要素の表示・非表示を切り替える
  updateVisibleElements('segment__only-guest', params.get('isGuest') === 'true')

  // B. 渡されたパラメータを表示する
  updateVariableElements('variable__age', params.get('age'))

  function updateVisibleElements(className, visible) {
    const elements = document.getElementsByClassName(className)
    for (element of elements) {
      element.style.display = visible ? 'block' : 'none'
    }
  }

  function updateVariableElements(className, text) {
    const elements = document.getElementsByClassName(className)
    if (elements.length > 0 && !text) {
      return console.error('Required parameter not present: text in showVariableElement')
    }
    for (element of elements) {
      element.innerText = text
    }
  }
</script>

URLパラメータのパースについて

URLSearchParams を使っているので、IEには対応していません。IEに対応するには、自前でパーサーを書くなどして対応する必要があります。
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Custom Code の設定

Project Settings > Custom Code からカスタムコードを編集します。
Footer Code に 上記の実装例を貼り付けて保存します。

特定のページでしか使用しないことが明らかであれば、 Page settings の方で設定した方が良さそうです。

使用箇所の例

Designer 画面での基本操作については省略します。

A. 要素の表示・非表示を切り替える

1. ここでは例として Container を設置します。 Selector で class を設定できる要素であればなんでも大丈夫です。
2. JavaScriptで定義している segment__only-guest を class に設定します。

B. 渡されたパラメータを表示する

1. 例では文章中の文言の一部を置き換えるイメージとしてやるので、 Paragraph を設置します。
2. Paragraph 中の一部を範囲選択すると、メニューが表示されます。🖌 のアイコンから Span で包むことができます。この XX の部分が実質デフォルト値となるため任意に設定しておきます。
   
   
3. Span の要素に対して variable__age を class に設定します。
   

Publish して表示確認

何もクエリパラメータを渡さずに表示した場合

URLの例: https://xxx.webflow.io/

年齢の部分が XX 歳のまま表示されます。ゲストユーザ向けコンテンツは表示されません。

isGuest=true を付加した場合

URLの例: https://xxx.webflow.io/?isGuest=true

ゲストユーザ向けコンテンツが表示されるようになります。

さらに age=20 を付加した場合

URLの例: https://xxx.webflow.io/?isGuest=true&age=20

年齢の部分に20が表示されるようになります。

おわりに

NoCode系のWeb制作ツールだと、自由にJavaScriptを記述できないケースも多いので、拡張性高めなツールを検討している方の参考になると幸いです。

あと、URLパラメータをコンテンツにしようすることは、ユーザによって意図しない表示をされる可能性もあるので、注意して利用用途を狭く限定した上で活用していくべき。