Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/useflyyer/flyyer-ping
Script for analytics and pre-rendering Flayyer images simple as https://edge.flayyer.host/v2/pixel.gif
https://github.com/useflyyer/flyyer-ping
analytics flayyer image-generator javascript lerna open-graph react twitter-cards typescript
Last synced: 8 days ago
JSON representation
Script for analytics and pre-rendering Flayyer images simple as https://edge.flayyer.host/v2/pixel.gif
- Host: GitHub
- URL: https://github.com/useflyyer/flyyer-ping
- Owner: useflyyer
- Created: 2020-09-12T13:05:04.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T18:49:15.000Z (about 2 years ago)
- Last Synced: 2025-01-04T15:04:28.961Z (18 days ago)
- Topics: analytics, flayyer, image-generator, javascript, lerna, open-graph, react, twitter-cards, typescript
- Language: JavaScript
- Homepage: https://flayyer.com
- Size: 1 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flayyer Ping
Monitor and pre-render [Flayyer URLs](https://flayyer.com?ref=github)
[](https://lerna.js.org/)
## Concept
**This is very similar to Facebook Pixel.**
This lightweight script with zero dependencies reads the `` of your HTML and if it finds a Flayyer URL in the contents of `og:image` or `twitter:image` it will ping one of our Flayyer severs to pre-render them (if were not rendered before) and to track some information to measure the impact of those images.
The easiest way of using this script is via a `` tag at the end of the `<body>` element. Here is an example:
```html
<script async defer src="https://unpkg.com/@flayyer/ping-script/dist/ping.min.js">
```
So a fully-featured but also minimalist site using Flayyer should look like this:
```html
Example
Example
...
```
By using this script we are able to pre-render the image at `https://flayyer.host/v2/tenant/deck/template.jpeg?title=Example` and also keep track of outside visitors that may be interested in your link thanks to the preview we generated.
## Packages
Checkout the [/packages](./packages) directory, anyways here is the full list:
| Package | Github | NPM | Description |
|----------------------|-------------------------------------------------|------------------------------------------------------------------------|----------------------------------------------------------------------------------------|
| @flayyer/ping | [/packages/ping](./packages/ping) | [@flayyer/ping](https://npmjs.com/package/@flayyer/ping) | Base script logic. Every other package imports this. |
| @flayyer/ping-script | [/packages/ping-script](./packages/ping-script) | [@flayyer/ping-script](https://npmjs.com/package/@flayyer/ping-script) | Minified script for browsers (``) |
| @flayyer/ping-module | [/packages/ping-module](./packages/ping-module) | [@flayyer/ping-module](https://npmjs.com/package/@flayyer/ping-module) | CommonJS-like package so you can import it on project with Webpack, Rollup or similar. |
| @flayyer/ping-react | [/packages/ping-react](./packages/ping-react) | [@flayyer/ping-react](https://npmjs.com/package/@flayyer/ping-react) | React hook and component for React.js projects. |
## Flayyer URLs
The easiest way of generating Flayyer URLs and forget about dealing with encoding issues is by using [flayyer/flayyer-js](https://github.com/flayyer/flayyer-js).
```js
import Flayyer from "@flayyer/flayyer";
const flayyer = new Flayyer({
tenant: "tenant",
deck: "deck",
template: "template",
variables: {
title: "Hello world!",
},
});
// Use this image in your