Skip to content

Adding NIST required branding and features to your site

Steve Barber edited this page May 2, 2024 · 9 revisions

NIST-required branding and features

All NIST public websites are required to have certain branding and features. The primary public pages hosted on Drupal at www.nist.gov have these features built-in automatically but on Pages you will have to add them yourself.

Specifically you will need to make sure your site on Pages has the following:

  • NIST PAO-approved headers
  • NIST PAO-approved footers
  • An exit script that notifies the user when they click a link that leads to an external (non-NIST) website.
  • A Google Analytics code (all Pages sites should use the same code, see below)

Headers and footers

There are a couple of easy ways to get the NIST headers and footers on your site:

The old way: Pages-Template

Originally we supplied a template that you could use as the start of your own site. See: https://github.com/usnistgov/Pages-Template

This works but it is a little bit cumbersome to work with:

  • It clutters up your repo with files
  • You have to figure out the provided stylesheets to use them yourself
  • The content is fixed and is already out of date

The new way: nist-header-footer

The new way does not require that you copy any files into your repo. Instead, you add a couple of lines to load the script and style sheets to your master page template. The script will automatically add the NIST header and footer by linking back to the nist-header-footer Pages site when the page is loaded in a browser.

In addition to adding no files to your repo and hardly any clutter to your page templates, you get the big bonus that when PAO updates the nist-header-footer repo, your site will automatically and immediately get the updates with no intervention from you. (And PAO does own and update the repo, as opposed to the Pages-Template repo which was created by us.)

PAO created these headers and footers to be as minimally intrusive on your pages as possible and still meet the requirements.

See here for a sample of the headers and footers, and also for the instructions to add it to your repo: https://pages.nist.gov/nist-header-footer . (This site is a client of itself, so you can see the headers and footers in action there.)

Exit Script

Although PAO has stated the requirement that all NIST public web pages must have an exit script (which will pop up a warning and disclaimer when the user clicks a link that leads outside of NIST's web space), they have declined to provide a NIST-approved instance of one that we can use. So I made my own. It works similarly to the nist-header-footer repo above: you use it by simply adding a script tag to your master page template and that script will automatically figure out which links are non-NIST and add the pop-up to them. For instructions, see https://pages.nist.gov/leaveNotice .

leaveNotice is a fork of a general purpose (non-NIST) exit script. Minimal NIST-specific customizations and defaults have been applied so it should work for most purposes without any additional configuration, but see the documentation on that page if you need to adjust the URL matching rules for what is considered "non-NIST" or change the text in the popup.

Google Analytics and Tags (UPDATED 2024-05-02)

NEW: NIST has moved to GA4 tags. The last guidance I heard was that a GA4 tag should be added to all sites, but sites with existing DAP UA tags should continue using them. So for now, I'm asking that you keep both enabled in your sites.

PLEASE NOTE: Some Pages sites have been adding their own OU's analytics tags to their sites instead of using the official Pages tags. This makes it very difficult for us to obtain a holistic report about traffic to the whole Pages server. I understand your desire to be able to see your own site metrics, but that leaves the site administrators without a systemic view of the server traffic, and we need that to be able to continue to justify the Pages server's existance! So please use the official Pages tags in all of your Pages sites (and make sure they show up on every page of your site). That said, I believe it is possible with least with the old DAP UA tags, to add multiple tags to a page. So, you could try adding a second UA tag to your site and see if that works. However the GA4 documentation did specifically state that you should only add one GA4 tag per page.

To enable Google Analytics for your repo's site (required), you must add the following script tags to the HEAD section of your master page template (i.e. to every HTML page of your site). the GA4 tag guidance says to place the GA4 tag immediately after the HEAD tag at the top of your HTML.

We are investigating ways to have the server add these analytics tags automatically to every page it serves, but we still have some technical hurdles to overcome.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RJSMY46M5C"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-RJSMY46M5C');
</script>
<!-- Old DAP UA tag -->
<script async type="text/javascript" id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=NIST&subagency=github&pua=UA-66610693-1&yt=true&exts=ppsx,pps,f90,sch,rtf,wrl,txz,m1v,xlsm,msi,xsd,f,tif,eps,mpg,xml,pl,xlt,c">
</script>

The recommended DAP UA code embedded in the script tag changed a while back. Please verify that you're using the correct tag in all of your sites.