russellsteadman / affiliate Goto Github PK

View Code? Open in Web Editor NEW

107.0 6.0 12.0 1.82 MB

Add affiliation tags to links automatically in the browser

Home Page: https://affiliate.js.org/

License: MIT License

TypeScript 100.00%

affiliate link amazon referral marketing ads advertising dom javascript affiliate-links affiliates

affiliate's Introduction

Affiliate

Affiliate is a platform agnostic link affiliator. Simplify affiliating links with automatic affiliation in the browser. Affiliate works with libraries that mutate the DOM after the page loads, including React.

Installation

Use NPM or Yarn

$ npm install affiliate
$ yarn add affiliate

Or use a CDN (check out the codeless setup)

<script src="https://cdn.jsdelivr.net/npm/affiliate@5/dist/web/affiliate.web.js"></script>

The precompiled version of affiliate@5 supports modern browsers (i.e. ES2016 or above) by default.

What It Can Do

Affiliate can modify query tags (e.g. setting ?tag=my-tag, which is the most common method for affiliate tags), modify URL paths, and modify host names.

<a href="https://example.com/shop/product/item-id">Original</a>

<a href="https://example.com/shop/product/item-id?ref=my-tag">New Query Tags</a>
<a href="https://example.com/shop/product/item-id/ref/my-tag"
  >Modified URL Path</a
>
<a href="https://my-tag.example.com/shop/product/item-id">Modified Host Name</a>

Affiliate has easy plugins, including one for Amazon, which simplify adding affiliate links even more.

Basic Setup

Read the documentation for more advanced usage.

import Affiliate from 'affiliate';

const aff = Affiliate.create({
  tags: [
    {
      hosts: ['example.com', 'www.example.com'],
      query: {
        ref: 'my-tag', // This means ?ref=my-tag
      },
    },
    {
      hosts: ['example.org', 'shop.example.org'],
      query: {
        tag: 'my-tag2', // This means ?tag=my-tag2
      },
    },
  ],
});

aff.attach();

Documentation

Affiliate is simple and quick to set up, even for more complex usage. Read the docs at: affiliate.js.org.

Blogs and Related Sites

A simplified codeless solution might better suit some sites that use content module systems, such as WordPress, SquareSpace, etc.

Insert this code within the HTML <head>...</head> tag. The contents of the data-auto-affiliate attribute will tell Affiliate what to do.

<script
  data-auto-affiliate="WHERE amazon.com, www.amazon.com SET tag = MY-AMAZON-TAG"
  src="https://cdn.jsdelivr.net/npm/affiliate@5/dist/web/affiliate.web.js"
  async
  id="aff-js"
></script>

data-auto-affiliate Syntax

The syntax for data-auto-affiliate is capital WHERE, a comma separated list of domains, capital SET, and then comma separated list of URL queries in the format key=value. Multiple website groups can be separated by a capital AND.

WHERE amazon.com, www.amazon.com SET tag = MY-AMAZON-TAG AND WHERE example.com, shop.example.com SET ref = MY-OTHER-TAG

Left with Questions?

If for any reason you feel that this documentation is unclear or incomplete, add an issue detailing what needs to be improved.

Star This Project

Like this project? Let me know by putting a star on it. 😉🌟

License

MIT (C) Russell Steadman. Learn more in the LICENSE file.

affiliate's People

Contributors

Stargazers

Watchers

Forkers

loai-kanou gitty8 hekpac ahnaf ratanservegar axes-co dwtcourses ichoake akadata wanghaisheng ken1901 mookth789

affiliate's Issues

Typescript?

First off, thank you for building Affiliate. It's got a pretty ergonomic API and does exactly what it says on the box.

Now, I use Affiliate on a few websites for clients of my side hustle. The sites use a pretty common stack: Next.js (React.js) w/ TypeScript & a headless CMS of some sort. Because I use TS, I try to keep all my dependencies typed if I can. One of the few dependencies that I currently make an exception for is Affiliate because it's basically the only game in town.

So, the reason for this issue is to let you know I'd really appreciate Typescript support. If it's a non-starter I totally get it, but I figured it'd be worthwhile to show support for adding it just in-case you were on the fence about it.

Link with target and rel attributions

Hi there,
Do you have functions like adding target and rel attributions for affiliate urls?

Thank you.

[Affiliate] TypeError: e.set is not a function

Hi @russellsteadman,

I'm implementing now Affiliate and AffiliatePluginAmazon with the intention to use the new aff.convert() method, added in v5 after our last thread here: #31 (comment)

However, as I'm putting it all together in my React app, I noticed it is throwing me out an error in the console when the aff.convert() method is called.

I'm adding below parts of the relevant Affiliate and AffiliatePluginAmazon code for a greater context of what I have running over here that produce this error.

// ...

import Affiliate from "affiliate";
import AffiliatePluginAmazon from "affiliate-plugin-amazon";

// ...

const amazonAff = AffiliatePluginAmazon(Affiliate, {
    tags: {
      us: "amzapplink-20", // for USA, required
      gb: "", // for UK
      de: "", // for Germany
      fr: "", // for France
      jp: "", // for Japan
      ca: "", // for Canada
      cn: "", // for China
      it: "", // for Italy
      es: "", // for Spain
      in: "", // for India
      br: "", // for Brazil
      mx: "", // for Mexico
    },
    debug: false, // verbose logging into the console, default off
    locale: null, // manually set the country code of the browser, default automatic
    modifyDomain: true, // modify domains like amazon.com to amazon.co.uk based on locale, default on
  });
  
// ...

// Testing convert function.
console.log(amazonAff.convert("https://www.amazon.com"));

[new feature] change shorten amazon links posted by users by my own links

Hi, thanks for your script.
Is-it possible to make a plugin or function to convert shorten amazon links (ex: https://amzn.to/3EYDIZO) to real amazon.fr link with my tag? Because i have a forum and people post amzn.to links to bypass affiliate-js
Thanks!

affiliate.js - which affiliate programs do you support?

Can I add affiliate tags to anything other than Amazon? Can I add tags to eBay, Walmart, Alibaba?
Also, do you support tracking IDs for Amazon?

Attach function fail on AffiliatePluginAmazon

Coping and pasting the instructions of https://affiliate.js.org/plugins/amazon, when it executes the attach method it begins to throw exceptions about Docile that block the render of the page.
The message that console shows is : [Docile] DOM not loaded. Learn More: https://goo.gl/EsYspK

Can I create dynamic product link using this library?

Is it possible to create an AWS affiliate link with a specified product name (like cheese) programmatically/dynamically?

What are my options? Can I do this using this library?

Update nom package to V5 and changelog

Hi,

Could you update the npm package to V5? And add the changelog, please,

Thank!! 🔥

How to use programmatically?

Let's say I have a simple form with an input field where I would insert an Amazon product URL https://www.amazon.com/dp/B01MRZFBBH

On form submit, I would like this Amazon product URL to turn into https://www.amazon.com/dp/B01MRZFBBH?tag=us-tag and display below the form to the end user to copy.

How can I accomplish that with this library?

Decouple affiliate utilities from DOM functionality

Hi,

I'm very interested in the library but I think it would be better to separate the affiliate utilities from the DOM related functionality. This way could be used for more projects, for example, creating the affiliates in a backend with Node where the DOM functionality is not needed. Also, both packages could be maintained independently.

I've been doing tests and got it to work without the DOM functionality using the 'convert' function but still this code is loaded in the application.

const aff = window.Affiliate.create({
  tags: [
    {
      hosts: ['amazon.es', 'www.amazon.es'],
      query: {
        tag: 'my-super-affiliate', // This means ?ref=my-tag
      },
    },
  ],
});

console.log(aff.convert('https://www.amazon.es/LEGO-10212-Star-Lanzadera-imperial/dp/B0041I0N9A/?_encoding=UTF8&pd_rd_w=Mqdi6&content-id=amzn1.sym.dfbf490a-d858-4445-bf49-2916dec94084&pf_rd_p=dfbf490a-d858-4445-bf49-2916dec94084&pf_rd_r=XAQC9NM704AV77FZ278M&pd_rd_wg=rmQ9K&pd_rd_r=e03e1afd-e5f6-426d-90ef-602a0a48d39b&ref_=pd_gw_ci_mcx_mr_hp_atf_m&tag=test')); // convert a provided URL or string
console.log(aff.convert('https://www.amazon.es/dp/B0041I0N9A')); // convert a provided URL or string

// Output
"https://www.amazon.es/LEGO-10212-Star-Lanzadera-imperial/dp/B0041I0N9A/?_encoding=UTF8&amp;pd_rd_w=Mqdi6&amp;content-id=amzn1.sym.dfbf490a-d858-4445-bf49-2916dec94084&amp;pf_rd_p=dfbf490a-d858-4445-bf49-2916dec94084&amp;pf_rd_r=XAQC9NM704AV77FZ278M&amp;pd_rd_wg=rmQ9K&amp;pd_rd_r=e03e1afd-e5f6-426d-90ef-602a0a48d39b&amp;ref_=pd_gw_ci_mcx_mr_hp_atf_m&amp;tag=my-super-affiliate"
"https://www.amazon.es/dp/B0041I0N9A?tag=my-super-affiliate"

What do you think of my proposal?

Thank you very much for the work, and I am willing to collaborate in the project if you need my help or I see something to improve 🚀