A short quiz for users to find out their dream Labatt adventure. We use this to collect data about our consumers and get them to opt into newsletter promotions.

Dev Notes


This app requires the following things.

  1. Run npm install to add the additional packages used by the serverless functions.
  2. Install the local environment variables. The variables can be found in the Web Team Shared LastPass folder as a secure note called "Labatt USA CYOA Env Vars." We use this note to keep our api keys secure. The env vars should already be added to netlify.
  3. Install the Netlify CLI to be able to build both a local web server and functions server. Use the command netlify dev to run the site (and functions) on localhost:8888.

App Information

Current the app is written in vanillaJS and jQuery, but may move to React. All data and methods are properties within the cyoaAppController, and are exposed to the client/console under the cyoaApp object. This means you can call the app s methods via the console, such as

cyoaApp.incrementStep() //advances you to the next step
cyoaApp.setStep(4) //advances you to the specified step, (you won't see a change until you click "next")
cyoa.getUserData() //returns all currently saved data

App Structure

All controller methods are defined in the cyoa.js file. All the template information and quizQA data is stored in the cyoa-templates.js file. All assets are stored in the /src/assets/cyoa folder for clarity.

Template Structure

The templates are basically components with the following properties and methods properties

Form Processing

We use the pristine.js library for form validations on the rebate/newsletter signup page. Currently we're embedding a mailchimp signup form for this page, but it may change to a vanilla form with js for processing on submit. After the data is validated and saved locally in the app, it is sent to 2 different netlify function endpoints for emailing and data capture.

Emails & Data Capture

After the form is submitted it is sent to the /netlify/functions/cyoa endpoint, which formats the data as a mailchimp contact, with their quiz answers saved as "groups" ("interests"). The favorite product selected on the rebate form is saved to the contact unless it is blank, in which case the product selected on the quiz is used. After formatting the data, the endpoint sends the data to the Mailchimp API ( "Add/Update Contact" endpoint) via an axios POST request, and the response is returned to the CyoaApp, and passed on to the next request to the /netlify/functions/rebate endpoint. On success, Mailchimp returns the new contact that was created; on failure, it returns an error message. The /netlify/functions/cyoa endpoint WILL RETURN SUCCESSFUL EITHER WAY, so the rebate request can continue. If the MailChimp "Add/Update Contact" request was successful, we can use the new Mailchimp contact to populate the rebate email template.

Rebate Email Template

The template was originally created in Mailchimp, but we're using the Mandrill transactional API to send the emails. (Transactional emails are meant to be sent to a single user after the user has initiated some kind of action (purchased an item, requested a coupon, etc) versus an email campaign, which is meant to be sent at a specific time to many people, in order to cause the user to take an action.) Because the Mandrill transactional API is part of the Mailchimp ecosystem, we can use the Mailchimp MERGE fields in the Mandrill email template and it will correctly pull in the contact's data. However, we do have a fallback system in place to populate the email with the contact and product information collected by our form in case the Mailchimp "Add/Update Contact" request fails. If the rebate email is sent out with our form's contact data instead of mailchimp contact data, the only difference is that the "read in browser" link opens up a generic version of the email, instead of a personalized one, and the "manage preferences" link at the bottom doesn't work (the unsubscribe works just the same).

It is important to note that the rebate email will send whether or not they opt into emails, and their contact information is sent to mailchimp whether or not they opt in to emails. If they choose NOT to opt in, they are added as an "unsubscribed" contact.

Error Handling

As noted earlier, the /netlify/functions/cyoa endpoint will return a response successfully whether or not the mailchimp request is successful. However, in the case that THE FUNCTION ITSELF FAILS, it should return a 500 error. If the /netlify/functions/rebate endpoint itself fails, or the transactional email fails to send, it should also return an error. If either of the endpoints receive improperly formatted data, or GET requests, it should return 400 errors. In case of errors, they should log them in the netlify/etc/error.log

The fetch requests on the client which make the requests to the two endpoints should receive the errors and flash them as an alert before proceeding to the final screen of the app.