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

@adv-ui/ma-segment-wrapper

v2.1.0

Published

Milanuncios Segment Wrapper

Downloads

1,948

Readme

Milanuncios Segment Wrapper

Usage

First, copy the official snippet in your HTML

Then, use it in your modern JavaScript...

// First import the module.
import analytics from '@adv-ui/ma-segment-wrapper'

// Then trigger all the events you need.
analytics.identify('your user id', {
  // All your traits
})
analytics.track('your event name', {
  // All your properties
})
analytics.reset()

Or, in your monolithic pages...

Use UMD cdn:

  • PRE: https://scm-milanuncios-frontend-pre.milanuncios.net/segment-wrapper/index.js
  • PRO: https://scm-milanuncios-frontend-pro.milanuncios.com/segment-wrapper/index.js
// First load the UMD module.
<script src="https://scm-milanuncios-frontend-pro.milanuncios.com/statics/segment-wrapper/index.js"></script>
<script>
  // Then trigger all the events you need referencing the right namespaced
  // object: `window.motor.analytics`. For more info see the "Events" section below.
  window.sui.analytics.identify('your user id', {
    // All your traits
  });
  window.sui.analytics.track('your event name', {
    // All your properties
  });
  window.sui.analytics.reset();
</script>

CI

React pages

You need to use @s-ui/bundler link-package option to test your code in development environment at localhost.

If you want to test it in a PRE environment, you should release a beta version of this package and install it in web-app in order to check it how performs in PR stack.

Monolito

You want to have your assets on PRE environment, The steps that you need to follow are:

  1. Create a branch from master
  2. Put you assets inside the images || fonts folder
  3. Push the branch to origin
  4. Open a PR
  5. Travis will be listening for new PR's ONLY from branches which its origin is MASTER
  6. Travis will made a deploy to our PRE bucket.

You want to have your assets on PRO environment, The steps that you need to follow are:

1 - Have a valid PR already opened 2 - Merge this PR into MASTER (ONLY WILL WORK IF YOU MERGE A PR WHICH ITS ORIGIN WAS MASTER INTO MASTER) 3 - Travis will made a deploy to our PRO bucket and @adv-ui/ma-segment-wrapper npm package will be published

Events

Check the cross Segment Wrapper documentation: https://github.mpi-internal.com/scmspain/frontend-all--segment-wrapper#events

External trackers

For those tracking pixels we cannot migrate to Segment yet, we could implement them with a solution in order to make them work with our wrapper.

How to define new trackers

Just add a new tracker folder inside the externalTrackers directory, for example: src/externalTrackers/yourCustomTracker/index.js.

Then, put all the tracker content inside this file:

// src/externalTrackers/yourCustomTracker/index.js
export default ({event, properties}) => {
  // Do your magic here...
}

And finally, include it in the array externalTrackers:

// src/externalTrackers/index.js
import yourCustomTracker from './yourCustomTracker'

const externalTrackers = [yourCustomTracker]

// ...

Invalidating cache after deploys (UMD version)

Since we don't want to download the UMD module each time the file is requested from the S3 servers, we need to invalidate the server cache.