How to tag for both Web and App + Web properties

This article describes how to instrument a website/web-app with tags to populate Web and App + Web properties at the same time. More advanced functionality (e.g. ecommerce) is covered in companion articles.

Set up the basic page tag

To populate both your Web and App + Web properties, you’ll need to either add a new tag or modify your existing page tag.

If you use analytics.js

If you use analytics.js for your Web property, add a new gtag.js snippet to the <head> section of the page:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

where G-XXXXXXXXXX is the Measurement ID of the App + Web data stream you created.

Keep your existing analytics.js snippet in the <body> section of the page. The existing snippet will continue to collect data for your Web property.

If you use gtag.js

If you already use gtag.js for your Web property, you can either

  • add one line to your existing gtag.js page snippet as explained below, or
  • use Connected Site Tags to add your App + Web Measurement ID without changing the code on your page.

To change your code, add the following config command to your existing gtag.js snippet:

gtag('config', 'G-XXXXXXXXXX');

where G-XXXXXXXXXX is the Measurement ID for an App + Web data stream.

For example, here is the complete gtag.js snippet you would use to collect data for a Web property with an ID of 'UA-XXXXXX-13' and an App + Web data stream ID of 'G-XXXXXXXXXX'.

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-13"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXX-13');
  gtag('config', 'G-XXXXXXXXXX');
</script>

If you use Google Tag Manager

If you use Google Tag Manager for your Web property, add a Google Analytics App + Web Configuration tag.

  1. Click Tags > New.
  2. Click Tag Configuration.
  3. Select Google Analytics: App + Web Configuration.
  4. Enter your Measurement ID.
  5. Click Triggering and select appropriate events that would cause the tag to fire.
  6. Save the tag configuration and publish your container.

Learn more about Google Tag Manager's App + Web tag templates.

Generate a virtual pageview

If you generate virtual pageviews in analytics.js, for example:

ga('set', 'page', '/my-virtualpage-path');
ga('send', 'pageview');

you can do the same thing in gtag.js as follows:

gtag('config', 'G-XXXXXXXXXX', {
  'page_path': '/my-virtualpage-path'
});

If you use analytics.js

Add the following gtag.js code to generate a virtual pageview with page_title and page_path properties:

<script>
  gtag('config', 'G-XXXXXXXXXX', {
  'page_title' : 'my-virtualpage-title',
  'page_path': '/my-virtualpage-path'
});
</script>

Keep your existing analytics.js code; it will continue to generate virtual pageviews in your Web property.

If you use gtag.js

Modify your existing gtag.js code to also generate a virtual pageview in your App + Web property. The following gtag.js code generates a virtual page view in both a Web and an App + Web property.

<script>
  gtag('config', 'UA-XXXXXX-13', {
  'page_title' : 'my-virtualpage-title',
  'page_path': '/my-virtualpage-path'
  });
  gtag('config', 'G-XXXXXXXXXX', {
  'page_title' : 'my-virtualpage-title',
  'page_path': '/my-virtualpage-path'
  });
</script>

If you use Google Tag Manager

If you use Google Tag Manager for your Web property, add a Google Analytics App + Web Event tag and configure it to send a virtual pageview event.

  1. Click Tags > New.
  2. Click Tag Configuration.
  3. Select Google Analytics: App + Web Event.
  4. For Configuration Tag, select the Configuration Tag you created earlier.
  5. For Event Name, enter page_view.
  6. Click Triggering and select appropriate events that would trigger your virtual page views.
  7. Save the tag configuration and publish your container.

Learn more about Google Tag Manager's App + Web tag templates.

Disable data collection

If your site's privacy policy provides an option for the user to opt-out of Google Analytics, you’ll need to instrument the opt-out for both your Web and App + Web properties.

If you use analytics.js

If you use analytics.js opt-out code for your Web property, add the following equivalent code to the gtag.js snippet for your App + Web property.

window['ga-disable-G-XXXXXXXXXX'] = true;

where G-XXXXXXXXXX is the Measurement ID for your App + Web data stream.

For example, here is the complete snippet for context.

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window['ga-disable-G-XXXXXXXXXX'] = true;
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

Keep your existing analytics.js code on the page so that users continue to be opted out for your Web property.

If you use gtag.js

Add the additional line of code to your existing gtag.js snippet.

window['ga-disable-G-XXXXXXXXXX'] = true;

where G-XXXXXXXXXX is the Measurement ID for your App + Web data stream.

If you use Google Tag Manager

To disable data collection with Google Tag Manager implementations, you can disable data collection in several ways, including:

  • Define a variable that indicates if the user has opted out, and use triggers and exceptions to prevent a tag from firing if this variable is true.
  • Hard-code window['ga-disable-G-XXXXXXXXXX'] = true; into your web page code so that it executes before any Tag Manager containers are loaded.
  • Create a Custom HTML tag with window['ga-disable-G-XXXXXXXXXX'] = true; and use Tag Sequencing to ensure it fires before your Google Analytics tags.

IP anonymization

In App + Web properties, IP addresses are automatically anonymized. No further action is necessary to anonymize IP addresses for App + Web properties.