Giter VIP home page Giter VIP logo

reftracker's Introduction

RefTracker
๐ŸŽ… Track Referrals Privately ๐ŸŽ…

GitHub commit activity CodeFactor Grade GitHub branch checks state

Log site referrals efficiently without any large scale, privacy degrading trackers.

[โœ”] Serverless.
[โœ”] Small client bundle.
[โœ”] Served on Cloudflare.
[โœ”] Privacy focused.
[โœ”] GNU GPL v3.0 Licence.
[โŒ] Readable internal code.

How to setup

Prerequisites

  1. A Cloudflare account
  2. A Fauna Account
  3. Cloudflare Wrangler Installed
  4. A Github Account
  5. A Basic Knowlage of Git / GitHub

Setting Up Fauna

Our first step will be configuring a database through Fauna's dashboard.
After you've logged into the dashboard, create a new database named RefTracker and choose a region closest to your users:
DB Creation

Creating the referral catalog

We're now going to create the Referrals collection to store the documents for our inventory.
To accomplish this, we're going to execute an FQL query on the Fauna shell which is available from the main menu of the dashboard:
Referral catalog creation

To create a collection, simply execute the following FQL query that uses the CreateCollection function:

CreateCollection({name: "Referrals"})

The result will be similar to this:

{
  ref: Collection("Referrals"),
  ts: 1617851434855000,
  history_days: 30,
  name: "Referrals"
}

Creating a server key

To be able to connect to the database from a Worker we now need to create a key.
Go to the Security section of the dashboard and create a new key with the Server role:
Server key creation

After saving, Fauna will show us the key's secret which we'll use to execute queries from our Worker: Referral catalog creation

Save the secret somewhere safe as Fauna will never show it again.
Also, never commit this secret to your Git repository. The Server role is all-powerful. Anyone with this secret would have full access to the database. The initial configuration of Fauna is ready.

Github Configuration

Fork this on github and pull it to your computer. (If your using this I would assume you would know what I'm talking about)

Go to Cloudflare and open account settings.
Cloudflare account

Go to the API Tokens tab and generate a new token.
Api Tokens Tab

Select the Edit Cloudflare Workers template.
Set Account Resources to your email address and set Zone Resources to "All Zones from an account and your email address.
Api config
Continue through and create the token. Copy the token and create a new Github secret in settings (Settings => Secrets => New Repository Secret) with the name CF_API_TOKEN and paste in the Cloudflare token. Save.

Wrangler Config

Login to Cloudflare.

wrangler login

Run

wrangler secret put FAUNA_SECRET

then paste your Fauna Secret saved earlier.

File Config

Open configuration.json and modify regionString, corsOriginDomain, collectionName, siteName, refPath, githubRefTrackerUrl to the respective labeled values

Variable Name Intended Content
regionString Region string were your database is held.
corsOriginDomain Page that will be tracked CORS domain.
collectionName The name of your database collection.
siteName Name for logs (Uninportant).
refPath Path of url to send logs to.
githubRefTrackerUrl The path to reftracker.min.js in your github repository (/client/reftracker.min.js).

Intergrating

Push your changes

Client Testing

Create an HTML Document or use your production website.
To add tracking, put:

<script defer data-send-location="https://[Your worker URL]/[refPath]" src="http://[Your worker URL]/reftracker.min.js"></script>

in the header, it should automatically start tracking requests.

And thats it, just access your website with ?ref=example as a paramater and check your database!

reftracker's People

Contributors

stupideveloper avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.