AE Connect - Basic Install

The first step in setting up AE is to implement AE Connect, our registration flow, on your website. This is how your customers will become members in the AE dashboard so you can begin collecting valuable insights from their social media, streaming and on-site behavior and interactions. 

Before you can install AE Connect, you must first create an AE Connect application (an instance of AE Connect), add a privacy policy and allowlist your domain.

Jump to:

• Create an AE Connect Application
• Add Your Privacy Policy, Data Use Statement and Cookie Policy
• Allowlist Your Domain
• Basic AE Connect Install with AEJS

Begin by logging into your AE Dashboard and navigating to the AE Connect page by clicking AE Connect in the quick links section of the homepage or by clicking the gear in the upper right menu, and choosing AE Connect.

Create an AE Connect Application

1. Click Create new application.
   
   
   
2. In the pop-up window, enter the name of your application. Click the Add App button to create your application.
   
   
   
3. On this page, you can add a cover image and description for your application. Click the Save button to save changes.
   
   

Add Your Privacy Policy, Data Use Statement and Cookie Policy

Members must agree to your privacy policy, data use statement and cookie policy before registering with AE Connect.

1. From the AE Connect page, choose the AE Connect application you wish to edit.
   
   
   
2. Click the Privacy & Permissions tab below your application's information.
   
   
   
3. On the Data Protection and Privacy sub-tab, input the link to your privacy policy in the Privacy Policy field. For more information on writing a privacy policy, see Privacy Policy Basics.
4. Your data use statement tells your members how you will use their data. We've provided an example statement for reference, but you will need to adjust it to reflect your specific data use (e.g. advertising, email marketing, custom offers, etc.).
5. AE Connect uses cookies to track your members behavior and to facilitate social login, so you will need to include a cookie policy statement. We have provided an example statement for reference, but recommend you adjust it to suit your needs. 
6. Click the Preview button to see how the consent pop-up will appear.
7. Click the Save button to save changes.
   
   

Allowlist Your Domain

You must allowlist any domains where AE Connect will be used, including subdomains. This will prevent other people from using your unique code on unauthorized websites.

1. From the AE Connect page, choose the AE Connect application you wish to edit.
   
   
   
2. Click on the Privacy & Permissions tab and select the Permissions sub-tab.
   
   
   
3. Enter your domain in the Domain Allowlist field and click the purple Add button. Your domain will appear in the list of allowed domains below the field.
   
   
   
4. Add any other domains or subdomains where AE Connect will be used, and click Save Changes.
   
   

Basic AE Connect Install with AEJS

AE Connect is installed on your site by adding a few lines of code to include the AE JavaScript framework (AEJS) and initialize the framework.

1. From the AE Connect page, choose the AE Connect application you wish to install on your site.
   
   
   
2. Click on the Install AE Connect tab.
   
   
   
3. Scroll down to 2. Add AE Connect to your website. This code will add the AEJS framework to your site.
   
   
   Here is an example with additional libraries added:
   

   <!-- Including the AEJS script -->
   <script type="text/javascript" charset="utf-8" src="http://x.theappreciationengine.com/w/js/497"></script>
   
   <!-- Optional: Include other required libraries -->
   <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
   
   

   
   
4. Click the Copy the code button to copy the code.
   
   
   
5. Paste the code in the head or body tag of your site.
6. Back on the Install AE Connect tab, scroll down to 3. Add the JavaScript function. This is the AEJSReady function, and is where you can customize the behavior of AE Connect (e.g. by defining user actions or interactions).
   
   
   Here is a basic initialization example with simplified event handling and configuration settings:
   

   // Global variable to store the AEJS instance
   var myAEJS;
   
   // Function to initialize AEJS
   function AEJSReady(aeJS) {
    myAEJS = aeJS; // Store the AEJS instance for later use
   
    // Basic AEJS settings
    aeJS.settings['auth_window'] = false; // Use in-page authentication
    aeJS.settings['services'] = 'google,youtube,spotify,facebook,twitter,applemusic,email'; // Supported services
    aeJS.settings['verify_email_for_login'] = false; // Email verification not required for login
    aeJS.settings['return'] = '/thanks.html'; // Redirect after authentication
   
    // Configure extra fields
    aeJS.settings['extra_fields'] = {
    gender: { 'required': false },
    birthdate: { 'required': false },
    };
   
    // Define event handlers
    aeJS.events.onActivitySent.addHandler(activitySentHandler); // Handle activity sent events
    aeJS.events.onLogin.addHandler(loginHandler); // Handle login events
    aeJS.events.onUser.addHandler(userHandler); // Handle user-related events
   }

   
   For more on AEJS settings, check out the AEJS reference articles in our Developer Documentation section and our Advanced Setup section.
7. Click the Copy the code button to copy the code.
   
   
   
8. Paste the code in the footer or just above the closing body tag of your site.
9. AEJS has now been added to your site and you can begin building your AE Connect registration flow.