AE JS Data Tags Reference

Morgan From AE

Modified on: Mon, 25 Apr, 2022 at 9:21 AM

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
data-ae-login-window
data-ae-register-link
data-ae-remove-link
data-ae-login-link
data-ae-auth-link
data-ae-logout-link
data-ae-return
data-ae-follow-link
data-ae-optin
data-ae-optin-brandid
data-ae-optin-segmentid
data-ae-register-form
data-ae-scopes
data-ae-type
data-ae-extra-info
data-ae-extra-info-position

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="https://example.com/handler" 

    rel="nofollow noopener noreferrer" 

    target="_blank>

    https://example.com/handler"
>

     Register

</a>

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="https://example.com/handler" 

    rel="nofollow noopener noreferrer" 

    target="_blank">

    https://example.com/handler"
>

    Register

</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>

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-follow-link

Trigger a follow event after registration / login. (Currently only available for Spotify)

Works exactly as per data-ae-register-link above, with follow event occurring after successful login.

Type: Track, artist, album, playlist, user in the format:

data-ae-album-id="[Spotify Album ID]"

Value: The id of the object to follow eg. Spotify Artist ID

Example

<a 

    href="#" 

    data-ae-follow-link="spotify" 

    data-ae-track-id="7DaPRV3dvr1QUfN4HIQCrH"
>

    Spotify track presave

</a>

For more info visit Adding a Spotify Pre-save Button to Your Website

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 action attribute 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-scopes

This data tag can be used to indicate the required scopes for each individual data tag link used via AEJS. The scope provided will override any scopes set at the AE Connect level or as part of the AEJS settings for the page.

Type: Use with <a> tags.

Value: List of scopes or permissions allowed for each service (eg. user-read-birthdate user-read-email).

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:

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 eJS.settings a 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;"
>

      <h2>GLOBAL TITLE TOP</h2>

      <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

Table Of Contents

data-ae-register-window

data-ae-login-window

data-ae-register-link

data-ae-remove-link

data-ae-login-link

Example

data-ae-auth-link

data-ae-logout-link

data-ae-return

data-ae-follow-link

data-ae-optin

data-ae-optin-brandid

data-ae-optin-segmentid

data-ae-register-form

data-ae-return

data-ae-scopes

data-ae-type

data-ae-extra-info

data-ae-extra-info-position

Alternative method of setting additional information