Insert HTML comments for each module/product snippet

Feature Description

For the different snippets place via Site Kit it may be useful to insert a comment such as inserted via Site Kit.

The AdSense module already provides a useful hint in the form of the below: tag_partner: "site_kit"

While there are additional hints of Site Kit placements more obvious comments may assist in troubleshooting issues, in particular for Analytics and Tag Manager users.

---

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

Acceptance criteria

• All snippets which Site Kit places for Google services should be annotated with surrounding HTML comments:
  • Above: Google xyz snippet added by Site Kit
  • Below: End Google xyz snippet added by Site Kit
  • See below for the different “xyz” permutations.
• For AdSense (web and AMP): AdSense, AdSense AMP
• For Analytics (web and AMP, plus opt-out): Analytics, Analytics AMP, Analytics opt-out, Analytics AMP opt-out (all of these annotations should also be used for the respective GA4 snippets in the analytics-4 module)
• For Tag Manager (web and AMP): Tag Manager, Tag Manager AMP
• Anywhere a snippet is rendered for (AMP) Stories, it should also use the regular * AMP annotation.
• The comments should always be separated from the actual snippet through a line break, i.e. they should not appear in the same line.

Implementation Brief

As per the AC add HTML comments above and below the placement of each tag snippet. Ensure the comments are separated from the tag snippet using line breaks. The comments are:

• Above: Google xyz snippet added by Site Kit
• Below: End Google xyz snippet added by Site Kit

In each case replace xyz with the relevant text in the AC.

• For Adsense add the comments to the output of the tag snippets in the render methods:
  • Modules/Adsense/Web_Tag
  • Modules/Adsense/AMP_Tag
    • Note that the comments all need to be added to the amp_content_add_auto_ads and set_story_ad_slot_id methods
• For Analytics AMP render methods:
  • Modules/Analytics/AMP_Tag
• For Tag Manager render methods:
  • Modules/Tag_Manager/AMP_Tag
  • Modules/Tag_Manager/Web_Tag
• For Analytics and Analytics 4 use the script_loader_tag filter to add the comments:
  • Modules/Analytics/Web_Tag
  • Modules/Analytics_4/Web_Tag

QA Brief

• As per the AC, all inserted snippets by Site Kit will have surrounding HTML comments.
• You will need to enable all the modules to test every snippets.
• For Opt Out snippets, you’ll need to have Analytics Opt Out Enabled
• Please check for both logged in and not logged in state!
• Use View Source to inspect the source code and feel free to use “Ctrl+F / Cmd+F” to find the relevant parts of the source code. ie. ‘snippet added by Site Kit’

Changelog entry

• Add surrounding comments to all HTML tags output by Site Kit modules.

[Hazlitte]

@felixarntz @jamesozzie I have added an IB for this. Note that render methods are not being used to output all tag snippets, in some cases wp_enqueue_script is being used. (as noted in the IB)

[wpdarren]

QA Update: ✅

Verified:

All snippets which Site Kit places for Google services have annotated with surrounding HTML comments:

• For AdSense (web and AMP): AdSense, AdSense AMP

• For Analytics (web and AMP, plus opt-out): Analytics, Analytics AMP, Analytics opt-out, Analytics AMP opt-out Screenshot

• For Tag Manager (web and AMP): Tag Manager, Tag Manager AMP Screenshot

• Tested the HTML comments when logged in and out.

• The comments are separated from the actual snippet through a line break, i.e. they do not appear in the same line.