Elements not defined about matomo-tracker HOT 10 CLOSED

@GentillePlume try using this code instead:

import React from 'react'
import { useMatomo } from '@datapunt/matomo-tracker-react'

const MyComponent = () => {
  const { trackPageView, trackEvent } = useMatomo()

  // Track page view
  trackPageView()

  const handleOnClick = e => {
    // Track click on button
    trackEvent({ category: 'sample-page', action: 'click-event' })
  }

  return <button type="button" onClick={handleOnClick}>Click me</button>
}

from matomo-tracker.

@GentillePlume If you want to use a class component make sure to add the render() method to your component. I would reccomend to read the React documentation.

I am closing this issue as the problem seems to be resolved. Good luck with your app!

from matomo-tracker.

I am not sure why this would fail to compile, this looks like you've got some linting issues that are unrelated to the library.

The problem seems to be in Dashboard.jsx

from matomo-tracker.

These 3 errors are only about the code in the doc :

import { useMatomo } from '@datapunt/matomo-tracker-react'

const MyComponent = () => {
  const { trackPageView, trackEvent } = useMatomo()

  // Track page view after page load
  React.useEffect(() => {
    trackPageView()
  }, [loading])

  const handleOnClick = e => {
    doSomething(e)

    // Track click on button
    trackEvent({ category: 'sample-page', action: 'click-event' })
  }

  return <Button onClick={handleOnClick}>Click me</Button>
}

from matomo-tracker.

So what is the actual error you are getting? We cannot help without this information.

from matomo-tracker.

My error is the same of my first message, the compilation failed, because of undefined variables
that are in the component of the doc :/

./src/js/components/modules/dashboard/Dashboard.jsx
  Line 10:6:   "loading" is not defined      no-undef
  Line 13:3:   "doSomething" is not defined  no-undef
  Line 19:10:  "Button" is not defined       react/jsx-no-undef

Search for the keywords to learn more about each error.

from matomo-tracker.

Well this code in the documentation is pure an example of an implementation, it's not something you should simply copy-paste, sorry if that isn't clear.

But to solve your problem: it seems like you didn't include a Button component, loading and a doSomething() method. these need to exist in order to make the lint errors to go away :)

from matomo-tracker.

Thank you very much for your help ! It's working !
Now, I have a last problem, your syntaxe is'nt accepted for un class component.

It's working for this kind of component :

const Dashboard = () => {
	
	const { trackPageView, trackEvent } = useMatomo();
	
	// Track page view
	trackPageView();

But not for this one (class) :

class Candidatures extends React.Component {
	
	const trackPageView = useMatomo()

	// Track page view
	trackPageView();

https://i.imgur.com/A7hYRjf.png

Do you know which syntax I need to use for this kind of component ?

Thank you one more time for your very cool work and your help !

from matomo-tracker.

Sorry to bother you with that.
I put it in render() like this :

render() {
		
		const { trackPageView, trackEvent } = useMatomo();
		// Track page view
		trackPageView();
		
		return (

Compilation ok, but react not agree.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

I know there is a hook problem but I don't know how to solve this. I tried some possibilities but no one works.

I checked https://reactjs.org/docs/hooks-state.html and https://reactjs.org/warnings/invalid-hook-call-warning.html before send you this message.

Can you help me one last time ?

from matomo-tracker.

@melvinlemoine here you will find the React documentation on using Context: https://reactjs.org/docs/context.html#contextconsumer

Accessing matomo context in class component could be done as following:

export class DropdownSideBarFilter extends React.Component<IProps, IState> {
  static contextType = MatomoContext;
  handleChange() {
    this.context.trackEvent()
  }  

from matomo-tracker.