Sendgrid + Netlify SSL Click Tracking configuration

[tonymamo]

Hi there,

I am trying to set up custom SSL click tracking using Sendgrid, so that any emails I send have “branded” links, i.e. a user will see emails.gocanada.com/XYZ, where gocanada.com is my netlify site and the emails subdomain is the CDN for click tracking. I wanted to go this route because I was getting a certificate error in Safari about Sendgrid’s certificates, and thought it would look a lot nicer having the custom branded links. Knowing that I get wildcard SSL certs for my domain, I thought this would be a great approach.

I’ve done everything I’ve need to do on the Sendgrid side, such as adding a CNAME that points to sendgrid.net, verifying the site, and then removing that CNAME so that I can now follow the custom SSL Docs and use my own proxy link.

Next, I’ve added the following to my netlify.toml site to handle the proxy:

[[redirects]]
  from = "https://emails.gocanada.com/*"
  to = "https://sendgrid.net/:splat"
  status = 200
  force = true
  headers = {X-Forwarded-Proto = "https"}

However, when I try to test out an example link from Sendgrid, I get a “Site Not Found” error.

What am I doing wrong in my [[redirects]], or is there something else I am missing? Thank you in advance!

[luke]

Hi, @tonymamo. I believe someone else asked this same question and I have provided a detailed answer here:

Klaviyo Dedicated Click Tracking with Netlify CDN

The Klaviyo documentation for configuring the SSL is found here: They recommend using a third-party proxy for this like Cloudflare or Fastly. Now, it is also possible to use Netlify as the proxy instead of Cloudflare or Fastly. This would be done by connecting the domain to a site at Netlify and then proxying to sendgrid.net. This is configured using proxy redirect rules (using Netlify as a proxy the same way you would use Cloudflare to proxy). Our docs on this are found here: The workflo…

If there are any questions, would you please follow-up in that thread above?

[tonymamo]

Hi @luke,

I have followed that suggestions in that thread but still not having any luck. I think perhaps the only difference is that I’m using a subdomain of a domain that I have setup through Netlify?

• My Netlify site is https://gocanada.com, but the subdomain for link branding I want is `emails.gocanada.com
• I set up a CNAME for my subdomain to point to sendgrid.net, but that was only for the verification step on Sendgrid’s side. Once verified, I removed the CNAME record.
• I have the SSL cert for the root domain and wildcard subdomains. It was active and everything looked good, but renewed it just in case.
• I have a proxy rule set up already, see the screenshot in the original post

Does my redirect not work because of the subdomain perhaps? Do I need to make a new simple 1 page site, connect it to Netlify at that subdomain, and have that redirect in my netlify.toml?

[hrishikesh]

The Site Not Found error means that we don’t know which site to serve for the request. This would happen when we don’t have any site in the database for the requested domain. I can see this is true for emails.gocanada.com. You’d have to add that domain to the site as well.

[tonymamo]

Hi @hrishikesh thanks for checking into it. Does that mean adding a domain alias on the Domain Management page?

[luke]

Hi, @tonymamo. Yes, it would be added to the site where you created the redirect rule for that subdomain.

[tonymamo]

I still don’t seem to have this working properly quite yet. I have a domain alias, and have a redirect set up in my netlify.toml file as the following:

[[redirects]]
  from = "https://emails.gocanada.com/*"
  to = "https://sendgrid.net/"
  status = 200
  force = true
  headers = { Host = "emails.gocanada.com"}

It didn’t seem to do anything, so I also added the following to a handleRequest function in the server file (for Remix) like so:

if (url.hostname === "emails.gocanada.com") {
    return new Response(null, {
      status: 200,
      headers: {
        Location: `https://sendgrid.net${url.pathname}`,
        Host: "emails.gocanada.com",
      },
    })
  }

When testing out the link with a link provided by Sendgrid (which should forward to google.com), it just seems to hang.

[hrishikesh]

@tonymamo

status: 200,

You should be sending a 301. Why would you send a 200 with a location header?

[tonymamo]

Thanks @hrishikesh,
I’ve changed it back to a 301. I had that before but was doing some debugging and forgot to undo that change. My redirect does in fact go to sendgrid now, but I’m getting a Wrong Link error page from them, and following up with them as to what it could be. They replied back saying to follow the Using a Proxy section from their docs, but still not sure where the issue is. I will continue to follow up with Sendgrid and report back in case anyone else has this issue in the future.

[hrishikesh]

If they want a proxy, I believe you should only be using the redirect that you mentioned before. I’m curious about why you implemented the Function.

[tonymamo]

Sendgrid is telling me i need a CNAME record pointing to my CDN. I already have a NETLIFYv6 Record pointing emails.gocanada.com to gocanada-website.netlify.app. If I add the CNAME, my main site just loads, but with the emails subdomain still present. That’s why I added the function in my server file. However, if i remove the CNAME record, the redirect seems to work, but I get the wrong link error page from sendgrid. Basically, I’m just a little confused how to approach all this and am close to giving up on custom branded links altogether.

[hrishikesh]

Is there some SendGrid documentation that lists out all the steps required for this? I tried finding one, but could not.

I’m out for a week, however if:

• this is non-urgent
• has an official documentation page from SendGrid
• can be setup for free

I can check this once I’m back. Just please drop the documentation link here so I can try that out. Or if the documentation is available only after signing up, let me know.

[tonymamo]

The original issue I was facing was a certificate error when clicking on a link in an email, and during Sendgrid’s redirect, it was saying the *.sendgrid.net certificate was not trusted. When I reached out to Sendgrid, they had me follow these steps to enable SSL Click Tracking. It had me create a CNAME record, verify on Sendgrid’s side, and then remove that record afterwards. Once I did that, they sent me the test link (see previous comments), which was not resolving initially. That’s when I started adding a [[redirects]] in my netlify.toml file. Then, I was receiving the Wrong Link issue. Their replies just keep going in circles, re-sending the same doc pages like this one, an example for CloudFront, and another for CloudFlare.

This is non-urgent, and I believe can be setup for free, so if you wanted to take a stab at it, it would be greatly appreciated

[hrishikesh]

So far I have been able to setup non-SSL click-tracking. Now I’m waiting for their Support to enable SSL click tracking for my account.

[hrishikesh]

I haven’t yet got any meaningful help from SendGrid, but I think I might have managed to solve this using some code. Here are the complete steps:

1. In SendGrid dashboard, go to Settings → Sender Authentication → Link Branding → Brand Your Links.
2. Choose Other Host in the dropdown → Next (no need to enter the name of the host, but you can if you want, makes no difference)
3. Enter the apex domain in the text field and click on Advanced Settings → Check use custom link subdomain → Enter the custom subdomain that you want
4. Add the DNS records as indicated by SendGrid in your DNS host → Verify
5. Once the verification is done, add the custom subdomain that you chose to a Netlify site (create a new one).
6. Remove SendGrid’s CNAME from that subdomain (only 1 CNAME, leave the rest in there) and add Netlify’s CNAME instead.
7. In the Netlify site, add a Function (create a file as netlify/functions/sg.ts). The code will be as follows:

import type { Config, Context } from '@netlify/functions'
import { type IncomingHttpHeaders, request } from 'node:http'
import { resolve4 } from 'node:dns'

export default async function(_: Request, context: Context) {

  const ips = await new Promise<string[]>((resolve, reject) => {
    resolve4('sendgrid.net', (err, addresses) => {
      if (err) {
        reject(err)
      }
      resolve(addresses)
    })
  })

  const headers = await new Promise<IncomingHttpHeaders>((resolve, reject) => {
    const req = request({
      headers: {
        host: 'custom-subdomain-here'
      },
      hostname: ips[0],
      method: 'GET',
      path: '/ls/click?upn=' + context.url.searchParams.get('upn'),
      port: 80
    }, (res) => {
      res.on('data', () => {})
      res.on('end', () => {
        resolve(res.headers)
      })
    })
    req.on('close', () => {})
    req.on('error', (err) => {
      reject(err)
    })
    req.end()
  })

  return new Response('', {
    headers: {
      location: `${headers.location}?q=`,
      'x-robots-tag': 'nofollow, noindex'
    },
    status: 302
  })
  
}

export const config: Config = {
  path: '/ls/click'
}

8. That’s it, once the DNS resolves to Netlify and the SSL is provisioned, Netlify will handle the request and invoke the above Function. This Function will make a request to SendGrid to get the redirect location and send that back to the client.

Is this the best way? I don’t know. I am still waiting for SendGrid to respond as to why they return a 400 saying that the URL is incorrect when I setup a proxy from Netlify. But this way seems to work. The count of clicks in the SendGrid UI also seem to go up.

[tonymamo]

That’s a great idea to use a function, I didn’t even thank of that. Thanks @hrishikesh I will give that a shot!

[tonymamo]

@hrishikesh

• Once the verification is done, add the custom subdomain that you chose to a Netlify site (create a new one).
• Remove SendGrid’s CNAME from that subdomain (only 1 CNAME, leave the rest in there) and add Netlify’s CNAME instead.

For these steps, can I get some clarification? To add the subdomain, is that the same as creating a domain alias on the /domain-management route in Netlify admin? Here’s what I had done previously:

That created the two NETLIFY records in my DNS Settings page, but it sounds like I need to remove the CNAME record for Sendgrid (which I already did) and then add a CNAME for the main Netlify site (i.e. the root domain).

When I do the above, the main domain still loads when I try to hit the test link, and throws an error (which is something I can handle in my main application code), but it makes me think it’s not hitting the function correctly, or that the subdomain isn’t set up quite right.

Appreciate all the help to date!

[hrishikesh]

You can add the domain as a domain alias (your current setup) or create a new site that will specifically just handle the click-tracking part. I prefer to keep things separate so I chose to create a new site, but either is fine.

If you decide to keep your config, the steps would be (which I think you’ve done):

• remove the domain from Netlify and ensure the DNS records are deleted
• verify the domain in SendGrid
• add the domain back to Netlify - the NETLIFY records would be added again, but you’d still have to delete the SendGrid record

The request is being sent to your application instead of the Function is possibly due to what I personally consider a bug. I noticed this similar behaviour on another site last week and asked the devs to check if that’s intended. I personally think it’s not, but I’m waiting for their confirmation. If you’d not like to create a new site, your workaround would be:

• remove the export const config from the Function’s code,
• add the following to a _redirects file in your public (or whichever directory you put your not-processed-by-Remix files) directory:

/ls/click /.netlify/functions/sg 200!

[tonymamo]

I added the following to my netlify.toml file but still get my main site loading with an error message.

[[redirects]]
  from = "/ls/click"
  to = "/.netlify/functions/sg"
  status = 200
  force = true

Note: I didnt use a _redirects file because this Remix + Netlify template I used to scaffold this project a year ago had a note about using the toml file, though I now see this is outdated and has been removed

[hrishikesh]

Nowhere in my steps I mentioned you need a redirect. You had to just copy-paste the code in a file in your repo.