next/third-parties: Add generics to sendGTMEvent

[thany]

Goals

1. Make sure the typings used to send GTM data is consistent throughout the app
2. Make sure the data analyst person isn't willy-nilly making up fields that shouldn't exist
3. All other advantages of typings.

Non-Goals

1. Force everyone using sendGTMEvent to use exactly the same (hence, generics)
2. Validate typings against what Google expects

Background

The sendGTMEvent function currently takes an Object parameter, which could be basically any object in the world. Usually there is some kind of consistent structure of an object to send to Google, but it depends on how GTM is implement at the customer's side.

For that reason, it is helpful if we the developers could supply what that structure is, that the implemented GTM expects to recieve.

Proposal

1. A hook function

The GoogleTagManager provider recieves a generic parameter that dictates the type of data that can be supplied into the send function throughout the app.

const template: MyGTMType = { foo: 'bar' };

return (
  <GoogleTagManager template={template}>
    {/* rest of the app */}
  </GoogleTagManager>
);

That template is there to infer the type, since React component cannot be explicitly generic. Several libraries exist that do it that way, and it works really well. Essentially, the GoogleTagManager props need to be extended with one extra prop:

interface Props<T extends Object = Object> extends GTMParams {
  template: T;
}

const GoogleTagManager = <T extends Object = Object>(props: Props<T>) => {
  // ...
};
export GoogleTagManager;

It would then provide a context with automagically the same generic, and a hook function to recieve the send function. I haven't thought that out in detail, but I'm sure it can work. Hopefully 🙏🏻

2. Generic send function

This one is compatible with the current set up.

Add a generic parameter to the sendGTMEvent function and be done with it:

export const sendGTMEvent<T extends Object = Object> = (data: T) => {
  // ...
};

The only disadvantage is that we, as developers, need to never forget to supply it that generic parameter with each and every call, in order to maintain type safety. Otherwise it'll fall back to Object.

[thany]

A small addendum: presumably since sendGTMEvent is exported as a straight-up function, without first declaring it as an interface, it seems impossible to augment the signature of sendGTMEvent in a .d.ts file. At least I haven't found one of the countless augmentation syntaxes that makes this function show a different signature. It seems impossible in Typescript to augment a function signature ☹

[mlynch]

I think the type for sendGTMEvent is wrong. The official GA script passes the arguments object from the function to the array, while this expects a single object argument.

[thany]

All the more reason to make it a typed function, innit.