[Epic] VPN Affiliate

[slightlyoffbeat]

Description

We will soon have the ability to have affiliate links for VPN. This requires changes/additions to Mozilla.org.

When a user arrives to the VPN landing page from an affiliate link, we will show this user a message. This message allows users to either opt in or out of our ability to affiliate attribution.

Tasks include:

• [x] Determine behavior of banner (blocking, non-blocking, opt-in, opt out, toaster, modal, etc)
• [x] Copy for banner
• [x] Design for banner
• [x] Implement attribution API flow.
• [x] Implement cookie banner & opt-out mechanism.
• [x] Add entire flow behind a feature switch.
• [x] Unit / behavioral tests.
• [x] Update fxa-product-button.js to support overwriting flow params.
• [x] Add GA events for banner views / clicks.
• [x] Add production API endpoint.
• [x] Banner strings added to Pontoon for L10n.
• [x] Defined list of countries and/or languages to limit attribution to.
• [x] Documentation

[slightlyoffbeat]

I wrote to legal to ask for guidance on copy for the banner. I will take what is provided, and send to studio team for user-facing copy.

[slightlyoffbeat]

Here are the options that I can think of for banner/modal behavior:

1. there is a banner somewhere that requires users to opt in. This is not recommended because there is a high likely-hood that most people will ignore the banner and we will get a minimal amount of opt-ins.
2. There is a banner somewhere that requires users to opt out. We would need to design this in a way that makes it obvious and clear for users who wish to chose this option
3. a blocking modal. This modal would display and would only be dismissed when a user chooses either "opt in" or "opt out"

[slightlyoffbeat]

@alexgibson @pmac for visibility. Any options I'm missing?

@alexgibson could you add technical tasks to the checklist?

[alexgibson]

Reference docs:

• Microservice API endpoint: https://github.com/mozilla-services/cjms#readme
• Architecture flow diagram: https://www.figma.com/file/6jnLCLzclBN0uyS4nJp57d/Affiliate-Marketing-(CJ)-Architecture-%2F-Flow?node-id=0%3A1

Dev server for the microservice should be available by the end of Monday 28 Feb.

[alexgibson]

@slightlyoffbeat I added some techincal tasks to the list here, thanks.

As soon as we have a dev server to post data to, I should be able to start working on the flow for this (even if we don't yet have the banner figured out).

[birdsarah]

Small update:

• I don't anticipate the dev server will be up until mid-end day Tuesday US time, so you're probably stuck till Wed @alexgibson.
• I'll update this issue with a more canonical version of the docs, once we get the PR merged. The latest version is here: https://github.com/mozilla-services/cjms/tree/affiliate_identifier_cookie_endpoint#aic---affiliate-identifier-cookie with some notes about potential error states - mostly 500s and a 404.

[slightlyoffbeat]

Thanks @alexgibson. An update from our weekly affiliate meeting:

We decided to move ahead with the option to have a banner that allows users to opt out. A user is opted in unless they click a button on the banner to opt out.

This approach is approved by legal and all stakeholders.

I created a brief to get design & copy from the studio. My expectation is that it will be a very simple banner at the top of the page with copy + button/s.

[alexgibson]

We decided to move ahead with the option to have a banner that allows users to opt out. A user is opted in unless they click a button on the banner to opt out.

@slightlyoffbeat @birdsarah question on the above:

If the banner at the top of the page is opt-out, then I'm assuming it's not going to block the page content from loading or initiating the CJ event tracking flow. If that assumption is correct, then when someone does click to "opt-out", are there any new / extra flow steps required to remove their data? From prior conversations it was my understanding that we would not initiate the flow until consent was given.

[birdsarah]

You should be unblocked: https://dev.cjms.nonprod.cloudops.mozgcp.net/aic

[birdsarah]

If that assumption is correct, then when someone does click to "opt-out", are there any new / extra flow steps required to remove their data?

To make the "opt-out" work, you will need to trigger a new call to the fxa metrics API to get a new flow_id. By doing that and NOT sending it to the cjms endpoint then cjms will have no knowledge of the new flow_id and so will be out of the cjms flow.

You could clean out the cookie or whatever you want to do on your end. But from a preventing join perspective the only necessary step is to get a new flow_id and put it on the subscribe buttons.

[alexgibson]

@birdsarah I'm hitting a CORS error when trying to POST to the CJMS endpoint locally.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dev.cjms.nonprod.cloudops.mozgcp.net/aic. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 405.

Can you please see if we can add the following allowed origins to the dev and prod servers? Thanks

Dev:

• http://localhost:8000/
• https://www-dev.allizom.org/
• https://www-demo1.allizom.org/
• https://www-demo2allizom.org/
• https://www-demo3.allizom.org/
• https://www-demo4.allizom.org/
• https://www-demo5.allizom.org/

Prod:

• https://www.allizom.org/
• https://www.mozilla.org/

[birdsarah]

I have pushed a fix for the CORS issue and been able to verify it locally against https://dev.cjms.nonprod.cloudops.mozgcp.net/aic.

In case you need a reference, the specifics are here.

[alexgibson]

@birdsarah here's my WIP branch up on demo. This is still in a state of flux, but I have the main API flow working for both POST and PUT and setting the affiliate marketing cookie.

https://www-demo1.allizom.org/en-US/products/vpn/?cjevent=09d8676b716a11ec831e01500a18050e

~Note: I haven't started on the cookie banner or opt-out mechanism yet, this is next on my list.~

[alexgibson]

@slightlyoffbeat until we have the opt-out banner finialised I've put together a placeholder banner using Protocol's notification component. It occurs to me that this might actually be usable, as opposed to needing to reinvent things. I guess it depends on how much copy we'll need to display. Thoughts?

[alexgibson]

Some open questions I'm not sure on the answer to:

• Do we need to handle this flow for multiple VPN pages, or only the main VPN landing page? (all pages is possible, but gets more complex since only the main page creates flow params right now).
• If we store a marketing cookie value for a visitor but they don't subscribe, and instead return later on directly (not via a CJ link), do we need to do anything? The flow diagram suggests no, but thought I should double check.
  • Answer from Sarah: yes, we should send the cookie value and new flow ID. This is currently not represented in the diagram.
• If someone opts-out of affiliate attribution via the banner, how long should we set the cookie for? 1 day, 1 week?
• Is there anything we need to add to our website privacy policy before this goes live?

[slightlyoffbeat]

Checked with legal: no privacy policy changes needed. We already have a section that covers this.

[slightlyoffbeat]

Unless we receive additional guidance, i'd say we set the cookie for 4 weeks.

[slightlyoffbeat]

Homepage only (english, french & german)

[slightlyoffbeat]

@alexgibson I like the idea of using an existing component and not inventing or reinventing anything. Normally this would be a quick question to UX but we don't have a UX resource currently. I put this option in front of the studio team and will have an answer by end of week.

[alexgibson]

Homepage only (english, french & german)

Thanks, I'll limit the flow to en, de, fr.

[alexgibson]

@birdsarah @slightlyoffbeat another open question:

If someone revisits the page later (without a CJ event param in the URL), but already has a marketing cookie set because they didn't opt-out originally, then do we want to show the banner to them again on their repeat visit?

[slightlyoffbeat]

I'll be interested in what @birdsarah says, but I'd say we show the banner.

@alexgibson also, we have a thumbs up to just use the notification component. Copy will come next week.

[birdsarah]

Good question. I don't know. Lets discuss at next affiliate meeting.

[alexgibson]

@slightlyoffbeat any update on status of the strings for the banner?

[alexgibson]

Final copy on cookie banner is now in place:

Demo: https://www-demo1.allizom.org/en-US/products/vpn/?cjevent=09d8676b716a11ec831e01500a18050e