あなたのウェブサイトにクッキーバナーを追加する方法:コードは必要ありません(テンプレート付き!)

公開: 2018-10-02

最近アクセスするすべてのWebサイトに、Cookieの使用に関する通知が含まれているように見えることに気付いたと思います。 今、あなたは疑問に思うかもしれません…私のサイトはそれらのクッキー同意通知の1つを必要としますか? もしそうなら、どうすれば自分のサイトのCookieバナーを実際に作成できますか?

最初の質問に対する答えは「おそらく」です。 そして2番目の質問については、それがこの投稿のすべてです!

この投稿の残りの部分では、サイトにCookie同意バナーが実際に必要かどうかについての簡単な入門書を入手します。 次に、Getsitecontrolを使用して、特別な知識がなくてもサイトのCookie同意バナーを作成する方法についてのステップバイステップのチュートリアルを共有します。


Getsitecontrolを利用したCookie同意バナーテンプレート ライブプレビューを見る→

とにかく、どのタイプのWebサイトにCookieバナーが必要ですか?

あなたのウェブサイトが欧州連合からの訪問者を受け入れる場合、欧州連合の規制の良い面にとどまりたいのであれば、おそらくクッキー同意バナーが必要です。

もともと2011年に採用され、2018年にGDPRで拡張された、Cookieに関する欧州連合の規則では、ユーザーデータを追跡するCookieを使用するために、基本的に訪問者から「明確なインフォームドコンセント」を取得する必要があります。

これは技術的にはすべてのWebサイトではありませんが、Google Analytics、Facebook Pixel、ソーシャルメディア共有ボタンなどのツールの人気により、Webサイトが少なくともいくつかのトラッキングCookieを使用する可能性がかなりあります。

したがって、実際には、欧州連合からの訪問者を受け入れるほとんどのサイトには、Cookie同意バナーが必要です。 そして、このグローバルな世界では、それがほとんどのサイトです—期間。

簡単に言うと、欧州連合の規制に準拠する場合は、Cookieの同意バナーが必要になる可能性があります。

Cookieの同意通知に含める必要があるものは次のとおりです

Cookieバナーの目的は、訪問者がサイトの使用を開始する前に、Cookieを使用することについてインフォームドコンセントを取得することです。

したがって、次のことを行う必要があります。

  • ユーザーが最初にアクセスした直後にCookie同意バナーを表示します。
  • 訪問者からCookieの使用についてインフォームドコンセントを受け取ります。 通常、これは、プライバシー/ Cookieポリシー、および同意を示すボタンにリンクすることによって行われます。

動作中のCookieバナーの3つの優れた例(これらすべてを再現する方法を学習します!)

わかりました。Cookieバナーが必要です。 今—どこに置きますか?

読者の注意を引き付け、インフォームドコンセントを得るのに十分に見える限り、Cookieバナーを好きな場所に配置できます。

いくつかの例から始めましょう。次に、コードを1行も記述せずに、これらの例を自分のサイトに複製する方法を示します。

1.下部のバーのCookie同意バナー

Vinyl Factoryは、Cookieの同意に最小限のボトムバーを使用します。

Vinyl Factoryは、下部のバナーを使用してCookieの同意メッセージを表示します

2.トップバーのCookie同意バナー

ASI、Advertising Specialty Instituteは、Cookieバナーをページの上部に移動することで、状況を切り替えます。

ASIは、ページの上部にCookieバナーを配置しました

3.スライドインCookie同意バナー

INUSUALは、Cookie同意バナーを左下隅にスライドインとして表示することを選択します(これを右に簡単に切り替えることもできます)。

INUSUALは、スライドインを使用してCookieバナーを表示します

数回クリックするだけでこれらのCookieバナーを追加します

これらの例のいずれかが気に入った場合は、数分以内にWebサイトに直接追加できます。 以下のCookie同意バナーのギャラリーを確認し、[ライブプレビューを表示]ボタンをクリックして、実際の動作を確認してください。 次に、Webサイトに配置するものを選択し、ライブプレビューモードで、簡単な手順に従ってください。

フローティングバー

クッキーポリシーバナーテンプレート-フローティングボトムバー ライブプレビューを見る→

ミニマルなバー

バナーテンプレート-フローティングボトムバー ライブプレビューを見る→

スティッキーバー

クッキー同意メッセージテンプレート-スティッキーバー ライブプレビューを見る→

最小限のスライドイン

Cookieの同意メッセージを備えたスライドイン ライブプレビューを見る→

画像付きのスライドイン

クッキーバナーテンプレート。画像付きスライドイン ライブプレビューを見る→

独自のバナーを作成してみませんか? あなたもそうすることができます。 以下のCookieバナーを作成するには、ステップバイステップガイドに従ってください。

コードを1行も書かずに独自のCookieバナーを作成する方法

さて、楽しい部分です。自分のWebサイトの例のようなCookie同意バナーを作成する方法です。

上記の4つのテンプレートはすべて、Webサイトに複数のポップアップを追加できるツールであるGetsitecontrolを利用しています。 ウィジェットは、フローティングの連絡先ボタン、電子メールのポップアップ、オンラインフィードバックフォーム、または…ご想像のとおり、 Cookieの同意バナーです。

シンプルなインターフェースを使用して、Cookieバナーをカスタマイズできます。

  • 配置
    上記のすべての例に加えて、
  • 文章
    プライバシーポリシーにリンクするオプションを含む
  • ボタン
    ボタンのテキストと色の両方

  • あなたのサイトのデザインに合わせるために

また、Cookieの同意通知がモバイル訪問者にも最適であることを確認する特別なレスポンシブモードも含まれています。 Getsitecontrolを使用してCookieの同意通知を作成する方法は次のとおりです…

ステップ1:WebサイトにGetsitecontrolを追加します

ほとんどの作業はGetsitecontrolWebインターフェイスで行いますが、最初にGetsitecontrolをWebサイトに追加して、公開後にCookie同意バナーを実際に表示できるようにする必要があります。

そのためには、Getsitecontrolアカウントを作成する必要があります。 次に、Getsitecontrolコードスニペットをサイトに追加する必要があります。 WordPressを使用している場合、スニペットを追加する最も簡単な方法は、公式のGetsitecontrolプラグインを使用することです。 それはあなたのために統合を処理します。 他のサイトの場合は、サイトの終了</body>タグの前に手動でコードを追加する必要があります。

これを行う方法がわからない場合は、Getsitecontrolのドキュメントに、次のような最も一般的なプラットフォームの詳細なチュートリアルがあります。

  • Shopify
  • Joomla
  • Squarespace

プロセスが終了したら、次を使用できますコードのインストールボタンGetsitecontrolダッシュボードで、コードが機能していることを確認します。

Getsitecontrolインストールコード

これで、実際のCookie同意通知を作成する準備が整いました。

ステップ2:ギャラリーからテンプレートを選択します

あなたのウェブサイトにクッキー同意通知を追加する最も速い方法は、テンプレートから始めることです。 Getsitecontrolダッシュボードにログインし、をクリックします。 +ウィジェットを作成するGetsitecontrolダッシュボードのボタンをクリックしてから、 テンプレートギャラリー

クッキーバナーテンプレートのギャラリー

ギャラリーのCookieバナーテンプレートにはすでにいくつかの一般的なテキストが含まれていることに注意してください。ただし、必要に応じてコピーとデザインの両方を変更できることに注意してください。

準備ができたら、必要なテンプレートを選択し、右側のプロンプトに従って、Getsitecontrolダッシュボードに追加します。

ステップ3:カラーテーマを変更する(オプション)

テンプレートは、黒と白の2つのデフォルトのカラーテーマで利用できます。 ただし、同意バナーの色をサイトの他の部分と一致させたい場合は、テーマ設定を使用してそれを行うことができます。 Getsitecontrolを使用すると、次の色を設定できます。

  • バックグラウンド
  • ボタン
  • 通常のテキスト
  • ボタンテキスト

Getsitecontrolを使用すると、Cookieバナーの色のテーマを変更できます

ギャラリーから画像を追加したり、コンピューターから画像をアップロードしたりすることもできます。

ステップ4:コンテンツを追加する

同意バナーのスタイルと場所がすべてわかったので、次は訪問者への同意メッセージを調整します。 一般的なテキストはすでに含まれていますが、自由に編集できます。 さらに、Cookieポリシーへのリンクを追加する必要があります。

バナーのコンテンツを設定するには、テキスト編集メニューを開きます。

使用する正確なテキストの要件はありませんが、ここでも、「明確なインフォームドコンセント」を取得することが目標です。 だから、ここにあなたが利用したいと思うかもしれない代替のコピーがあります:

  • タイトル—このウェブサイトはCookieを使用しています
  • 説明—当社のサイトを継続して使用することにより、お客様のエクスペリエンスを向上させ、分析データを収集するためにCookieを使用することを理解したことになります。 詳細については、プライバシーポリシーをご覧ください。
  • ボタンのテキスト—同意します

直感的なテキストエディタを使用して、Cookieバナーのコピーを変更します

プレビューウィンドウの下でモバイルモードに切り替えると、モバイル訪問者にテキストがどのように表示されるかを確認できます。

ステップ5:Cookieの同意通知が表示されるタイミングを制御する

訪問者がサイト内を移動するときに困惑することを避けるために、訪問者がクリックした後にCookieの同意通知が表示されないようにする必要があります。 同意しますボタン。 これを行うには、 ターゲティングタブ。

に移動しますウィジェットの表示を停止しますメニューを選択して選択します+条件を追加。 次に、を選択します閉鎖

適切なターゲティング設定を設定して、Cookieポリシーに同意したユーザーにバナーが表示されないようにします

この場合、「閉鎖」とは、訪問者がボタンをクリックしてCookieの使用に同意することです。 他の設定を変更する必要はありませんターゲティングタブ。

ステップ6:Cookie同意バナーをアクティブ化する

これで、ほぼ完了です。 Cookieの同意通知を公開するために必要なのは、 保存して閉じる右上隅のボタンをクリックして、バナーの構成を完了します。

次に、次のオプションを選択します今すぐアクティブ化アプリによって提案されたように:

Cookieバナーがアクティブ化されました

これを行うと、訪問者はCookieの同意通知を見始めるはずです。 また、ボタンをクリックしてCookieの使用に同意すると、Cookieバナーは表示されなくなります。

Cookieの同意通知を追加するのは難しいことではありません

あなたのウェブサイトをクッキー同意法の良い面に保つことはあなたが開発者を必要とするものではありません。 Getsitecontrolとこの投稿で概説されている原則を使用することにより、1行のコードを記述することなく、独自のカスタマイズ可能なCookie同意バナーを設定できます。

Colin Newcomerは、SEOおよびアフィリエイトマーケティングのバックグラウンドを持つフリーランスのライターです。 彼は主にWordPressとデジタルマーケティングについて書くことにより、クライアントがWebの可視性を高めるのを支援しています。

あなたは、マーケティングの専門家があなたのオンラインビジネスを成長させるための実証済みの戦術を共有するGetsitecontrolブログを読んでいます。 この記事は、カスタマーエンゲージメントセクションの一部です。

ニュースレターを購読する→ Icons8によるメインイラスト