❤
npm
Sign UpSign In

grapesjs-ga

1.0.2 • Public • Published

Grapesjs Google Analytics

Easily link to your google analytics or google tag manager

DEMO

HTML

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-ga"></script>

<div id="gjs"></div>

JS

const editor = grapesjs.init({
	container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: ['grapesjs-ga'],
});

CSS

body, html {
  margin: 0;
  height: 100%;
}

Summary

  • Plugin name: grapesjs-ga
  • Components
    • gtm
    • ga
  • Blocks
    • gtm-block
    • ga-block

Options

Option Description Default
gtmId value from google tag manager dashboard
gtmLabel label for google tag manager block Tag Manager
gtmCategory category for google tag manager block Google
gtmBlock options to extend google tag manager block {}
gtmComponent options to extend google tag manager component model {}
gaId value from google analytics dashboard
gaLabel label for google analytics block Analytics
gaCategory category for google analytics block Google
gaBlock options to extend google analytics block {}
gaComponent options to extend google analytics component model {}

Download

  • CDN
    • https://unpkg.com/grapesjs-ga
  • NPM
    • npm i grapesjs-ga
  • GIT
    • git clone https://github.com/ju99ernaut/grapesjs-ga.git

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-ga.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container: '#gjs',
      // ...
      plugins: ['grapesjs-ga'],
      pluginsOpts: {
        'grapesjs-ga': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-ga';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/ju99ernaut/grapesjs-ga.git
$ cd grapesjs-ga

Install dependencies

$ npm i

Start the dev server

$ npm start

Build the source

$ npm run build

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i grapesjs-ga

Repository

github.com/ju99ernaut/grapesjs-ga

Homepage

github.com/ju99ernaut/grapesjs-ga#readme

Weekly Downloads

172

Version

1.0.2

License

MIT

Unpacked Size

36.7 kB

Total Files

10

Last publish

Collaborators

  • ju99ernaut
Try on RunKit
Report malware