Cookie Consent

A cookie consent is mandatory for non-essential third-party cookies. At Epic Fantasy Forge, the only non-essential third-party cookies used are from Featurebase.

Whilst the name implies that a cookie consent is only about cookies, it should also cover setting of local storage by third-parties.

GetTerms

We will use GetTerms for our cookie consent. GetTerms can provide a cookie consent script which we can integrate into our app. The script will automatically block third-party cookies until the user has given their consent. The GetTerms script also displays a cookie consent pill on the UI.

List Cookies

Before configuring the UI pill to display in our app, we should first list the cookies our app is using. To do so, go the "Overview" page of your organization in GetTerms. From the Overview page, click on "Cookie Management" on the left sidebar:

You should now see a list of the cookie categories. To view the cookies per category open the relevant accordions. Epic Fantasy Forge we only use "Essential Cookies" and "Functional Cookies":

To add new cookies click the "Add cookie" button:

Now fill out the the relevant fields on the form for your cookie. Below you can find as an example the filled out form for the Phoenix Framework session cookie, which is an essential cookie:

Web App

To find out which cookies our web app is setting, we can in a web browser right-click on our page and choose "Inspect":

Then switch to the "Storage" tab and cookies and anything set in "Local Storage" will be listed:

Tauri App

Similarly, the procedure to find the cookies set in our Tauri app is essentially the same. On a development build of our Tauri app we can right-click inside the app and choose "Inspect Element":

Then we can switch to the "Storage" tab to view what cookies have been set and what has been stored in local storage:

UI Pill

We can configure how our cookie consent pill should look and what its content should be in the GetTerms UI. To do so, click "Appearance" under the "Cookie Banner" section on the left sidebar on GetTerms.

Customize the font and colors as per your preference. On Epic Fantasy Forge some colors were customized to better match the design of the rest of the Epic Fantasy Forge app.

Set "Same Style for all Buttons" to "On". In this way the "Accept All" and "Reject All" buttons have the same appearance which is good for legal compliance. If the "Reject All" button is less prominent than the "Accept All" button then there could be a legal issue with your app in some jurisdictions. At least that is my understanding, naturally I am not a lawyer.

For "Appearance" the "Pill" option was chosen for Epic Fantasy Forge as it is not so intrusive. For the same reason the "Block page interaction until preferences are set" was set to "Off". It is not a problem if the user leaves the cookie consent pill open permanently without reacting to it, in this case it is simply assumed the user has not consented and the third-party cookies remain blocked by the GetTerms script.

Once you are done configuring the appearance of the cookie consent pill click "Save":

To change the cookie banner configuration, click on "Configuration" under the "Cookie Banner" section on the left sidebar. It is recommended to turn on all of the following:

Allow users to specify Cookie Preferences
Allow users to reject all cookies
Enable auto-blocking of scripts likely to set third-party cookies

Once you are done configuring your cookie banner click "Save":

Next we will change the content of the cookie banner. To do so, click on "Content" under the "Cookie Banner" section in the left sidebar. Update the "Link to Cookie Policy" to point to your cookie policy, e.g. in the case of Epic Fantasy Forge it points to https://epicfantasyforge.com/cookie-policy.

Customize the other fields such as the "Widget Pill Message" or "Widget Banner Title" to your preferences.

Warning

When modifying the text of the cookie consent banner there is a risk of legal issues if the custom text is not reviewed by a lawyer.

Once you are done customizing the content of the cookie consent banner click "Save":

Tests

E2E Test

Before implementing the cookie consent we will create an E2E test in [Qase]{:target="_blank"}. Add a new test case to the "Common" suite named "Cookie Consent":

Integration Tests

There is nothing for us to test at the integration level as there is no logic regarding the cookie consent on the Epic Fantasy Forge side. The logic comes from GetTerms.

Unit Tests

There is nothing for us to test at the unit level as there is no logic regarding the cookie consent on the Epic Fantasy Forge side. The logic comes from GetTerms.

Production Code

To take the GetTerms cookie consent banner into use click "Installation" in the "Cookie Banner" section on the GetTerms page. Then click the "Copy" button beside the script that is displayed:

Web

To take the GetTerms cookie consent pill into use in our web app, paste the script you copied above into the <head> section of your root.html.heex, for example:

root.html.heex

<!-- Cookie Consent -->
    <script
      type="text/javascript"
      src="https://app.getterms.io/cookie-consent/embed/41c1f579-df01-456d-9af8-413abe365f56/en-us">
    </script>

It is important that this <script> is the first script in the <head> element of your root.html.heex.

Now when you run your Phoenix web app, the cookie consent pill should appear:

Tip

If you would like to see the cookie consent pill again (e.g. for testing purposes), but you have already accepted or rejected cookies so the pill is not shown anymore, you can make it appear again by deleting the GetTerms entry from Local Storage and then reloading the web page:

App

To take the GetTerms cookie consent pill into use in our Tauri app, paste the script you copied above into <head> section of your app.html, for example:

root.html.heex

    <!-- Cookie Consent -->
    <script
      type="text/javascript"
      src="https://app.getterms.io/cookie-consent/embed/<ID>/en-us">
    </script>

It is important that this <script> is the first script in the <head> element of your app.html.

Now when you run your Phoenix desktop app, the cookie consent pill should appear:

On a mobile device the cookie consent pill should look something like this:

Tip

If you would like to see the cookie consent pill again (e.g. for testing purposes), but you have already accepted or rejected cookies so the pill is not shown anymore, you can make it appear again by deleting the GetTerms entry from Local Storage and then restarting the app. On the mobile app it may be necessary to uninstall the app to get rid of the cookies and local storage.