search

ampproject / amphtml

The AMP web component framework.
https://amp.dev
Apache License 2.0
14.89k stars 3.89k forks source link

amp-amazon-onetag: Amazon affiliate links #23166

Open ghost opened 5 years ago

ghost commented 5 years ago

What's the issue?

Its a feature request. I'm part of Amazon's Affiliate Marketing team. Amazon affiliate marketing is a channel that helps the content creators monetize their content by paying a fraction of profit for purchases from traffic coming from their websites.

We've a script called OneTag, which associate can add to their pages. Some benefits of OneTag script are:

  1. It tags the amazon links on the page automatically which ensures that any click coming to amazon is attributed to the associate.
  2. It provides feature to redirect the user clicking the link to amazon retail store based on the geo location of the user.
  3. Provides data to associates to give them insight into their content performance.

We've observed a high adoption of Amazon associates on AMP pages and as a result we'd like to add the support for OneTag script on Amp pages.

Sample code:


export class AmpAmazonOnetag extends AMP.BaseElement {
  /** @param {!AmpElement} element */
  constructor(element) {
    super(element);
    this.document = element.ownerDocument;
  }

  /** @override */
  buildCallback() {
    const onetagEndpoints = new Map();
    onetagEndpoints.set("US", "z-na.associates-amazon.com");
    onetagEndpoints.set("GB", "z-eu.associates-amazon.com");

    var marketplace = this.element.getAttribute('marketplace');
    var instanceID = this.element.getAttribute('instanceID');
    if (onetagEndpoints.has(marketplace))  {
      var scriptURL = "https://" + onetagEndpoints.get(marketplace) + "/widgets/onejs?MarketPlace=" + marketplace + "&adInstanceId=" + instanceID;
      loadScript(this, scriptURL);  
    }
  }

  /** @override */
  isLayoutSupported(layout) {
    return layout == Layout.NODISPLAY;
  }
}

AMP.extension('amp-amazon-onetag', '0.1', AMP => {
  AMP.registerElement('amp-amazon-onetag', AmpAmazonOnetag);
});

Example:

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>amp-amazon-onetag example</title>
  <link rel="canonical" href="amps.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

  <script async custom-element="amp-amazon-onetag" src="https://cdn.ampproject.org/v0/amp-amazon-onetag-latest.js"></script>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
  <amp-amazon-onetag layout="nodisplay" marketplace="US" instanceID="e02b228e-cb07-40a1-b563-07283ede951b"></amp-amazon-onetag>
  <a href="https://www.amazon.com/dp/059035342X?tag=avanthus-20" >Sample Amazon link</a>
</body>
</html>
dreamofabear commented 5 years ago

@ampproject/wg-ads Another affiliate marketing component FR.

lannka commented 5 years ago

@ankikala thanks for creating this.

high level, AMP does not allow loading custom javascript in the main window. are you able to integrate using the amp-link-rewriter extension: https://github.com/ampproject/amphtml/blob/master/extensions/amp-link-rewriter/amp-link-rewriter.md

ghost commented 5 years ago

@lannka Sorry for the late reply. Integrating with "amp-link-rewriter" won't suffice the usecase. The script is also responsible for analytics on the page.

Same script has also been used in https://github.com/ampproject/amphtml/blob/master/ads/a9.md

ghost commented 5 years ago

@lannka @choumx I've raised the pull request. Could you guys take a look please?

dreamofabear commented 5 years ago

+1 to integrating with amp-link-rewriter. Analytics should interface with amp-analytics.

vigneshcamar commented 5 years ago

@lannka @choumx

Hi Guys, We have starting replicating our JS in the new extension, using the AMP components which you guys have mentioned for link-swapping and analytics events. Is there any process to be followed for this? Or just a simple CR will do for the contribution?

vigneshcamar commented 5 years ago

@lannka @choumx Hi Guys, Can you please help to update the above request I had asked? Regards, Vignesh

dreamofabear commented 5 years ago

We have starting replicating our JS in the new extension, using the AMP components which you guys have mentioned for link-swapping and analytics events. Is there any process to be followed for this?

Do you have a design document that explains this? If not, you can start by explaining your rough approach here for more immediate feedback.

Re: process, see here: https://github.com/ampproject/amphtml/blob/master/contributing/contributing-code.md#process-for-significant-changes

vigneshcamar commented 4 years ago

@choumx @lannka Hi Guys,

We are preparing a design document for the Javascript component. Can you let us know when you guys will be free for a design review for the same?

Regards, Vignesh

dreamofabear commented 4 years ago

See schedule here: https://github.com/ampproject/amphtml/blob/master/contributing/design-reviews.md

lannka commented 4 years ago

Here is the design doc link: https://docs.google.com/document/d/15XPbRPCnkqFCr9Bjrdu3cP8aMMJfMtOy0f1bkxR26J4/edit

lannka commented 4 years ago

@vigneshcamar & I met again to dive deeper into the design. Notes pasted here. @vigneshcamar feel free to correct me or add things.

vigneshcamar commented 4 years ago

@lannka Please find my inline comments

@vigneshcamar & I met again to dive deeper into the design. Notes pasted here. @vigneshcamar feel free to correct me or add things.

  • Amazon OneTag is the solution for Amazon customers to use one unified tag for various Amazon products, including affiliate links and data collection. Customers can opt-in/out those various products in a product console.
  • In AMP, for better extension sharing and maintainability, we should consider breaking this down to feature based solution. For example, implement the affiliate links feature using amp-link-rewriter, and data collection feature using amp-analytics.
  • There're some special requirements in data collection that currently are not supported by amp-analytics, for example to scan through the page and find all Amazon links. Each link needs to be associated with a "slotNum". [Vignesh] Hi Hongfei, In addition to slotNum, We also require "impressionToken"(please refer the design doc) to be collected which is fetched from backend, before the link rewriting of each amazon links. It looks like there is a tight dependency between the link rewriting and data collection, and after all we may not be able to break this into two components. Please correct me if I am wrong here.
  • How we can build a feature that collects those page content (Amazon links) in a privacy-safe way needs to be further discussed.
  • Putting privacy concern aside, the requirement of "customizable tracking" is aligned with some recent discussion around "custom template" in amp-analytics (loading custom JS in a WebWorker with some limited DOM API exposed). /cc @zhouyx @jeffjose [Vignesh] Is there any update on this?
  • I suggest we focus on the affiliate links feature using amp-link-rewriter now and then work together for a customizable data collection using amp-analytics [Vignesh] As said above, it may not be possible after all to break these into two, as the rewritter data is essential for data analytics calls also. Please let me know if I am wrong here.
lannka commented 4 years ago

@vigneshcamar we could have all links sent to your server (in a privacy friendly way) while fetching the link-rewriter config. you server will rewriter each link at server side and return a full mapping back. This can be ultimate flexible way to do it. would that work?

lannka commented 4 years ago

Something like this

lazharichir commented 4 years ago

@lannka hello! I am an Amazon Associates myself and you announced the discontinuation of AALB's WP plugin... so I am planning on transitioning to the Native Shopping Ads Cards (from SiteStripe)...

But... Adding the two <script> tags in WordPress (in a Custom HTML block) doesn't then show the product card on the AMP page.

Any temporary fix for that?

lannka commented 4 years ago

@lazharichir sorry you might find wrong person. I don't even know what AALB is. If you find an issue with AMP, please create a separate issue. This thread is about amp-amazon-onetag

vigneshcamar commented 4 years ago

@lannka Hi Hongfei, We have started working on the changes, we had agreed upon during our design phase. I was wondering if you would help us during the CR Phase. please do let me know your comments.

vigneshcamar commented 4 years ago

@lannka Hi Hongfei, Can you let me know your comments?

lannka commented 4 years ago

hi @vigneshcamar sorry being late. I'm glad you're back on this. Sure, I will still be your point of contact. What is CR phase though?

vigneshcamar commented 4 years ago

@lannka Hi Hongfei, What I meant was, will you be helping us in doing the code review for this? Regards, Vignesh

lannka commented 4 years ago

yep, you can assign code review to me and I can help to reroute if needed.

vigneshcamar commented 3 years ago

@lannka Hi Hongfei, We have completed the coding work for this issue. However, during Integration testing, we found a issue. We found out that the third party cookies were not sent over the http request and It looks like this is the default AMP framework behavior. The cookie is essential for our data collection flow and is a must have in the http request. Can you help to let us know as to how we can tackle this issue? Please let us know your thoughts.

Regards, Vignesh

lannka commented 3 years ago

are you use the xhr util to send request? you can pass along 'credentials: include' as params. https://github.com/ampproject/amphtml/blob/06123ab062b2be8d04bdb3e232c7c02a8cffe09b/extensions/amp-access/0.1/amp-access-client.js#L133-L135

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.