feat: add auto-tracking plugin

[liuyang1520]

Summary

Extract the auto-tracking logic from #529 to a new package.

• feat: add auto-tracking plugin

Instantiate the plugin

The plugin accepts 1 optional parameter, which is an Object to configure the allowed tracking options.

const plugin = autoTrackingPlugin({
  cssSelectorAllowlist: ['.amp-auto-tracking', '[amp-auto-tracking]'],
  tagAllowlist: ['button', 'a'],
});

Examples:

• The above cssSelectorAllowlist will only allow tracking elements like:
  • <button amp-auto-tracking>Click</button>
  • <a class="amp-auto-tracking">Link</a>
• The above tagAllowlist will only allow button and a tags to be tracked.

Note ingestionMetadata is for internal use only, you don't need to provide it.

Options

Name	Type	Default	Description
cssSelectorAllowlist	string[]	undefined	When provided, only allow elements matching any selector to be tracked.
tagAllowlist	string[]	['a', 'button', 'input', 'select', 'textarea', 'label']	Only allow elements with tag in this list to be tracked.

Checklist

• Does your PR title have the correct title format?
• Does your PR have a breaking change?:

[justin-fiedler]

@liuyang1520 instead of including ingestionMetadata on the plugin Options, can it instead be retrieved in setup() via the client config?

[liuyang1520]

Thanks @justin-fiedler ! Good call, I can remove this override and use the existing client config one.

[kevinpagtakhan]

can we get this name approved by growth and dx teams (or other stakeholders)?

[liuyang1520]

Good call! This plugin is for internal use at present, will definitely need more discussion/approval about the naming and interface if we want to make it ready to public users.

[kevinpagtakhan]

are we publishing to npm? it'll still be public if so. and we can't rename packages in npm

[kevinpagtakhan]

do these need to be separate or can we unify?

[liuyang1520]

I thought about this. The function is a little bit overlapping but not all are easy to configure. For tagAllowlist, if it is not provided, we have a list of default tags that we want to track, while cssSelectorAllowlist is for more advanced usage, if doesn't have a default list. If we just rely on cssSelectorAllowlist with a default list like ['button', 'a'], then problem is, when we want to add a allowed class, we have to do ['button.amp-auto-tracking', 'a.amp-auto-tracking'], need to explicitly copy all tags here (this is what I think not easy to configure). Let me know if you have any good thoughts on this, this interface is not ready to public users at the moment though.