Integrating Google Tag Manager (GTM) for a single app

Ask the community
1

Hi,

I’m looking to integrate Google Tag Manager (GTM) with Appfarm to track app usage for one app in a solution.

My client provided me with the following code to add to every page in the app:

Paste this code as high in the <head> of the page as possible:

<!-- Google Tag Manager -->
<script>(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','[YOUR_GTM_CONTAINER_ID]');</script>
<!-- End Google Tag Manager -->

Paste this code immediately after the opening <body> tag:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=[YOUR_GTM_CONTAINER_ID]"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

My questions are:
Is the correct place to add these under App Settings → Other → Custom Header Tags?
If so, how do I ensure the code is placed “as high in the <head> of the page as possible” and “immediately after the opening <body> tag”?

When setting it up in App Settings, will usage in dev and test environments also be tracked?

Is there anything else I should be aware of when setting up GTM?

Thanks in advance!

2

Hi Sigurd!

Have you checked the documentation regarding “Integrate with Google Analytics (GA4)” (go to docs). I believe this article can be quite helpful.

I believe this is the simplest way to integrate Google Tag Manager for a single app:

  1. Add the Head-script under Custom Header Tags in apps (this is the correct place = App Settings → Other → Custom Header Tags) and a coded component in the app you want to track. Important, by using this method you will only track the app in context. If you add the Head-script under the Custom Header Tags in environment settings, you will track all the apps in this environment (Environments → [ANY ENVIRONMENT YOU WANT TO TRACK], and locate section Other → Custom Header Tags).
  2. In regards to this query: ensure the code is placed “as high in the <head> of the page as possible” and “immediately” after the opening <body> tag" I have the following answer. The code does not have to be the first direct child of the <body> tag. It is recommended to place it as early as possible. So, a coded component could be placed in the top of your default view. The <script> tag should be placed in the header, hence it should be uploaded to the script sources setting in Environment Config. For more information, please see this community post. Furthermore, the <noscript> tag is used for browsers not supporting javascript. Appfarm does not work on browsers not supporting javascript. So the <noscript> part of the setup is probably something you will not need to consider.
  3. In order to track different environments you must add the Custom Header Tags to the different environments you want to track (see point one on where to do this).

I would recommend to test this implementation thoroughly! Other than that I believe you should be able to complete the integration! If you have any other questions or run into a problem, do not hesitate to reply to this post.

Good luck!

3 Likes