Skip to content

Marketing Analytics Browser

npm version

The Marketing Analytics Browser SDK extends the Browser SDK to identify users and events based on marketing channels. This library is open-source, check it out on GitHub.

Marketing Analytics Browser SDK Resources

GitHub · Releases · API Reference

Marketing Analytics Browser SDK versus the Browser SDK

The Marketing Analytics Browser SDK extends the Browser SDK with automatic web attribution and page view tracking. This doc only includes the configuration related with web attribution and page view tracking. For other functionality check the Browser SDK.

Getting started

Installation

To get started with using Marketing Analytics Browser SDK, install the package in your project via NPM or script loader.

Install as Node package

This package is available on NPM registry and you can install it using npm or yarn.

npm install @amplitude/marketing-analytics-browser
yarn add @amplitude/marketing-analytics-browser

Use script loader

This package is also distributed through a CDN. Copy and paste this script in your HTML file.

<script type="text/javascript">
!function(){"use strict";!function(e,t){var n=e.amplitude||{_q:[],_iq:[]};if(n.invoked)e.console&&console.error&&console.error("Amplitude snippet has been loaded.");else{n.invoked=!0;var r=t.createElement("script");r.type="text/javascript",r.integrity="sha384-QhZkEQJe2NFJ4yDkn/RFnD+NP0FINrep4tUh958v8McXRqszeRUQWbwBCfFqZvnF",r.crossOrigin="anonymous",r.async=!0,r.src="https://cdn.amplitude.com/libs/marketing-analytics-browser-0.2.0-min.js.gz",r.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var s=t.getElementsByTagName("script")[0];function v(e,t){e.prototype[t]=function(){return this._q.push({name:t,args:Array.prototype.slice.call(arguments,0)}),this}}s.parentNode.insertBefore(r,s);for(var o=function(){return this._q=[],this},i=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],a=0;a<i.length;a++)v(o,i[a]);n.Identify=o;for(var u=function(){return this._q=[],this},c=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setEventProperties"],p=0;p<c.length;p++)v(u,c[p]);n.Revenue=u;var l=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset"],d=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];function f(e){function t(t,n){e[t]=function(){var r={promise:new Promise((n=>{e._q.push({name:t,args:Array.prototype.slice.call(arguments,0),resolve:n})}))};if(n)return r}}for(var n=0;n<l.length;n++)t(l[n],!1);for(var r=0;r<d.length;r++)t(d[r],!0)}f(n),n.createInstance=function(){var e=n._iq.push({_q:[]})-1;return f(n._iq[e]),n._iq[e]},e.amplitude=n}}(window,document)}();

amplitude.init("YOUR_API_KEY_HERE");
</script>

Usage

The Marketing Analytics Browser SDK has the same functionalities as the Browser SDK. For the basic usage, check out the Browser SDK docs.

Configuration

In addition to the basic configuration options, the Marketing Analytics Browser SDK has options to configure web attribution and page view tracking.

Name
Description
attribution.disabled Optional. boolean. Disable the attribution tracking, attribution is enabled by default
attribution.excludeReferrers Optional. string[]. Exclude the attribution tracking for the provided referrers string
attribution.initialEmptyValue Optional. string. Reset the sessionId on a new campaign, Default value is EMPTY
attribution.resetSessionOnNewCampaign Optional. boolean. Reset the sessionId on a new campaign, won't create a new session for new campaign by default.
pageViewTracking.trackOn Optional. attribution or () => boolean. attribution - Fire a page view event attribution information changes. undefined - Fire a page view event on page load or on history changes for single page application, default behavior. () => boolean - Fire a page view events based on a trackOn functions
attribution.pageViewTracking.trackHistoryChanges Optional. pathOnly or all. Track the page view only on the path changes, track all URL changes by default

Web attribution

With web attribution tracking, Amplitude supports automatically tracking the following attribution parameters:

  • The 5 standard UTM parameters from the user's browser cookie or URL parameters
  • The referring URL and domain
  • 9 Click Identifiers

UTM parameters

UTM (Urchin Traffic Monitor) parameters are useful for analyzing the effectiveness of different ad campaigns and referring sites. UTM parameters are case-sensitive, so they're treated as different values when the capitalization varies.

There are five different standard UTM parameters:

Name
Description
utm_source This identifies which website sent the traffic (for example, Google, Facebook)
utm_medium This identifies a specific campaign used (for example, "summer_sale")
utm_campaign This identifies a specific campaign used (for example, "summer_sale")
utm_term This identifies paid search terms used (for example, product+analytics)
utm_content This identifies what brought the user to the site and is commonly used for A/B testing (for example, "bannerlink", "textlink")

Here is an example URL with UTM parameters:

https://www.amplitude.com/?utm_source=newsletter&utm_campaign=product_analytics_playbook&utm_medium=email&utm_term=product%20analytics&utm_content=bannerlink

Referrer parameters

Referrer is the URL of the page that linked to the destination page. Amplitude tracks the following parameters:

Name
Description
referrer The last page the user was on (for example, https://amplitude.com/behavioral-analytics-platform?ref=nav)
referring_domain The domain that the user was last on (for example, https://amplitude.com)

Referrer is an empty string ('') if the user navigated to the destination page directly.

Click ID parameters

Click IDs are campaign identifiers included as URL parameters. Ad platforms use these IDs to identify the campaign and other attributes. While Amplitude doesn't have access to further campaign attributes associated to Click IDs, Amplitude can track Click ID values specified in the following table.

Name
Description
GCLID Google Click Identifier from URL parameters
FBCLID Facebook Click Identifier from URL parameters
DCLID Google campaign manager Click Identifier
GBRAID Google Click Identifier for iOS device from Web to App
WBRAID Google Click Identifier for iOS device from App to Web
KO_CLICK_ID Kochava Click Identifier from URL parameters
MSCLKID Microsoft Click Identifier
TTCLID TikTok Click Identifier
TWCLID Twitter Click Identifier from URL parameter

First-touch attribution

Amplitude captures the initial attribution data at the start of the first session. The first-touch attribution values are set when a user's attribution data are seen for the first time. The following user properties are set one time:

  • initial_utm_source
  • initial_utm_medium
  • initial_utm_campaign
  • initial_utm_term
  • initial_utm_content
  • initial_referrer
  • initial_referring_domain
  • initial_gclid
  • initial_fbclid
  • initial_dclid
  • initial_gbraid
  • initial_ko_click_id
  • initial_msclkid
  • initial_ttclid
  • initial_twclid
  • initial_wbraid

Multi-touch attribution

Amplitude captures the attribution data at the start of each session, and sets those values as user properties. For organic or direct traffic, these properties may not be available. Therefore, these user properties are unset from user identity.

For every new campaign (when new attribution data is seen), Amplitude captures the changes regardless of the state of the user session. You can configure resetSessionOnNewCampaign to true to reset the session on every new campaign. The default behavior is to not reset the session on new campaign.

Amplitude tracks the following as user properties:

  • utm_source
  • utm_medium
  • utm_campaign
  • utm_term
  • utm_content
  • referrer
  • referring_domain
  • gclid
  • fbclid
  • dclid
  • gbraid
  • ko_click_id
  • msclkid
  • ttclid
  • twclid
  • wbraid

For users who initially visits a page directly or organically, by default, the initial value is set to "EMPTY". If you prefer a different initial value, set attriubtion.initialEmptyValue to any string value.

init(API_KEY, OPTIONAL_USER_ID, {
  attribution: {
    initialEmptyValue: "none",
  }
});

Exclude the referrers from specific domain

You can configure Amplitude to opt out of collection of attribution data for a given list of referrers.

init(API_KEY, OPTIONAL_USER_ID, {
  attribution: {
    excludeReferrers: ['www.test.com'],
  }
});

Reset the session on a new campaign

You can configure Amplitude to reset the session on a new campaign. Do this by setting attribution.resetSessionOnNewCampaign to true. By default attribution.resetSessionOnNewCampaign is set to false.

init(API_KEY, OPTIONAL_USER_ID, {
  attribution: {
    resetSessionOnNewCampaign: true,
  }
});

Disable attribution tracking

You can configure Amplitude to opt out of automatic collection of attribution data. Do this by setting attribution.disabled to true. By default attribution.disabled is set to false.

init(API_KEY, OPTIONAL_USER_ID, {
  attribution: {
    disabled: true,
  }
});

Page view

Enable page view tracking by setting pageViewTracking to true. The page view event is fired when the page loads.

init(API_KEY, 'user@amplitude.com', {
  pageViewTracking: true
});

You can set pageViewTracking to an object to pass more options.

Track the page view event when the attribution changed

Set the trackOn option to 'attribution' to send Page View events only when attribution information changes.

init(API_KEY, 'user@amplitude.com', {
  pageViewTracking: {
    trackOn: 'attribution',
  }
});

Track the page view event based on specific criteria

trackOn can also be set to a function callback to fully customize when a Page View event is sent.

init(API_KEY, 'user@amplitude.com', {
  pageViewTracking: {
    trackOn: () => {
      return window.location.pathname === '/landing_page'
    },
  }
});

Single page app page view tracking

If you have a single page app that uses a history based router such as react-router, you can enable trackHistoryChanges to send Page View events when users navigate between pages. Possible values for trackHistoryChanges:

Name
Description
all All pushes and pops from history send a page view.
pathOnly Page Views are sent if the URL pathname changes. This prevents changes to the querystring or hash from sending events.

You can set the trackHistoryChanges to pathOnly to only track the on path changes. By default, full page URL is considered into the page view changes.

init(API_KEY, 'user@amplitude.com', {
  pageViewTracking: {
    trackHistoryChanges: 'pathOnly' // or 'all'
  }
});

Use the Marketing Analytics SDK with Ampli

You can use Ampli with this SDK by passing an instance of the Marketing Analytics SDK to ampli.load(). See the Ampli documentation for the Browser SDK for more details on configuration.

  1. Add the Marketing Analytics Browser SDK to your project.
  2. Create an instance of the SDK.
  3. Pass the instance into ampli.load()

This example passes the "amplitude" instance to ampli.load.

amplitude.init(REACT_APP_AMPLITUDE_API_KEY, undefined, { ...DefaultConfiguration, logLevel: 3 });
ampli.load({ 
  client: { 
    instance: amplitude 
  } 
});