npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@placedv/nebula

v0.0.4

Published

Unlock the Power of Data with Nebula! Seamlessly integrate CM360 and GA4 into your React applications for comprehensive tracking and analytics.

Downloads

1

Readme

Nebula - CM360 Floodlight Management for React Applications

Introduction

Nebula is a package designed to facilitate the management of CM360 (Campaign Manager 360) floodlight tags within React applications. It builds upon the functionality of the previously existing npm package, "Goofls," while offering enhanced performance and ease of installation. Nebula provides three essential functions to help you integrate floodlight tags seamlessly into your React projects.

Installation

You can install Nebula using npm or yarn.

npm i @placedv/nebula
yarn add @placedv/nebula
pnpm add @placedv/nebula

Or import directly in your html

<html>
    <head>
        <script src="https://nebula.placedv.com/nebula/latest/index.js" async type="text/javascript"></script>
    </head>
    <body>
        // ...
    </body>
</html>

Basic usage

Nebula offers three main functions that are crucial for integrating CM360 floodlight tags into your React applications: nebula.init(), nebula.floodlight(), and nebula.event().

Below, you will find a detailed explanation of each function and its required parameters.

Nebula works to generate a global_site_tag, iframe and image tags are deprecated.

Read more about gtag here.

nebula.init

This function initializes Nebula and is mandatory to set up your CM360 floodlight management. The required parameter is:

| Value | Type | Required | Description | | :--- | :--- | :--- | :--- | | gtag | string | true | The ID of the Google Global Site Tag (gtag) associated with your CM360 account. |

Example

nebula.init('DC-6334513');

nebula.floodlight

This function is used to trigger specific floodlight events. The required parameters are:

| Value | Type | Required | Description | | :--- | :--- | :--- | :--- | | type | string | true | The ID of the floodlight type. | | cat | string | true | The ID of the floodlight category. | | custom_variables | object | false | This parameter allows you to specify custom variables for the floodlight event. |

Example

nebula.floodlight('mynme0', 'testu0', {
    u1: '[ref]'
});

nebula.event

Use this function to track events associated with your CM360 floodlight tags. The required parameters are:

| Value | Type | Required | Description | | :--- | :--- | :--- | :--- | | counting_method | string | true | The type of event counting method (e.g., 'conversion,' 'standard,' 'sale'). | | allow_custom_scripts | string | true | A boolean value indicating whether to allow third-party tags (custom scripts) to be executed. |

Example

nebula.event('conversion', false);

Example

This code demonstrates a basic implementation of Nebula within a React application, initializing CM360 floodlight management and triggering a floodlight event when the component is mounted. Developers can build upon this foundation to incorporate more advanced tracking and event management into their React applications with Nebula.

import {useEffect} from 'react'
import nebula from 'nebula'

function App() {
    useEffect(() => {
        nebula.init('DC-6334513')
        nebula.floodlight('mynme0', 'testu0', {u1: '[ref]'})
        nebula.event('conversion', false)
    }, [])
    return (
        <>
            Test Application
        </>
    )
}

export default App;

Or inside your html application.

<html>
    <head>
        <script src="https://nebula.placedv.com/nebula/latest/index.js" async type="text/javascript"></script>
    </head>
    <body>
        <script>
            nebula.init('DC-6334513')
            nebula.floodlight('mynme0', 'testu0', {
                u1: '[ref]'
            })
            nebula.event('conversion', false)
        </script>
    </body>
</html>