Skip to content

Instantly share code, notes, and snippets.

@gecugamo
Last active September 30, 2021 20:01
Show Gist options
  • Save gecugamo/9ef89effee7fa076b58bb60ee24b4b8c to your computer and use it in GitHub Desktop.
Save gecugamo/9ef89effee7fa076b58bb60ee24b4b8c to your computer and use it in GitHub Desktop.
Click Lead Landing Page Dev Notes

Links

Current Implementation

  • User browsing on third-party site
  • Click link that plops them on welcome.kin.com/landing and contains query params provider, lead_id, click_id
  • If click_lead doesn't exist in db, 500 error
  • If we have address data and it's from the proper location, send to /quote/about-you
  • If we don't have enough info, send to /start

Future Implementation

  • Create new action on ClickLeadsController or repurpose #show to always redirect to /intro
    • Will contain token
  • On /intro load
    • Create new action on ClickLeadsController to return the data we need for the page - first_name, address
  • On /intro action taken
    • Hit something similar to how ClickLeadsController#show where we check for address and redirect either to /start or /quote/about-you

Proof of Concept

happy path (valid address)

Create ClickLead and related records

  1. Start dot-com locally
  2. Open Postman
  3. Send post request to http://localhost:3000/quote/leads/everquote with post body
    • Ensure raw is checked and JSON is selected
{
    "lead": {
        "products": "HomeInsurance",
        "eqLeadId": "happy_path",
        "contact": {
            "firstName": "Jane",
            "lastName": "Smith",
            "addressLine1": "20043 Satin Leaf Ave",
            "city": "Tampa",
            "state": "FL",
            "zipCode": "33647",
            "primaryPhone": "3213213213",
            "email": "happy_path@kin.com"
        },
        "homeInsurance": {
            "customerProfile": {
                "gender": "Male",
                "credit": {
                    "rating": "Good"
                },
                "dateOfBirth": "1980-03-01"
            },
            "dwelling": {
                "propertyType": "Single Family",
                "occupancy": "Primary Residence",
                "yearBuilt": 2012,
                "squareFootage": 1800,
                "roof": "Asphalt Shingle",
                "bedrooms": 3,
                "bathrooms": 2,
                "marketValueAmount": 700000
            },
            "currentCoverage": {
                "carrier": "AAA / Auto Club",
                "coverageYears": 1
            }
        }
    },
    "leadSource": {
        "name": "EverQuote",
        "version": "1.0"
    }
}

Proceed through funnel

  1. Start ng-kin
  2. Visit http://localhost:4200/landing?provider=everquote&click_id=happy_path
  3. Should end up on /quote/about you after clicking CTA on /intro page

sad path (invalid address)

Create ClickLead and related records

  1. Start dot-com locally
  2. Open Postman
  3. Send post request to http://localhost:3000/quote/leads/everquote with post body
    • Ensure raw is checked and JSON is selected
{
    "lead": {
        "products": "HomeInsurance",
        "eqLeadId": "sad_path",
        "contact": {
            "firstName": "John",
            "lastName": "Smith",
            "primaryPhone": "3213213213",
            "email": "sad_path@kin.com"
        },
        "homeInsurance": {
            "customerProfile": {
                "gender": "Male",
                "credit": {
                    "rating": "Good"
                },
                "dateOfBirth": "1980-03-01"
            },
            "dwelling": {
                "propertyType": "Single Family",
                "occupancy": "Primary Residence",
                "yearBuilt": 2012,
                "squareFootage": 1800,
                "roof": "Asphalt Shingle",
                "bedrooms": 3,
                "bathrooms": 2,
                "marketValueAmount": 700000
            },
            "currentCoverage": {
                "carrier": "AAA / Auto Club",
                "coverageYears": 1
            }
        }
    },
    "leadSource": {
        "name": "EverQuote",
        "version": "1.0"
    }
}

Proceed through funnel

  1. Start ng-kin
  2. Visit http://localhost:4200/landing?provider=everquote&click_id=sad_path
  3. Should end up on /start you after clicking CTA on /intro page

Slack Convo Archive

Gary Cuga-Moylan 2:29 PM Okay thought of something I could use input on. In certain places, we use Funnel::PermalinkServiceAngular.page_url to generate the string before calling render_redirect_link and then on the frontend we use window.location.href to force a synchronous http request. In other places we pass a simple relative path to render_redirect_link and use angular’s router to handle the navigation. I get the part about putting people on a page outside of the angular app (absolute) vs inside the angular app (relative), but what are the other use cases for using one or the other? Query params? If so, is there a point/page in the funnel that we need to carry the query params generated by page_url to?

Ken Hebel 2:35 PM The clickleads controller is going from Rails -> Angular for the first time, so we need to tell Angular who this person is.

Gary Cuga-Moylan 2:35 PM Yep the token

Ken Hebel 2:35 PM the simple relative path is when a customer is already on the angular application, and just needs to go to another angular application page.

does that make sense?

Gary Cuga-Moylan 2:36 PM Yes

So for the new click lead page (call it /intro) that will come between /landing and either /start or /quote/about-you that we’re scoping out - I’m thinking: Land on /landing like we already do, make call to api which returns full url with token and leads to /intro Once on /intro fetch some data (address and first name) asynchronously about the click lead now that we have a token When user clicks cta on /intro, send another asynchronous request that will return either /start or /quote/about-you and use angular’s router to navigate to one of those pages. Does that jibe?

The last step we could potentially already know on the frontend (whether or not the address is valid) from the data we fetch about the lead, and we may not need the third request, but we’re still thinking through it. (edited)

Ken Hebel 2:45 PM I think that makes sense to me, what is going to be on the /intro page?

Gary Cuga-Moylan 2:46 PM It’s some basic info to acclimate the user to our brand. Greeting with first name, address if we have it, testimonial, trustpilot widget.

Basically the thought is going to /qoute/about-you too early and being asked for PII is scaring people away (edited)

Ken Hebel 2:48 PM I see. Do you have any concerns around this @Sean?

What is the expectation of the about-you page behavior? Do you expect the first_name will be hidden?, prfilled?

Gary Cuga-Moylan 2:51 PM It will be prefilled - they backed off on hiding it for now as far as I know.

Ken Hebel 2:54 PM I see. I believe the field will be hidden if you record the data to person.first_name, or customer_input_response.first_name. If you want it to be prefilled you'll have to record it to customer_input_response.prefill. You might already know this, but it's something you might want to look at if you haven't already.

Gary Cuga-Moylan 2:55 PM The prefill seems to be working because we are using the existing logic that was in ClickLeadsController#show to return the redirect to intro. But the ability to hide the field by updating person.first_name I did not know and that may prove to be useful!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment