Create a Google Analytics plugin

[fmvilas]

Description

We used to have Google Analytics hardcoded (see #13). However, some people may not want to use it so it's better if we make it a plugin instead.

Implementation suggestion

1. Go to src/pages/_app.js file and make it trigger a new kind of event on the render function. For instance, something like a page:render event. Make sure this event is only triggered on the client-side render.
2. Make the plugin subscribe to the event and trigger an initialize and pageview call when a new event comes in.

Hints

The code for triggering/subscribing to events is on src/lib/events.js. However, this library was created for the backend and it imports the config lib, which may contain secrets. If we use the events lib on the frontend, these secrets may be exposed on the browser. Watch out!

[AceTheCreator]

Hi, @fmvilas I'd really love to contribute and help with the development of the studio. I'd love to start by fixing current open issues. and is there a slack group for the ongoing development of the studio?

[fmvilas]

Hey! Sure, you can join us at asyncapi.com/slack-invite. There's a #tooling channel there. Thanks!

[AceTheCreator]

@fmvilas Developers can manually enable/disable the plugin from the codebase right?

[fmvilas]

Yeah, the way to configure the plugins you want to load is to edit this file here: https://github.com/asyncapi/studio/blob/master/config/plugins.json.

[AceTheCreator]

@fmvilas Can i change the _app.js to a functional component? or is there a specific reason why you're using class component?

[fmvilas]

No problem. Feel free to change it.

[AceTheCreator]

@fmvilas I'm having issue with plugin path after adding a plugin to the plugins.json file.
on the left panel is the error message i'm getting when loading a plugin. Note: the plugin successfully loaded but after i get this message. Any idea how to fix it?

[AceTheCreator]

@fmvilas I'm having issue with plugin path after adding a plugin to the plugins.json file.
on the left panel is the error message i'm getting when loading a plugin. Note: the plugin successfully loaded but after i get this message. Any idea how to fix it?

In the plugins.json file i just pass it like this { plugins: ['path to plugin folder', ... ] } I'm i doing something wrong?

[fmvilas]

mmmm not sure. Can you push a PR so I can try myself?

[AceTheCreator]

@fmvilas try using the existing code by adding sentry path to the list of plugins in the plugins.json file and see.

[fmvilas]

Oh! I know what's happening. Plugins are always loaded from node_modules. So if you try to load ./plugins/google-analytics it's going to try to load node_modules/plugins/google-analytics. The best way to overcome this during development is to link the module like this:

cd plugins/google-analytics
## Make sure the package name and version are correct. Something like `@asyncapistudio/plugin-google-analytics` and version `0.1.0` or whatever you prefer.
npm link

Then go back to the project root directory and tell it you want to use the linked package:

cd ../.. # Back to project root dir
npm link @asyncapistudio/plugin-google-analytics # or the package name you chose

And now on the plugins.json file, you have to specify it like this:

{
  "plugins": [
    "@asyncapistudio/plugin-google-analytics"
  ]
}

Hope that makes sense :)

[AceTheCreator]

Oh! I know what's happening. Plugins are always loaded from node_modules. So if you try to load ./plugins/google-analytics it's going to try to load node_modules/plugins/google-analytics. The best way to overcome this during development is to link the module like this:

cd plugins/google-analytics
## Make sure the package name and version are correct. Something like `@asyncapistudio/plugin-google-analytics` and version `0.1.0` or whatever you prefer.
npm link

Then go back to the project root directory and tell it you want to use the linked package:

cd ../.. # Back to project root dir
npm link @asyncapistudio/plugin-google-analytics # or the package name you chose

And now on the plugins.json file, you have to specify it like this:

{
  "plugins": [
    "@asyncapistudio/plugin-google-analytics"
  ]
}

Hope that makes sense :)

Yeah it makes sense . One more thing @fmvilas how do i make the plugin subscribe to an event on page render?

[AceTheCreator]

@fmvilas is the event.on for subscribing and event.emit for triggering?

[fmvilas]

Yes! But you probably will have to emit the event yourself when a page is rendered. And also subscribe on the plugin side, of course.

I recommend you to have a look at the Node.js EventEmitter, which is what we're using right now.

[AceTheCreator]

Ok I'll have a look at it.
When i import the event to ._app.js i get an error requiring fs which i was able to overcome by ignoring npm packages that depend on fs module. But after that i get this error relating to .env

[AceTheCreator]

Ok I'll have a look at it.
When i import the event to ._app.js i get an error requiring fs which i was able to overcome by ignoring npm packages that depend on fs module. But after that i get this error relating to .env

I tried ignoring it but it seems it has something to do with the overrideWithEnvVars function in the lib which i know is specific for server side. Any idea how i can overcome this?

[AceTheCreator]

Ok I'll have a look at it.
When i import the event to ._app.js i get an error requiring fs which i was able to overcome by ignoring npm packages that depend on fs module. But after that i get this error relating to .env

I tried ignoring it but it seems it has something to do with the overrideWithEnvVars function in the lib which i know is specific for server side. Any idea how i can overcome this?

@fmvilas I was able to resolve this problem, so don't worry looking into it.

[AceTheCreator]

@fmvilas How do i make the plugin subscribe to the event? I already define a page:render event on the plugin's package.json, how do i get to use this event? I'm kinda confuse.

[fmvilas]

Oh, I completely missed your messages above. Glad you were able to solve it. Bear in mind that _app.js is a file that executes on the server first and then again on the browser, so nothing backend-related can be imported there, especially environment variables which may contain secrets.

That means you'll have to create an eventing system for the front end. Something like this but only imported in frontend.

[AceTheCreator]

Oh, I completely missed your messages above. Glad you were able to solve it. Bear in mind that _app.js is a file that executes on the server first and then again on the browser, so nothing backend-related can be imported there, especially environment variables which may contain secrets.

That means you'll have to create an eventing system for the front end. Something like this but only imported in frontend.

Ok I'll do that. But how can i make the plugin subscribe to an event?

[AceTheCreator]

@fmvilas I'm trying to make the plugin subscribe to the page:render event. On page render i emit the the event, will i also have to import the plugin in the _app.js file and listen for the event and trigger the plugin cuz i'm quite confuse 😶‍🌫️. Should i open a draft PR? So that you can point me to the right direction

[fmvilas]

Yeah, I think that's the best way.

[AceTheCreator]

Description

We used to have Google Analytics hardcoded (see #13). However, some people may not want to use it so it's better if we make it a plugin instead.

Implementation suggestion

1. Go to src/pages/_app.js file and make it trigger a new kind of event on the render function. For instance, something like a page:render event. Make sure this event is only triggered on the client-side render.
2. Make the plugin subscribe to the event and trigger an initialize and pageview call when a new event comes in.

Hints

The code for triggering/subscribing to events is on src/lib/events.js. However, this library was created for the backend and it imports the config lib, which may contain secrets. If we use the events lib on the frontend, these secrets may be exposed on the browser. Watch out!

@fmvilas when I subscribe to the event from a different file and I trigger it in the app.js render it doesn't work. For instance, when I call event names from the app.js to check the list of subscribed events, it returns an empty array. Except I call both the subscribe and trigger event within the page render function in the app.js
@fmvilas please check out my updated draft PR

[fmvilas]

@magicmatatjahu can you have a look? I really don't have much time to dig into code 😓 👶 🍼

[magicmatatjahu]

@AceTheCreator I answered in the PR :)

I know @fmvilas that you are very busy, but please, in the free time, check my comment, because (probably) we cannot use plugins on the client side. More info is in comment. Maybe you had this case in mind when you wrote issue's description, so let us know 😅

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[magicmatatjahu]

Since we're going with a different implementation of Studio (as a SPA app, rather than using NextJS) I'm closing this issue. In addition, the implementation of the current plugins works only on NodeJS and not in the browser (#37 (comment)), so we have to redefine them - probably have two types, for the frontend (asyncapi/asyncapi-react#433) and backend (#86).