Why do we build Open Source solutions at TEONITE?

Programming is our passion. It drives us to create tools that streamline our creative process. That is why publish almost all of these solutions in the Open Source version and let the community use and modify them.

Problem? So why we are building Open Source solutions

Often when working on a project, we encountered a situation in which we missed a tool, or those already available did not meet our expectations. A perfect example of this was the project for one of the largest film studios, during which we had the opportunity to face quite specific, but not unique, tasks eg. integration with Google analytical tools, including Google Tag Manager.

Although the problem seems quite simple, we could not find a library that would easily accomplish these tasks and be "React". Following the spirit of Open Source, instead of creating a one-time solution, we decided to build the appropriate library and make it publicly available on GitHub.

The react-simple-gtm library

We lacked the logical, simple and well-functioning integration of Google Tag Manager with the site/application running in React. Each of the existing libraries seemed to be too complicated to configure, or too intrusive in the way of use. The inspiration for its construction was the react-intl library, which is based on providers and Injects, thanks to which it is very easy to use when creating components.

In the react-simple-gtm, the process of adding tags is not complicated:

  • at the beginning we build the provider's tag - we initiate the tag management system with Google Tag ID.
import TagProvider from 'react-simple-google-tag-manager';

//...

ReactDOM.render(  
    // ... other providers
    <TagProvider gtmId="<your_tracking_id">
        // your application or router
    </TagProvider>
    // ...
    , 
    document.getElementById('root'),
);
  • using injectTag we "inject" it into every component where we need Google Tag Manager.
import {injectTag} from 'react-simple-google-tag-manager';  
export default injectTag(MyAwesomeComponent);  
  • as an additional property in the component we get a tag object whose push method allows you to send the google event tag.
import {tagShape} from 'react-simple-google-tag-manager';

const MyAwesomeComponent = ({tag}) => (  
    <button onClick={() => tag.push('event', 'click_me_btn_clicked')}>
        Click Me
    </button>
)

MyAwesomeComponent.propTypes = {  
    tag: tagShape,
}

Our Open Source database is still growing

As of today, dozens of Open Source applications came from our production. The newest of them, in addition to those described above, include libraries for converting "“json” to “po” and “po” to “json”.

In addition, we are working to release more libraries that you will surely hear about.
If you want to learn more about our other Open Source initiatives, be sure to check out:

Open Source T-shirts

satNOGS

Inspectr

or visit our profile on GitHub.

click to subscribe
hire us

Let’s talk about Mobile Apps

We’d love to design, develop and release them for you.

Highest DevOps Standards

Our team wield the right skills to make things work.

Angular magic in the making

Most flexible development technology for stunnig results.

Web Apps cooked the right way

The ultimate combination of code, design and user experience.

Django REST Framework

TEONITE develops, supports and donates open source projects.