Tag Manager support for Web Stories

[swissspidy]

Feature Description

Site Kit currently only prints an analytics tag for Web Stories when using the Analytics module.

The Tag Manager module does not support Web Stories yet. Can we fix this?

For reference, the Analytics module config:

site-kit-wp/includes/Modules/Analytics.php

Lines 143 to 160 in 84c9727

	// Which actions are run depends on the version of the AMP Plugin
	// (https://amp-wp.org/) available. Version >=1.3 exposes a
	// new, `amp_print_analytics` action.
	// For all AMP modes, AMP plugin version >=1.3.
	add_action( 'amp_print_analytics', $print_amp_gtag );
	// For AMP Standard and Transitional, AMP plugin version <1.3.
	add_action( 'wp_footer', $print_amp_gtag, 20 );
	// For AMP Reader, AMP plugin version <1.3.
	add_action( 'amp_post_template_footer', $print_amp_gtag, 20 );
	// For Web Stories plugin.
	add_action( 'web_stories_print_analytics', $print_amp_gtag );
	add_filter( // Load amp-analytics component for AMP Reader.
	'amp_post_template_data',
	function( $data ) {
	return $this->amp_data_load_analytics_component( $data );
	}
	);

And the Tag Manager one (no mention of Web Stories):

site-kit-wp/includes/Modules/Tag_Manager.php

Lines 128 to 143 in 84c9727

	// Which actions are run depends on the version of the AMP Plugin
	// (https://amp-wp.org/) available. Version >=1.3 exposes a
	// new, `amp_print_analytics` action.
	// For all AMP modes, AMP plugin version >=1.3.
	add_action( 'amp_print_analytics', $print_amp_gtm );
	// For AMP Standard and Transitional, AMP plugin version <1.3.
	add_action( 'wp_footer', $print_amp_gtm, 20 );
	// For AMP Reader, AMP plugin version <1.3.
	add_action( 'amp_post_template_footer', $print_amp_gtm, 20 );
	add_filter( // Load amp-analytics component for AMP Reader.
	'amp_post_template_data',
	function( $data ) {
	return $this->amp_data_load_analytics_component( $data );
	}
	);

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The Tag Manager module should render its AMP tag (see Google\Site_Kit\Modules\Tag_Manager\AMP_Tag class) in Web Stories if an AMP container has been configured, the same way that the Analytics module does (see web_stories_print_analytics action).

Implementation Brief

Following the completion of #2998
In includes/Modules/Tag_Manager.php add a call to print the amp tag for web stories:
add_action( 'web_stories_print_analytics', $print_amp_gtm );

For reference, the Analytics module has this logic, see the snippets in the Feature Description of this ticket.

QA Brief

• Set up Tag Manager and verify if the amp-analytics is outputted in AMP.

Changelog entry

• Add Tag Manager AMP tag support for Web Stories.

[swissspidy]

cc @felixarntz

[felixarntz]

@swissspidy This is a bit more involved than just adding the hook:

• An "AMP" container must be used in GTM to be compatible with Web Stories.
• When detecting the "AMP mode" (relevant during GTM setup), we currently don't consider Web Stories (which e.g. in combination with a non-AMP website would still mean what we call "secondary" AMP because the site would have both AMP and non-AMP content). The lack of this means that, just from having Web Stories, Site Kit wouldn't allow selecting an "AMP" container in GTM.
• Note that the Web Stories-specific tracking modifications for Analytics wouldn't work. Tag Manager is also technically not necessarily Analytics, it really depends on how the container is configured, whether there is Analytics connected in its configuration. I believe the story-specific events tracking would also need to happen within Tag Manager configuration, so it wouldn't be something that the Web Stories plugin can control.

[swissspidy]

Ah, forgot about the whole detection and container selection part.

[swissspidy]

When detecting the "AMP mode" (relevant during GTM setup), we currently don't consider Web Stories

Would this be as simple as detecting whether the plugin is active?

Note that the Web Stories-specific tracking modifications for Analytics wouldn't work.

Noted 👍

[felixarntz]

I've included the improvement to consider the Web Stories plugin for the AMP mode detection in #2998. Afterwards we should be able to get this sorted.

[tofumatt]

IB ✅

[wpdarren]

QA Update: ⚠️

@asvinb OK, I have tried to test this but need some more direction. In the QAB. Set up Tag Manager and verify if the amp-analytics is outputted in AMP. Would it be possible to get more information on what we should expect to see and where we would verify this? I have set up Site Kit with Tag manager, AMP and activated Web Stories. I've looked in the debug log.

Sorry, but I am not overly familiar with AMP or Web Stories so any help is appreciated!

[swissspidy]

You shouldn't need to activate the AMP plugin for this.

When you create a new story in the Web Stories editor and preview that story on the frontend, you should see some <amp-analytics> tag in the source code with a configuration that matches the Tag Manager container ID in Site Kit.

[wpdarren]

@swissspidy perfect, thank you for the explanation!

[wpdarren]

QA Update: ✅

Initially, Google tag manager was not appearing in the source code on a Web story. When the branch was switched to develop the AMP container appeared in the Google tag manager source code. I checked that the configuration matches the Tag Manager container ID in Site Kit.