Getting Started
This documentation refers to recent Echo releases. It is important to keep your implementation of Echo up to date, as it is frequently updated to provide for new business requirements. This is usually a very simple process and breaking changes are documented on release notes.
Table of contents
- Integration
- Destination and Producer
- Properties
- Property Cleansing
- Counter Names
- Application Events
- HTTPS
Integration
Below is a quickstart guide to getting Echo up and running, through the use of examples.
For documentation on individual services see the links in the ‘What is Echo’ section above.
Please see the following platform specific pages for guidance on adding the Echo resources to your project:
Create an Instance of the Echo Client
// Tell require where to find the echo module (where x.x.x is the latest version)
require.config({ paths: {'echo' : 'https://mybbc-analytics.files.bbci.co.uk/echo-client-js/echo-x.x.x.min.js'} });
require(['echo'], function(Echo){
var Media = Echo.Media, // Media class
EchoClient = Echo.EchoClient, // Echo Client class
Enums = Echo.Enums, // Enums
ConfigKeys = Echo.ConfigKeys, // Key names to use in config
Environment = Echo.Environment; // Class to allow overriding default behaviour
var conf = {};
conf[ConfigKeys.DESTINATION] = Enums.Destinations.FOOD;
var echo = new EchoClient(
"MyApp", // App Name
ApplicationType.WEB, // App type
conf, // Optional config dictionary
env, // Optional Environment class
callback // Optional callback function
);
// You can optionally set the version of your application:
echo.setAppVersion('1.1.1');
});
import uk.co.bbc.echo.EchoClient;
import uk.co.bbc.echo.EchoConfigKeys;
import uk.co.bbc.echo.Media;
import uk.co.bbc.echo.enumerations.MediaAvType;
import uk.co.bbc.echo.enumerations.MediaForm;
import uk.co.bbc.echo.enumerations.ApplicationType;
import uk.co.bbc.echo.enumerations.MediaRetrievalType;
import uk.co.bbc.echo.enumerations.MediaConsumptionMode;
import uk.co.bbc.echo.enumerations.MediaScheduleMode;
import uk.co.bbc.echo.enumerations.PIPsType;
import android.app.Application;
public class TestShellApplication extends Application {
public void initialiseEcho(HashMap<String, String> config) {
config.put(EchoConfigKeys.DESTINATION, Destination.FOOD.toString());
EchoClient echo = new EchoClient(
"MyApp", // App Name
ApplicationType.MOBILE_APP, // App Type
"echo.android.test", // App start countername (no longer used for ATI)
getApplicationContext(), // The Android Context of your Application
config, // config options HashMap
bbcUser, // BBCUser instance
this // Application instance of your Application
);
}
}
import Echo
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Echo Config
var config:Dictionary<EchoConfigKey, String> = [
.destination: Destination.Food.toString()
]
// BBCUser
user = BBCUser(signedIn: true,
hashedID: hashedId,
tokenRefreshTimestamp: Date(timeIntervalSince1970: 1510156737)
)
// Initialize Echo
do {
echo = try EchoClient(appName: "EchoDemoApp", // App name
appType: .mobileApp, // App type
startCounterName: "bbc.start.page", // App start countername (no longer used for ATI)
config: config, // Optional config dictionary
bbcUser: user) // Optional BBCUser instance
} catch {
// Handle Echo config errors
}
return true
}
Application Type
The type of application that will be reported (ApplicationType config option supplied in the creation of the Echo Client).
If you are unclear which of these values to use for your application contact the CCOG Measurement Technology team.
Application Type | Echo JS / Echo Android | Echo iOS (Swift) |
---|---|---|
Web App | ApplicationType.WEB | ApplicationType.web |
Mobile Web App | ApplicationType.MOBILE_WEB | ApplicationType.mobileWeb |
Mobile App | ApplicationType.MOBILE_APP | ApplicationType.mobileApp |
Big-Screen HTML App | ApplicationType.BIGSCREEN_HTML | ApplicationType.bigScreenHTML |
Big-Screen App | ApplicationType.BIGSCREEN_APP | ApplicationType.bigScreenApp |
Big-Screen Flash App | ApplicationType.BIGSCREEN_FLASH | ApplicationType.bigScreenFlash |
Big-Screen ChromeCast App | ApplicationType.BIGSCREEN_CAST | ApplicationType.bigScreenCast |
Responsive App | ApplicationType.RESPONSIVE | ApplicationType.responsive |
AMP | ApplicationType.AMP | ApplicationType.amp |
Carplay (iOS only) | ApplicationType.carplay | |
Android Auto (Android only) | ApplicationType.ANDROID_AUTO | |
Android Automotive (Android only) | ApplicationType.ANDROID_AUTOMOTIVE_APP |
Changing the application type
Application Type can be changed during a single session after the creation of Echo Client.
// Expects a value of type ApplicationType
echo.setAppType(ApplicationType.MOBILE_APP);
// Expects a value of type ApplicationType
echo.setAppType(appType: .mobileApp)
Destination and Producer
The concepts of Destinations and Producers relate essentially to the product and the creator, respectively, of the content.
For more information on how to set these, and what to set them to, see the Destination section and the Producer section of the Reporting to ATI page.
Properties
Previously referred to as labels, you can set custom properties defined by your application. They are essentially key-value pairs that allow certain information to be recorded.
Properties set using Echo’s addProperties
method (note that addLabels
still works as an alias so there is no need to change your code) are persistent and therefore will apply to all subsequent events until they are removed using removeProperties
(or removeLabels
). Properties can also be set on specific events by passing them as a parameter to that method call; they will not then appear on subsequent events. See below for more on this.
Some properties are supported by ATI as “custom variables” and are reported as x1-x20. See the Site Variables section of the Reporting to ATI page for more information, and there are also confluence pages with more information on global custom variables and product-specific custom variables that may be of interest.
Other properties are supported but are retrieved in a different way that is outside of the scope of this document!
Property Cleansing
Echo applies some validation and cleansing to the two ‘key’ and ‘value’ components (eg key=value) of a property.
Property Keys
Valid characters are: 0-9a-z_
Echo performs the following:
- remove leading and trailing white space
- convert to lowercase
- replace any invalid characters with an underscore
- replace consecutive underscores with a single underscore
- remove any leading or trailing underscore
For example, given a property key of ! your property/key
, Echo would convert this to your_property_key
Default cleansing
Default cleansing (may also be known as custom cleansing) is applied to any custom property that is set and to any property that falls outside one of the predefined categories (Strict, Countername and Event Master Brand).
All characters are allowed except pipes
Echo Performs the following
- remove leading and trailing white space
- convert any pipes to exclamation marks
Strict Cleansing
Strict cleansing is applied to the following properties only
- player_name
- bbc_site
- app_type
- app_name
Valid characters are: 0-9a-z-
Echo performs the following:
- convert to lowercase
- remove leading and trailing white space
- replace any invalid characters with a hyphen
- remove any leading or trailing hyphens
For example, given a property value of your-l@bel!-value
, Echo would convert this to your-l-bel-value
Note: Event master brand is strictly cleansed, with the exception that underscores are used instead of hyphens
Clean Counter Name
Counter names (unique page or view names) are a special case and they are cleansed in the following way
Valid characters are: 0-9a-z.
Echo performs the following:
- convert to lowercase
- remove leading and trailing white space
- remove leading and trailing underscores
- replaces non a-z0-9 and non-dots, with underscore
- replaces sequences of multiple dots with a single one
Add/Remove persistent properties
The following code examples demonstrate how to add and remove persistent properties.
echo.addProperty("property_1", "mypropertyvalue");
echo.addProperties({"property_2": "mypropertyvalue2", "property_3": "mypropertyvalue3"});
echo.removeProperties(["property_1", "property_3"]);
echo.addProperty("property_1", "mypropertyvalue");
HashMap<String, String> propertiesToAdd = new HashMap<String, String>();
propertiesToAdd.put("property_2", "mypropertyvalue2");
propertiesToAdd.put("property_3", "mypropertyvalue3");
echo.addProperties(propertiesToAdd);
HashSet<String> propertiesToRemove = new HashSet<String>();
propertiesToRemove.add("property_1");
propertiesToRemove.add("property_3");
echo.removeProperties(propertiesToRemove);
// Expects a dictionary
echo.addProperties({"property_1": "mypropertyvalue1", "property_2": "mypropertyvalue2"})
// Expects an array
echo.removeProperties(["property_1", "property_2"])
Counter Names
Every “page” in a BBC application must have a counter name and no event can be sent until one has been set. There are 2 ways to set a counter name in Echo:
viewEvent()
- when you send a view event, you must specify a counter name as a view event implies that a new piece of content is being shown, hence a change in the counter namesetCounterName()
- This method should be called when a pageview has already been sent (by another instance of Echo on the same page for example), this then allows you to set the counter name without sending a view event
Those teams integrating Echo into an iOS application should consider the following:
iOS’s app prewarming feature can cause your app to be launched in the background, this can cause a view event to be fired even though nothing has been viewed, and can result in a dramatic number of “phantom” view events.
Consider using setCounterName()
to set the context for any user action events that you intend to fire rather than viewEvent()
in this case.
viewEvent()
should only be used when a user has actually viewed a page or screen.
Counter Name Value
Valid characters are: 0-9a-z.
Echo performs the following:
- remove leading and trailing white space
- convert to lowercase
- replace any invalid characters with an underscore
- replace consecutive underscores with a single underscore
- append “.page” if not present at the end of the value
For example, given a counter name of “@ Some Page.Name/Item - “, Echo would convert this to “some_page.name_item.page”
Application Events
It is important to understand that accurately recorded view events are essential for correct reporting. Without them user analytics can not be properly calculated.
Page View
Every time a new piece of content is presented to the user your application should send a PageView
event. In most circumstances, this should be sent before anything else. You must specify a countername for the page with this event. This countername is then associated with all subsequent events (until the next page view).
// Send a page view event, with counter name and properties object
echo.viewEvent("candy.kingdom.page", {my_test_property:"my_test_value"});
// Send a page view event, with counter name and properties object
HashMap<String, String> viewProperties = new HashMap<String, String>();
viewProperties.put("my_test_property", "my_test_value");
echo.viewEvent("candy.kingdom.page", viewProperties);
// Send a page view event, with counter name and labels NSDictionary
echo.viewEvent(counterName: "test.page", eventLabels: {"my_test_property": "my_test_value"})
User Action Events
Please note that sometimes Echo will send user action events by itself, without being prompted to do so by you. These include the user state change events listed here, and may in future be expanded for informational or debugging purposes as necessary. If you are confused by any event you see then feel free to get in touch and we can explain it.
An action (such as ‘click’, ‘submit’, ‘share’) MUST specify an action type and an action name. So in the below example, action type would be 'click'
and action name would be 'SpecialButtonA'
.
Echo’s userActionEvent
method is still available, and will work without any changes, however, we recommend that you revise the properties you are setting, and follow the guidance here on what to set now, as there are restrictions on what will be shown in the reporting interface.
ATI’s “Publisher” ad-tracking feature is being used for this purpose. The property names to use are outlined below:
ATI publisher name | BBC name | Echo property | Default values | Notes |
---|---|---|---|---|
campaignId | Container | container | page (for JS), application (for mobile) | |
creation | Attribute | n/a | n/a | This is a concatenation of the existing actionName and actionType parameters for the method |
variant | User Experience | personalisation | n/a | |
format | Metadata | metadata | n/a | |
generalPlacement | Placement | n/a | Name of the current page/screen | This is automatically filled in by Echo |
detailedPlacement | Account | n/a | The current user’s HID (if signed in and available) | This is automatically filled in by Echo — an empty string indicates signed out |
advertiserId | Source | source | n/a | |
url | Result | result | n/a |
If you want to signify this event was prompted not by an explicit user action but by some background process or other application event, there is an additional property is_background
which should be set to true
. This determines whether they are considered to be “clicks” or “impressions” by ATI. This will default to false
so that if you don’t specify, they will be considered “clicks”.
Example calls, and the resulting values sent to ATI, would therefore look like this:
// Method signature
echo.userActionEvent(actionType, actionName, eventProperties);
// Send a user action event:
echo.userActionEvent("click", "SpecialButtonA", {"container":"page", "personalisation":"personalisation values", "metadata":"metadata values", "source":"content ID", "result":"http://www.example.com"});
// atc parameter sent:
// "atc": "PUB-[page]-[ButtonA~click]-[personalisation values]-[metadata values]-[countername.page]-[user HID]-[content ID]-[http://www.example.com]"
// Send a background event:
echo.userActionEvent("impression", "ArticleA", {"is_background":"true", "container":"page", "personalisation":"personalisation values", "metadata":"metadata values", "source":"content ID", "result":"http://www.example.com"});
// ati parameter sent:
// "ati": "PUB-[page]-[ArticleA~impression]-[personalisation values]-[metadata values]-[countername.page]-[user HID]-[content ID]-[http://www.example.com]"
Note that if you are interested in click-through-rate, in order for that to be calculated, both the impression and the corresponding click need to have the same Container/Attribute values.
HTTPS
More information about configuring Echo with HTTP/HTTPS can be found in the advanced config section.
Echo in a web context
If you are using Echo on the web (for example in SMP) you shouldn’t need to worry about HTTPS; Echo will use the protocol of the page in which it is used. So if you’re on an HTTP page it will report over HTTP, and if you’re on an HTTPS page it will make all requests over HTTPS. This includes not only events sent to ATI or BARB, but also requests to ESS and any other connections to other services.
Echo JS can be forced to use HTTP by configuring the Config Option within Echo (ATI_FORCE_HTTP).
Echo in a mobile context
All recent versions of Echo iOS and Echo Android will use HTTPS by default.
If you’re developing a Windows Phone app using Echo JS, and you need Echo to report over HTTPS, you have a problem. Echo JS looks for the protocol of the containing web page. If there isn’t one, it will default to HTTP. If this is an issue for you then please alert the Analytics Services team by sending an email to the Analytics Services Team D-list, or asking in the #help-echo slack channel.