esgoodman/recruiter

Embeddable forms to recruit usability research participants. Sends results to a Google Sheet, deployed via Google Tag Manager.

recruiter [WIP]

Embeddable forms for recruiting usability research participants. Uses Google Tag Manager to load form UI and targeting, and a custom Google Apps Script to send submissions to a Google Sheet.

Components

• Google Sheets Template
• Google Tag Manager - account required
• Google Apps Script (for reference only - already bound to Sheets Template)
• U.S. Web Design Standards styles and form patterns guidance for accessibility.

Optional

• TODO: Google Analytics integration (capture response events + session metadata)

Deploying

Google Spreadsheet template

1. Make a copy of the Spreadsheet template (contains gScript for processing submissions)

2. From main Sheets menu, select Tools > Script editor

3. From the Script editor main menu, select Publish > Deploy as web app

   a. enter Project Version name and click Save New Version

   b. set Execute the app as to User accessing the web app

   c. set Who has access to the app to Only myself

   d. Click Deploy

4. Back in the Spreadsheet, select the Settings sheet tab, and copy the value of WebAppURL

5. In Google Tag Manager, paste the value you copied into the WebAppURL Custom Variable (TODO: can this be read from the sheet by GTM? Could a custom UI button push this to GTM, where the container ID is added to the Settings tab on the sheet?)

Google Tag Manager

1. Download gtm-recruiter-to-gsheet.json

2. If needed, create a Tag Manager account. (If GTM is already in use on the site and you have access to the container, skip to Step 4)

3. Create a new Tag Manager Container and Publish the (currently empty) container.

4. In Main Menu under Admin > Container, select Import Container (TODO: TEST import to a GTM container).

   a. For Choose Container File, select the file you downloaded above.

   b. For Choose workspace:

   • For new containers, select New

   • For existing containers, select Existing

   c. For Choose an import option select Merge

5. Install (or have agency install) the Tag Manager snippet code in the site template.

6. Create any specialized Triggers in Tag Manager, e.g. "Only show recruiter on pages in /directory", etc. for the following Tag:

   • recruiter.js Controls where the recruiter "tab" appears within the site. By default, it is set to appear on all pages that have the GTM snippet installed.

7. Test GTM config correctly loads recruiter locally (see Preview and Debug containers)

8. Publish GTM container. Reminder: this is equivalent to pushing code to production and should follow any QA + testing standards.

Default fields provided in this configuration:

Field name	Type	Description
Date	Timestamp	submission time and date
Name	String	First and Last name
Email	String	Email address
UserAgent	String	OS + Version, Browser + version
URL*	String	URI of page where form was submitted
Referrer*	String	Referring page (how user arrived at PageURL

*Note: When deploying to sites where URLs contain references to content that may infer information of a personal or sensitive nature (e.g. visiting content related to medical conditions on NIH.gov), you may wish to omit passing the last two fields (URL and Referrer) to the Sheet. This can be done simply by removing the last two query parameters (&Referrer={{Referrer}}&URL={{Page URL}}) from the URL in the Recruiter to Google Sheet Custom Image Tag in GTM.

TODO: how to customize capture fields.

Note: PIA, PRA or other privacy or security compliance issues may be triggered for any customized capture fields. Consult Chief Privacy Officer and/or PRA Desk Officer before deploying any customized form versions.

Roadmap

Recruiter is the first part of a larger WIP feedback platform implemented via Google Tag Manager.