Proxying the JavaScript Source

Updated

You can proxy the client-side JavaScript (Analytics.js) and all tracking event requests through your domain. You might want to do this to deal with ad blockers or to keep your analytics requests from being blocked by firewalls.

How it works

When you load Analytics.js on your site, the script makes requests to Customer.io to load the library and to send calls. You can proxy these requests through your own domain.

This page shows how to set up a custom domain that proxies to cdp.customer.io in Amazon CloudFront, but you can apply these principles to most modern content delivery networks (CDN). You’ll also need to add a CNAME record to your DNS settings and update your code to point to your new domain.

Prerequisites

To set up a custom domain, you need:

  • Access to your site DNS settings
  • A content delivery network (CDN) you can serve assets from
  • Access to your CDN’s settings
  • A security certificate for the proxy domain

If you have trouble setting up your proxy, you’ll need to contact your IT department for help. We don’t have access to your domain resources to help you configure a custom proxy.

Set up a custom proxy with Amazon CloudFront

As a part of this process, you’ll set up two CloudFront distributions: one for the JavaScript host and one for the Data Pipelines API. You’ll also need to add a CNAME record to your DNS settings for each.

Proxy the JavaScript host

  1. Log in to the AWS console and go to CloudFront.

  2. Click Create Distribution and configure the distribution settings.

    1. In the Origin section set:
      • Origin Domain Name: cdp.customer.io
      • Protocol: HTTPS only
    2. In the Default cache behavior section, set:
      • Viewer protocol policy: Redirect HTTP to HTTPS
      • Allowed HTTP Methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
    3. In the Settings section, set:
      • Alternate domain name (CNAME): analytics.<yourdomain>.com
      • Custom SSL certificate: Select an existing or new certificate and validate your authorization to use the Alternate domain name (CNAME) value. For more information, see Amazon’s documentation Requirements for using alternate domain names.

  3. Click Create Distribution. Take note of the Domain Name for use in the next step.

  4. Go to your domain registrar and add a new “CNAME” record.

  5. Set values for these fields:

    • Name: As a part of this process, you should use a name that makes it clear what you use the subdomain for, like analytics.mysite.com.
    • Value: The Domain Name value from CloudFront.

  6. Save your record. This might take some time to take effect, depending on your TTL (Time To Live) settings.

You should verify that you’ve set up the record correctly. You may want to make a curl request to your domain to verify that the proxy works.

Add the proxy to your code

After you set up a proxy, you’ll need to add your new proxy address to your code. These instructions depend on whether you use our Client-side JavaScript snippet or the Node.js library.

Client-side JavaScript snippet

If you use our client-side JavaScript source, you need to modify the analytics.js snippet inside your website’s <head>.

To proxy CDN settings and destination requests that typically go to https://cdp.customer.io, change the t.src parameter in the snippet:

// old param:
// t.src="https://cdp.customer.io/v1/analytics-js/snippet/" + key + "/analytics.min.js"

// new param:
t.src="https://<YOUR-PROXY-HOST>/v1/analytics-js/snippet/" + key + "/analytics.min.js"

To proxy Data Pipelines calls that typically go to cdp.customer.io/v1, you’ll set integrations['Customer.io Data Pipelines'].apiHost to your proxy address.

window.analytics.load("<MY_WRITE_KEY>", {
  integrations: {
    "Customer.io Data Pipelines": {
      apiHost: "YOUR-PROXY-HOST/v1",
    },
  },
});

npm instructions

If you use our Node.js library and want to proxy requests through your domain, you need to:

  1. Update the cdnURL setting.
  2. Proxy tracking calls that typically go to cdp.customer.io/v1 to your API host by configuring integrations['Customer.io Data Pipelines'].apiHost.
const analytics = AnalyticsBrowser.load(
    {
      writeKey,
      // GET https://YOUR-PROXY-HOST/v1/projects/<writekey>/settings --> proxies to
      // https://cdp.customer.io/v1/projects/<writekey>/settings

      // GET https://YOUR-PROXY-HOST/next-integrations/actions/...js  --> proxies to
      // https://cdp.customer.io/next-integrations/actions/...js
      cdnURL: 'https://YOUR-PROXY-HOST'
    },
    {
      integrations: {
        'Customer.io Data Pipelines': {
          // POST https://MY-CUSTOM-API-PROXY.com/v1/t --> proxies to
          // https://cdp.customer.io/v1/t
          apiHost: 'YOUR-PROXY-HOST/v1',
          protocol: 'https' // optional
        }
      }
    }
  )
Copied to clipboard!
  Contents
Is this page helpful?