Auto mode

Bv
Last updated 2 months ago

This documentation is for using Metomic in Auto mode. If you are unfamiliar with Standard/Auto, check the difference here

What is Auto mode?

Metomic Auto mode is a stripped down version of Metomic that allows you to control the behaviour of your webpage by setting a data-metomic-policy="..." attribute on elements or scripts.

If you are a developer, you probably want Standard mode

Getting started

The simplest way to get started with Metomic is to add the following snippet to your website.

<link rel="stylesheet" href="https://metomic.io/metomic.css" />
<script type="text/javascript"
src="https://metomic.io/metomic.js"
data-metomic-client-id="YOUR_METOMIC_CLIENT_ID"></script>

Note: You will need to replace YOUR_METOMIC_CLIENT_ID with your Metomic client id. This can be found in the Developer section of the dashboard.

This will immediately enable the following features:

Cookie consent

Metomic's cookie consent logic will automatically load into the page. If the user has not consented to the use of cookies, a small opt-in widget will display.

The content of this widget can be customised in the dashboard

Disabling scripts based on consent

Metomic also allows you to prevent scripts from loading if they depend on a policy that has not been consented to.

To use this feature, you must set two attributes on the script:

  • data-metomic-policy="YOUR_POLICY_ID"

  • type="text/x-metomic"

For example, to disable Google Analytics from loading until appropriate cookie consent has been given, you would turn this:

<!-- Google Analytics -->
<script>
... google analytics loader script
</script>
<!-- End Google Analytics -->

into this:

<!-- Google Analytics -->
<script data-metomic-policy="cookies:statistics" type="text/x-metomic">
... google analytics loader script
</script>
<!-- End Google Analytics -->

In the above example, cookies:statistics is a reference to the statistics part of the cookies policy configured in the dashboard. Only when the user has consented to the collection of statistics will the GA script load.

It is vital that the type attribute is set to text/x-metomic and not text/javascript! The Metomic library will warn you if it detects the type attribute is misconfigured.

Showing elements based on consent

Unavailable until version 0.3.0, releasing Friday 2nd November 2018

Metomic allows you to dynamically show parts of your web page when a user has opted in to a particular policy.

To use this feature, simply attach an attribute of the form data-metomic-policy="YOUR_POLICY_ID" to any HTML element:

<!-- This element will only render if the user
has consented to the social-sharing policy -->
<div data-metomic-policy="social-sharing">
We hope you enjoyed our article!
<a href="#">Click here</a> to share this on Facebook.
</div>

Control via data-metomic tags is designed for simple use cases where the content of the page is rendered up front. If you are dynamically rendering content in the page, , you probably want to use Metomic in Standard mode instead.

Asking the user for consent

Unavailable until version 0.3.0, releasing Friday 2nd November 2018

Metomic allows you to trigger a consent popup by attaching a data-metomic-policy="..." and a data-metomic-action="trigger" to an element.

<!-- This button requests consent for a policy with id "recommendations" -->
<button data-metomic-policy="recommendations" data-metomic-action="trigger" />
<!-- and for the sake of example, this section will display when consent is provided -->
<div data-metomic-policy="recommendations">
Ok, great! Fill the details below and we'll get you started with recommendations.
...
</div>

Wrapping up

Metomic Auto mode provides a few basic "hands-free" utilities to start putting privacy-first design into your website. If you need more power, it might be time to look at using Metomic in Standard mode