AE JS Data Tags Reference

This article provides a list of all of the available data attributes you can use with AE JS.

Note that there are current four separate contexts in which you can use data tags:

  • Defining link types and link operations (<a>  tags)
  • Defining input operations (<input>  tags)
  • Custom forms and data capture flows (<form>  tags)
  • Specifying optional additional information (<div>  tags)

The available data tags for each of these context are not interchangeable.


data-ae-register-window

A link with this data tag starts a registration flow and that shows a screen that allows registration via the services enabled for the site in the AE dashboard.

Registration can be used for new account creation as well as logging in existing users.

Depending on the value of the aeJS.setting for auth_window, it triggers either browser redirect or modal pop-up.

Type

Use with <a> tags.

Value

N/A

Example
<a href="#" data-ae-register-window="true" data-ae-return="<a href="https://example.com/handler%22>Register</a" rel="nofollow noopener noreferrer" target="_blank">https://example.com/handler">Register</a</a>>

data-ae-login-window

A link with this tag starts a login flow and shows a screen that allows login via the services enabled for the site in the AE dashboard.

Successful login requires an existing account. If no account exists for the user, an error will be shown.

Depending on the value of the framework setting for auth_window, it triggers either a browser redirect, or modal pop-up.

Type

Use with <a> tags.

Value

N/A

Example
<a href="#" data-ae-login-window="true" data-ae-return="<a href="https://example.com/handler%22>Register</a" rel="nofollow noopener noreferrer" target="_blank">https://example.com/handler">Register</a</a>>

data-ae-register-link

A link with this tag triggers a direct registration via the service defined as the value. It skips the register screen.

Recommended to handle both new and returning users.

Type

Use with <a> tags.

Value

A social service that is enabled in the AE dashboard.

Example
<a href="#" data-ae-register-link="facebook">Register with Facebook</a>

data-ae-remove-link

A link with this tag removes specified service from currently attached services for current user.

Type

Use with <a> tags.

Value

A social service that is enabled in the AE dashboard.

Example
<a href="#" data-ae-remove-link="facebook">Remove your Facebook account</a>

data-ae-login-link

A link with this tag triggers a direct login via the service defined as the value. It skips the login screen. This data tag is recommended to enforce existing account flows.

Type

Use with <a> tags.

Value

A social service that is enabled in the AE dashboard.

Example
<a href="#" data-ae-login-link="facebook">Log in to Facebook</a>

data-ae-auth-link

A link with this tag triggers linking additional services to the currently logged in member.

We strongly recommend that you only use this data tag when creating experiences that allow users to add multiple accounts from a single interface.

Type

Use with <a> tags.

Value

A social service that is enabled in the AE dashboard.


data-ae-logout-link

Log out the current user. Clears current AE session and local user object.

Type

Use with <a> tags.

Value

N/A

Example
<a href="#" data-ae-logout-link="true">Log out of AE</a>

data-ae-return

A link with this tag specifies the URL (handler) to return to once the link action is complete. For example: a registration URL, login URL, or logout URL.

Type

Use with <a> tags.

Value

A URL.

Example
<a href="#" data-ae-register-window="true" data-ae-return="https://example.com/handler">Register</a>

data-ae-optin

A link with this tag specifies a checkbox input field that indicates users use it to opt in to global, brand, or segment newsletters or groups.

Type

Use with <input type="checkbox"> tags.

Value

A string used as the label for the checkbox.


data-ae-optin-brandid

A link with this tag specifies a checkbox input field that indicates which brand newsletter or group that the user will be opting into.

Type

Use with <input type="checkbox"> tags.

Value

A string used as the label for the checkbox.


data-ae-optin-segmentid

A link with this tag specifies a checkbox input field that indicates which segment newsletter or group the user will be opting into.

Type

Use with <input type="checkbox"> tags.

Value

A string used as the label for the checkbox.


data-ae-register-form

Use this data attribute to with a <form> element. The actionattribute is overridden with the appropriate AE authentication URL determined by the service value provided.

Use any valid service that matches the services listed in your AE JS framework settings for services.

This approach is appropriate for cases where developers are building their own authentication flows and do not want to use those built into the framework.

The form fields must match one or more of the following:

  • firstname 
  • surname 
  • email 
  • password 
  • address 
  • addressline2 
  • city 
  • state 
  • country 
  • postcode 
  • homephone 
  • mobilephone 
  • username 
  • website 
  • bio 
  • gender 
  • birthdate 

Once the form is submitted, AE handles both authentication on the specified service, and it saves the provided data against the member profile. 

If the form is submitted when an AE member session is already active (for example, if the member is already logged in) then the data is used to update the member record.

The <form> operates under both a modal and redirect authentication flow, which is determined by the auth_windowsetting.

Redirect flow

In a redirect flow, the browser will be redirected to the return URL specified (via a data tag or an AE JS setting) with an access token appended.

Modal flow

In modal flow, the onLogin event is fired in the case of a new authentication, whereas the onUser event fires in the case of member update.

Note that the <form> field validation must be performed locally. The settings in extra_fields only apply to the native framework forms.

Type

Use with <form> tags.

Value

Use any valid service that matches the services listed in your AE JS framework settings for services.


data-ae-return

This data tag specifies the URL (handler) to return to, once the form action is complete. For example, the AE has handled authentication and/or member data update.

Type

Use with <form> tags.

Value

A URL.


data-ae-type

With value ‘register’ the submission is treated as a registration flow. Existing users are signed in, new users are created.

With value ‘login’ the submission is treated as a login flow. Only existing users are signed in, otherwise an error is thrown."

Type

Use with <form> tags.

Value
  • register
  • login

The default value is register.


data-ae-extra-info

Specifies where any additional information should be injected into the authentication flow.

Type

Use with <div> tags.

Value

The available steps for information insertion are the following:

  • global 
  • login 
  • register 
  • required  (for extra fields)
  • recover_password 
  • reset_password 
  • reset_password_ok 
  • verify_email 
  • verify_email_ok 

data-ae-extra-info-position

Additional information can be positioned as either top or bottom.

Type

Use with <div> tags.

Value
  • top 
  • bottom 

Alternative method of setting additional information

Additional information can also be set programmatically via the aeJS.settings property extra_info. Additional information consists of a title (an <h3> tag) and associated content (a <div>tag).

Example:

<div data-ae-extra-info="global" data-ae-extra-info-position="top" style="visibility: hidden;">
            <h3>GLOBAL TITLE TOP</h3>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
              <img src="image.png" width=300 align="left" hspace=10>
              Sed justo risus, tristique at bibendum vitae, vulputate at nibh. Donec eget nunc ac quam pellente.
            </div>
          </div
          

How did we do?