Components

Analytics

The Analytics component is there to integrate Google Analytics (GA) into your projects using react-ga. For more info on how to use the GA tool just visit the github repo of react-ga. This component has already a build in listener to history changes. That means that all internal rout changes in our Single Page Application are logged to GA.

There is only one required property for this component and that is trackingID (your Google Analytics tracking ID in the Format UA-000000-01).

This component takes care to display a policy dialog at the bottom of your page and disable Google Analytics if the user opts out of it. With the property isOptOut you can defined if the GA is a opt-out feature (otherwise it will by default a opt-in feature).

With setting the handlePolicyClick property a Policy button will be shown in the dialog. It is recommended to use this and rout the user to your Privacy Policy.

To customise the dialog labels you can use following properties:

• policyLabel
• declineLabel
• acceptLabel
• dialogMessage

If you want to use a fully custom dialog you can set the property renderDialog. That should be a react component. It will receive all properties from the Analytics component and hava all internal calls like:

• handleAccept
• handleClose
• handleDecline
• handlePolicyClick

You can use those to make your own custom dialog. For example you can write a dialog like this:

const Dialog = ({
  showDialog,
  dialogMessage,
  handlePolicyClick,
  policyLabel,
  declineLabel,
  acceptLabel,
  handleDecline,
  handleAccept,
  handleClose
}) => {
  return (
    <Snackbar
      anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
      open={showDialog}
      onClose={handleClose}
      message={dialogMessage}
      action={
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          {handlePolicyClick && (
            <Button color="secondary" size="small" onClick={handlePolicyClick}>
              {policyLabel}
            </Button>
          )}
          <Button color="primary" size="small" onClick={handleDecline}>
            {declineLabel}
          </Button>
          <Button color="inherit" size="large" onClick={handleAccept}>
            {acceptLabel}
          </Button>
        </div>
      }
    />
  );
};

and use it like this:

<Analytics
 isOptOut={true}
 renderDialog={Dialog}
 trackingID="UA-XXXXXXXX-1"
 handlePolicyClick={() => history.push("/privacypolicy")}
 acceptLabel="Akzeptieren"
 declineLabel="Verweigen"
 policyLabel="Datenschutz"
 dialogMessage="Diese Seite nutzt Cookies und Website Tracking-Technologien von Dritten, um ihre Dienste anzubieten, und stetig zu verbessern. Ich bin damit einverstanden und kann meine Einwilligung jederzeit mit Wirkung für die Zukunft widerrufen oder ändern."
 />