Getting started
Import data
App types
Filters and
keywords
Templates
Embed apps
in your website
Go further with Awesome Table
Add-ons
Troubleshooting
Data security and policies
Billing

Integrate Google Tag Manager in your Awesome Table app

If you are using Google Tag Manager, you might want to connect it to your Awesome table app. All you need to do is add the required Google Tag Manager code in the Template sheet of your Awesome Table app and publish your project.

For the purposes of verifying if it's correctly linked, we create a test tag that will be visible in your Awesome Table app.

Add Google Tag Manager code to your Google sheet

To have Google Tag Manager track the views of your Awesome Table app, you must first add the required Google Tag Manager code in the Template sheet of the app.
Before you make changes to an app that is in production, you can test how Google Tag Manager works in an app you use for testing purposes.

Prerequisites

  • You must set up and install Tag Manager.
  • Turn off any anti-tracking or ad-blocking extensions you have installed for your browser. Otherwise, Google Tag Manager is not able to connect to the Awesome Table app.

Procedure

  1. In your Awesome Table app, click Open under SPREADSHEET SOURCE.
    Screenshot_2.png
    The Google sheet opens on a new window.
  2. Add a new column to the Template sheet by right-click the last column and select Insert 1 right.
    Screenshot_3.png
  3. Add the Google Tag Manager code in the new column.
    1. Type <script> in the first row of this new column.
    2. In the second row, add the following code:
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-ID');

      const gtmIframe = document.createElement('noscript');
      gtmIframe.innerHTML = `<!-- Google Tag Manager (noscript) -->
      <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-ID" height="0" width="0" style="display:none;visibility:hidden"></iframe>
      <!-- End Google Tag Manager (noscript) -->`;

      const body = document.querySelector('body');
      body.insertBefore(gtmIframe, body.firstChild);
    3. In GTM-ID, replace ID with the ID of your Google Tag Manager project.
      Screenshot_5.png
      warning Make sure to not add any spaces when you paste the ID in your Template.

      Your Template sheet is now ready to be integrated into your app.
      Screenshot_6.png

  4. Open your Awesome Table app.
  5. Update the cell range of the Template sheet to include the <script> column under ADVANCED PARAMETERS. In this case, update the range to A1:D2.
    Screenshot_7.png
  6. Click SAVE CHANGES.
    Screenshot_8.png

Result

Your Awesome Table app is now ready to be connected to Google Tag Manager.

What's next

You can now create a sample tag in Google Tag Manager to verify that it works as expected.

Add a test/sample tag to your Google Tag Manager project

To make sure that your Awesome Table app is connected to Google Tag Manager, you can create a visual test tag that appears in your app. If you preview your project and the tag appears in your app, it means your app is connected to Google Tag Manager.

Procedure

  1. Go to your Google Tag Manager project.
  2. Click Add a new tag.Screenshot_0.png
    A window appears.
  3. Name your tag.
    Screenshot_1.png
  4. On the Tag Configuration card, click the pencil icon.
    Screenshot_2.png
    A side panel opens.
  5. Under Custom, select Custom HTML.
    Screenshot_3.png
  6. In the HTML field, copy and paste the following code:
    <div style="position: absolute; top: 10px; right: 30px; background: white; padding: 5px; border: solid 2px red;">GTM IS WORKING</div>
    You can add HTML code if you want to display your tag in your app to verify if it's working.
    In this example, the tag will be a red box containing a text.
    Screenshot_4.png
  7. In the Triggering card, click the pencil icon.
    Screenshot_5.png

    A side panel opens.

  8. Select All Pages.
    Screenshot_6.png
    The All Pages trigger has been added to the Firing Trigger.

  9. Click Save.
    Screenshot_7.png

Result

The sample tag has been correctly added to your Google Tag Manager project.

Screenshot_8.png

What's next

Now that you added the visual tag, you can test from Google Tag Manager the preview of your Awesome Table app and whether the visual tag appears.

Test and preview the visual tag in your Awesome Table app

To test if the visual tag appears, you must preview your Google Tag Manager project. During the preview part of the process, Google Tag Manager asks for the URL of your Awesome Table app and loads a preview of the app. At this point, you can verify if the visual tag appears.

Procedure

  1. In the top-right corner, click Preview.
    Screenshot_9.png
  2. Click Publish empty version.
    Screenshot_18.png
  3. Click Preview.
    Screenshot_19.png
    A new page opens and the Start Tag Assistant pop-up appears.
    Screenshot_20.png
  4. Copy the correct Awesome Table app URL.
    1. Click EMBED.
      Screenshot_11.png
      A window appears.
    2. Under Direct Link, click Copy.
      Screenshot_12.png
  5. Paste the link in the URL field of the Start Tag Assistant pop-up and click Start.
    Screenshot_13.png

Result
Your Awesome Table app opens in a new window with a red box in the top-right corner. The tag is visible because we previously added the HTML code.

Screenshot_15.png

What's next

Now that you have verified in preview that your app is connected to your Google Tag Manager project, you can remove the tag before publishing.

Remove the visual tag from your Awesome Table app

The visual tag is a way to ensure that your Awesome Table app is integrated with Google Tag Manager. Now that you have verified that it appears, you can remove it so that your users do not see it when you publish your project.

Procedure

  1. Go to your Google Tag Manager project.
  2. Under Workspace Changes, click on the More icon.
    Screenshot_13.png

  3. Click Abandon Change.
    Screenshot_11.pngA Abandon Changes? pop-up appears.
  4. Click Abandon changes.
    Screenshot_12.png

Result

The test tag is now removed from your Google Tag Manager project.

What's next

You can publish your project to finalize the integration of Google Tag Manager in your Awesome Table app.

Publish your project to activate your app with Google Tag Manager

Now that you have removed the visual tag of your Awesome Table app, you can publish the Google Tag Manager project. As a result, Google Tag Manager will be publicly connected to your Awesome Table app.

Procedure

  1. From Google Tag Manager, click Submit to publish your tag.
    Screenshot_10.png
    A side panel appears.
  2. Add a descriptive name and a detailed description of the changes and click Publish.
    Screenshot_14.png

Result

Your Awesome Table app is now connected to Google Tag Manager.
You now know how to integrate Google Tag Manager with your Awesome Table apps in production.

Articles in this section