Google Tag Manager Integration

Integrate AnswerHub with Google Tag Manager and configure the data layer objects.

Overview

Beginning with version 2.4.0, the site admin can add and update the Google Tag Manager installation and configure the data layer objects.

Access from the Admin Console

Location: Site > Custom Configurations > Google Tag Manager

The Custom Configurations menu is a new menu under the Site category.

Create a New Google Tag Manager Account

The site admin should have a Gmail account and will need to create a new Google Tag Manager account to generate a valid container ID.

The general high-level steps are as follows:

  1. Create a new account and container or add a new container to an existing account.
  2. Install the container.
  3. Add and publish your tags.

To see the detailed steps involved to set up and install the tag manager, see the Google Support page.

Generate a Valid Container ID

After following the steps to create a new Google Tag Manager account, you will navigate to the "Workspace."

  • Near the top of the window, you will find your container ID, formatted as "GTM-XXXXXX".
    • Keep this ID to insert it into the GTM Container ID text field on your Google Tag Manager Integration page.

Configure the Google Tag Manager Plugin

A new admin page under the Custom Configurations category will contain a text box for entering the GTM container ID one for installing the GTM script and a toggle to enable the data layer. For this version, the entire data model will always get injected into the content pages.

The site admin user will navigate to the Google Tag Manager configuration page in the admin.

The Configurable Google Tag Manager Section

There will be a text field labeled “GTM Container ID.”

  • The site admin user copies their container ID from their Google Tag Manager account and pastes it into the GTM Container ID Field on the admin page and hits “Save”.

Successful Save of a Valid GTM Container ID

  • When the admin inserts a valid Tag Manager Container ID and clicks the SAVE CHANGES button, the Google Tag Manager script will activate on the site with the proper GTM Container ID and two messages in green will appear.
    • One message appears below the Container ID text field, stating, "GTM Container-ID successfully validated." The other message appears at the top of the page stating, "Google Tag Manager admin values have been successfully updated."
  • In the global the Google Tag Manager JavaScript snippet and in the GTM HTML snippet in the of every page, each script updates with the container ID and the script is “activated.”
  • On the backend, the Tag Manager Scripts should already be in place and should dynamically update with the container ID and activated when a value is present.

Unsuccessful Save Due to an Invalid GTM Container ID

  • When the admin inserts an invalid Tag Manager Container ID and clicks the SAVE CHANGES button, the Google Tag Manager script will not activate on the site with the proper GTM Container ID and a red message will appear below the text field.
    • The message states, "Invalid GTM Container-ID (please check your Google Tag Manager account)."

The help text for the GTM Container ID links to Google’s Google Tag Manager help page.

Configure the Data Layer

Tag Manager can define and interact with a data layer to create custom events and triggers. This data layer has a specific implementation and gives GTM users flexibility in the data they can pass into events.

To provide AnswerHub users with a customizable data layer, an additional section will appear on the Google Tag Manager configuration page that allows them to enable/disable the AnswerHub data layer.

  • When you enable the data layer option, the AnswerHub content properties object should insert into the data layer object.
  • The data layer should also populate with all the properties of the AnswerHub data model for each content type (Questions, Ideas, Articles).
  • There will also be a preview link at the bottom of the page for the account you made through Google. The link allows you to see the whole JSON data for any Question, Article, or Idea node.

Enable or Disable the Data Layer Option

There is a section called Enable Data Layer with a checkbox to the right of that label.

  • If you select the data layer checkbox, the data layer will enable.
  • If you do not select the checkbox for the data layer checkbox, the data layer will disable.

The help text below the label states, "When activated, AnswerHub will populate the GTM data layer with the AnswerHub object model for questions, ideas, and articles."

Inserting and Activating the Data Layer

When the user selects the checkbox for the data layer and enables that option then the AnswerHub data model will push to the GTM data layer on each page.

  • In the page templates, the data layer JSON object inserts in the of all pages (above the GTM JavaScript snippet).

What’s Next