ASU Header Guide

Testing data shows that users see asu.edu as one website. The ASU global header should appear on every subdomain and page of asu.edu to ensure and optimal user experience as they navigate across asu.edu.

The ASU Header is delivered in five ways

Components Header

Preferred: Intended for use within platforms and applications, this header variant is built using React as a peer dependency and can be implemented using the @asu/component-header package. This version of the header does not bundle Cookie Consent or Google Tag Manager. Site developers using this header must implement Cookie Consent using the @asu/component-cookie-consent package themselves for public-facing sites. Similarly, site developers should add Google Tag Manager code snippets to their sites. See below for guidance in both cases and instructions for installing packages.

Components Library Header - deprecated and no longer maintained

Deprecated in favor of Component Header: Intended for use within platforms and applications, this header variant is built using Preact and can be implemented using the @asu/components-library package. This version of the header does not bundle Cookie Consent or Google Tag Manager. Site developers using this header must implement Cookie Consent using the @asu/component-cookie-consent package themselves for public-facing sites. Similarly, site developers should add Google Tag Manager code snippets to their sites. See below for guidance in both cases and instructions for installing packages.

ASUThemes component header - deprecated and no longer maintained

The ASU Web Standards 2.0 header is made available through ASUThemes for use in ASU enterprise apps. It is no longer maintained and sites should transition to use of another option. This option is an alternative packaging of the deprecated Components Library header. Note: this version of the header bundles the ASU Cookie Consent but does not provide Google Tag Manager code. Read below about how to implement GTM on enterprise sites.

Integrated CMS header modules and plugins

CMS modules and plugins providing the ASU header should implement it using the @asu/components-header package and should also bundle the Component Cookie Consent component, and Google Tag Manager code. Modules and plugins should provide configurability so that Cookie Consent can be disabled for sites that are not public-facing, and configurability so GTM can be disabled and so multiple Google Tag Manager IDs may be used. Additional GTM IDs should be additive and not overwrite the ASU Universal GTM ID. Header modules and plugins are to be shipped with their respective CMS platform distributions.

Unity Bootstrap Theme header

Primarily used as a reference point, the Bootstrap header provided via the @asu/unity-bootstrap-theme package is a plain HTML and CSS Web Standards 2 header implementation built without embedded components for Cookie Consent and Google Tag Manager. Site developers using this header must implement Component Cookie Consent using the @asu/component-cookie-consent package themselves for public-facing sites. Similarly, site developers should add Google Tag Manager code snippets to their sites. See below for guidance in both cases.

Notes on additional requirements for sites using the header

In addition to the header, ASU sites must, as a general rule implement the Web Standards 2 Cookie Consent component for GDPR compliance and include appropriate Google Tag Manager code. Read further for options and guidance on how to implement these in your application or site.

Cookie Consent (GDPR compliance)

Before implementing Cookie Consent yourself, please review the options for obtaining the ASU Header. Some options provide the Cookie Consent component automatically bundled.

If you need to install the Cookie Consent component yourself, please see the section "Installing Unity components from the Unity package registry."

Google Tag Manager (GTM)

See the Google Tag Manager (GTM) and Data Layer page for details on using Google Tag Manager in your site or application.

Installing Unity components from the Unity package registry

Learn how to use the private package registry and begin using Unity packages in your ASU site or application. Visit the page for the @asu package you wish to use to find further instructions on how to install and implement the package for your site or application.