Opt In - Opt Out (Action)

The Opt in - Opt Out Action plugin allows you to offer a website visitor the extent to which their browsing experience is personal and dynamic. It does so by presenting the website visitor three different browsing experience levels that allow the website to store and track varying amounts of information about them. This gives the website visitor control not only over their privacy but, more importantly, control over the quality of their browsing experience because it allows them to select the extent to which their browsing experience is personal and relevant to them. The more personal information that they allow to be stored and tracked, the richer their experience will be because the website can serve up content that is more targeted and meaningful for each individual visitor and at the right time.

The Opt in - Opt out interaction/variant consists of three parts referred to as the Notification, the Footer, and finally the Selector.

The Notification is a pop-up window that displays for all visitors who have not chosen a personal experience level. The Notification displays text that explains the Opt in - Opt out process. If the visitor clicks the hyperlink to continue, the Selector appears.

Example Notification:

The Footer is a short message, usually one sentence, that alerts the visitor that they can change their permission settings. To ensure that website visitors always have access to their permission settings, it is recommended that the Footer always remain visible. The Footer contains a hyperlink that, when clicked, displays the Selector.

Example Footer:

The Selector is a pop-up window in which website visitors select their personal experience level. They are given the choice of a completely non-personal and private experience that only shows static content (Level 0), a more personalized experience in which a limited set of anonymous details about them are stored and tracked (Level 1), and a highly personalized, dynamic experience level in which BlueConic is able to offer them the most relevant and personalized content (Level 2).

Example Selector:

Note: To help website visitors make the right choice for their permission settings, you can use the Profile Properties with Permission Levels interaction. This interaction displays the profile properties that are tracked for each permission level. Note: The Profile Properties with Permission Levels interaction is an example of how you can show which profile properties fall under which permission levels. The version of this interaction provided by BlueConic is not meant to be used in production environments. Contact your application manager for more information on this interaction.


Changing permission settings

The website visitor can change their permission settings at any time if the Footer is always visible. This means that the visitor has constant control over their browsing experience and can increase their privacy or enhance their personal browsing experience at will. When a website visitor changes their permission settings, the change(s) are immediate; if they go from a higher level to a lower one (increased privacy) any personal and/or anonymous data that has been gathered will be deleted from their profile. If they select the most private level (Level 0), their entire profile will be deleted.


Opt in - Opt out configuration

Follow the steps below to configure the Interaction section for an Opt in - Opt out interaction/variant. The configuration for the Opt in - Opt out interaction/variant consists of 4 subsections, each of which is explained in detail in the following sections.


The Opt in - Opt out Notification displays text that allows you to explain that your website uses cookies and gives them one or more options that allow them to proceed. The Notification displays for all visitors who have not yet selected a permission level. The Notification subsection contains the following settings:

Position

Use the position drop-down to select where on the page the Notification appears. The options are:

PositionDescription
Top The Notification appears at the top of the screen, centered.
Bottom The Notification appears at the bottom of the screen, centered.

Timing

The Timing settings defines how long the Notification appears on the web page. The options are:

PositionDescription
Show until visitor clicked The Notification displays until the user clicks either the "Close" button or the hyperlink to the Selector.
Hide after x seconds The Notification displays until the specified number of seconds has elapsed, after which it closes.

Notification text and options

The Notification presents a series of choices to the visitor which they can select in order to go further. For each option, a specific action is assigned to it that will be executed when the visitor clicks it. To modify the Notification text and/or which options are available, follow the steps below:

  1. Click the "Edit" link to the right of the Notification Preview.
  2. In the top text field, modify the text that appears in the Notification. The text should be brief and explain what options you are giving them regarding the selection of a permission level.
  3. In the bottom three fields, you can define which options are available to the visitor. Each option is coupled with a clickable choice that appears next to the Notification text. The options are described below. They can only be selected once:

    OptionDescription
    Open Selector By default, the "Set Permissions" option displays in the Notification. When it is clicked, the Selector opens. The default button text in the left column can be modified.
    Close Notifier The "Later" option displays in the notification. When the visitor clicks "Later", the notification will close. The default text in the left column can be modified.
    Set profile to Level 0 (Opt out) The "Decline Cookies" option displays in the notification. When the visitor clicks "Decline Cookies", their permission level will be set to 0 (Opt out). The default button text in the left column can be modified.
    Set profile to Level 1 The "Accept Cookies" option displays in the notification. When the visitor clicks "Accept Cookies", their permission level will be set to 1. The default button text in the left column can be modified.
    Set profile to Level 2 The "Accept Cookies" option displays in the notification. When the visitor clicks "Accept Cookies", their permission level will be set to 2. The default button text in the left column can be modified.

     

  4. Click [OK]. The preview changes to reflect your modifications.




In the Selector, the website visitor selects their browsing experience (permission level). The Selector contains three radio buttons, each with an explanation that helps the website visitor select their desired browsing experience. The three levels of personal browsing experience are:

LevelDescription
Level 0 BlueConic will gather no anonymous or personal information about the visitor. The result is that the visitor's experience will be impersonal and they will only be served static content.
Level 1 BlueConic gathers anonymous, statistical information that is used to optimize the visitor's experience on the website.
Level 2 BlueConic allows sharing via social media and will store personal data and preferences. As a result, the website visitor's experience will be highly personal and relevant (assuming that you have created Interactions that respond to the visitor's browsing behavior).

Selector text

The preview of the Selector shows the currently defined text as well as how it will appear to visitors on your website. The Selector allows the website visitor to choose the extent to which their experience is personalized. The text in the Selector should explain to the website visitor that they can choose a personal experience level for the website and what details are stored and tracked for each of the three levels. To edit the text in the Selector, click [Edit] to the right of the Selector text you want to edit. The Selector text is divided into the sections described below. You can modify the text as you desire. The default text in the Selector provides you an example of how to explain the choices the visitor has and what effect(s) the choice they make has on their personal browsing experience.

SectionDescription
Title The title of the Selector.
Introduction Text that summarizes the purpose of the Selector.
Level 0 Text for Level 0.
Level 0 description The Level 0 option gives the website visitor the highest level of privacy. The description of this level is divided into four text fields (see the figure below). In the top field, enter the text that will appear next to the radio button. In the second field, you should enter text that informs the website visitor that no cookies will be used and that no anonymous or personal information will be stored or tracked and that they will only be served static content. The third field is hyperlink text that links to the URL you enter in the bottom field. This allows you to, for example, link to a URL where a complete explanation of this permission level appears.
Level 1 Text for Level 1.
Level 1 description The Level 1 option the website visitor a more personalized experience. The description of this level is divided into four text fields (see the figure below). In the top field, enter the text that will appear next to the radio button. In the second field, you should enter text that informs the website visitor that anonymous, statistical information will be stored and tracked in order to optimize their browsing experience. The third field is hyperlink text that links to the URL you enter in the bottom field. This allows you to, for example, link to a URL where a complete explanation of this privacy level appears.
Level 2 Text for Level 2.
Level 2 description The Level 2 option gives the website visitor the ultimate personal experience. The description of this level is divided into four text fields (see the figure below). In the top field, enter the text that will appear next to the radio button. In the second field, you should enter text that informs the website visitor that they can share information via social media and that their personal data and preferences will be stored and tracked. The third field is hyperlink text that links to the URL you enter in the bottom field. This allows you to, for example, link to a URL where a complete explanation of this privacy level appears.
Link to Privacy Policy This text is intended to inform the visitor that they can follow a link to view a full explanation of your privacy policy. This explanation is divided into four fields (see the second figure below). In the top text field, enter text that alerts the visitor that they can be linked to your full privacy policy. In the middle left field, enter the text that will be a hyperlink. In the middle right field you can enter text that appears to the right of the hyperlink. In the bottom field, enter the URL where the visitor can view your full privacy policy.
OK button This is the text for the button that submits the permission setting selected by the website to BlueConic ("OK" by default).
Cancel button This is the text for the action that cancels the changes the website visitor has made to their permission setting ("Cancel" by default)..



Text fields for the descriptions of the levels



Text fields for the description of the link to your privacy policy

Recommended Level

The Recommended Level option allows you to suggest a permission level to the website visitor. Select the recommended level from the drop-down list and then click [Save]. The radio button for the level you select will be the default selected level when the Selector appears on the web page.



The Selector pop-up appears in a lightbox on the web page. The following is an example of the default Selector:




The Footer is text, including a hyperlink, which provides the website visitor constant access to their permission settings. You can define the position on the page where the footer text appears and modify the text that appears in the Footer. If the Footer is always visible, try to keep the text as short as possible — You can provide more details about the permission settings in the Selector. The Footer contains the following settings:

Position

Use the position drop-down to select where on the page the Summary text appears. The options are:

PositionDescription
Don't Show The Footer is not shown on the web page. It is therefore not possible for website visitor to select their permission setting.
Bottom Left The Footer appears at the bottom left part of the screen.
Bottom Right The Footer appears at the bottom right part of the screen.
Bottom Center The Footer appears at the bottom center part of the screen.
Selector Enter a valid jQuery selector to select the position on the screen where the footer appears. For complete information on jQuery selectors, see http://api.jquery.com/category/selectors/. To define the position using the Visual Picker, click Visual Picker.

Footer text

The Preview shows how the text of the Footer appears on the web page. To modify the text, click [Edit] to the right of the existing text. Three text fields appear. Modify the text in the fields as desired. The text in the middle field is a hyperlink that, when clicked, will link to the Selector. Click [OK] to save the changes or click [Cancel] to cancel the changes.


The following is an example of how the default Footer appears on a website:


In the Styling subsection, you can select the color scheme to use for the Opt in - Opt out interaction's Notification and Selector. It is also possible to specify a CSS file that contains a custom scheme that will be used.

Basic Theme

The default BlueConic options for the basic theme of the Opt in - Opt out interaction's look and feel are:

Custom CSS URL

Use this option to specify a custom CSS to use for rendering the Notification, Footer and Selector. To you create your own CSS for the Opt in - Opt out interaction, you can best do so by evaluating the default BlueConic CSS and then creating a CSS file that defines the exceptions to the default BlueConic CSS. The default BlueConic Opt in - Opt out CSS files can be found at the URLs:

  • plugins.blueconic.net/optin_optout/1.0.0/static/styling/style_1.css (contains the definition for the "Light" theme)
  • plugins.blueconic.net/optin_optout/1.0.0/static/styling/style_2.css (contains the definition for the "Dark" theme)

Enter the URL for your custom CSS in the "Custom CSS URL" field and then click [Save].

Custom CSS

Use this option to enter custom CSS that is entered in the text area. The CSS that you enter here is loaded after the CSS located at the Custom CSS URL.


Interpreting Opt in - Opt out interaction/variant statistics

The method BlueConic uses to count clicks and conversions for the Opt in - Opt out interaction/variant is described in the table below. To determine how many website visitors have opted out (Level 0), subtract the number of conversions from the number of clicks - The resulting value is the number of website visitors with permission Level 0.

Permission LevelClickConversion
Level 0 selected (first time) 1 0
Level 1 selected (first time) 1 1
Level 2 selected (first time) 1 1
Switch from Level 0 to Level 1 0 1
Switch from Level 0 to Level 2 0 1
Switch from Level 1 to Level 0 1 0
Switch from Level 2 to Level 0 1 0
Switch from Level 1 to Level 2 0 0
Switch from Level 2 to Level 1 0 0

JavaScript methods for the Opt in - Opt out interaction/variant

Using the BlueConic JavaScript Front-end API, you can access the Opt in - Opt out interaction/variant. This allows you to open the Opt in - Opt Selector from a different plugin. You can also set a website visitor's permission level from a different plugin.

Opening the Selector via the API

To open the Selector via the JavaScript API, use the following method:

// Open the Selector

this.blueConicClient.event.publish('optin_optout_openPermissionLevelSelector');

Setting a website visitor's permission level via the JavaScript API.

Using the method shown below from the JavaScript API, you can set the permission level for a website visitor from a different plugin. When you do so, a click and conversion are counted. Use the following method to set a visitor's permission level

// Set the permission level

this.blueConicClient.event.publish('optin_optout_setPermissionLevel', { permissionlevel : this.blueConicClient.permission.level.PERSONAL});

The above example sets the permission level to Level 2. To set the permission level to Level 1 or Level 0, substitute "PERSONAL" with ANONYMOUS or DO_NOT_TRACK, respectively.

The Opt In - Opt Out Action is a standard plugin.