Analytics

Tracking performance and user behavior helps you make data-driven decisions about what features to build and which markets to expand in to. Google Analytics is the most popular web analytics platform, with many alternatives emerging including the free, privacy-centric Cloudflare Analytics. Both provide insights into user interaction, but have their limitations because of Cloud Phone’s server-side rendering.

At a Glance

• Cloud Phone widgets can use tools like Google and Cloudflare Analytics
• Requests are proxied through Cloud Phone servers with the user’s IP address in the X-Forwarded-For header
• The User Agent fragment Cloud Phone uniquely identifies Cloud Phone requests
• Obtain user consent and adhere to privacy best practices

Headers

User Agent

Cloud Phone sends the User-Agent header with each request. Here are a few example User Agents.

Nokia 225 4G

Mozilla/5.0 (Cloud Phone; Nokia 225 4G) AppleWebKit/537.36 (KHTML like Gecko) Chrome/128.0.6613.170 Mobile Safari/537.36 Puffin/128.0.1.59191FP

Cloud Phone Simulator

Mozilla/5.0 (Cloud Phone 2.6; Generic; SIMULATOR) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.6613.170 Mobile Safari/537.36 Puffin/128.4.2.65242FP

CP01 Developer Device (US Model)

Mozilla/5.0 (Cloud Phone; CloudMosa CP01US) AppleWebKit/537.36 (KHTML like Gecko) Chrome/128.0.6613.170 Mobile Safari/537.36 Puffin/128.0.1.57990FP

Generic is the default when a model name is not set.

Mozilla/5.0 (Cloud Phone; Generic) AppleWebKit/537.36 (KHTML like Gecko) Chrome/128.0.6613.170 Mobile Safari/537.36 Puffin/128.1.0.60975FP

User Agent Components

• Cloud Phone identifies all Cloud Phone devices
• Nokia 225 4G is the device model name. Generic is used by the Cloud Phone Simulator, and by default when a model name is not set
• Chrome/128.0.6613.170 identifies the Chromium version used by Cloud Phone servers. In this example, Chrome v128
• Puffin identifies the remote-browser architecture shared with the Puffin browser

User Agent Client Hints

Cloud Phone sents user agent client hint headers including Sec-CH-UA. These are low entropy hints that provide only major platform versions. Below are sample values from a Cloud Phone HTTP request.

• Sec-CH-UA-Platform has the value Cloud Phone
• Sec-CH-UA-Mobile has the value ?1 (true), indicating that the user-agent prefers a mobile experience
• Sec-CH-UA has a value like Not/A)Brand";v="99", "Google Chrome";v="128", "Chromium";v="128", "Puffin";v="128, hinting the Chromium version 128 used to render Cloud Phone apps

Referer

The Referer header sent from Cloud Phone widgets matches the URL of your widget. The URL length is limited to 4096 bytes and the default Referrer-Policy is strict-origin-when-cross-origin.

X-Forwarded-For

Use the X-Forwarded-For (XFF) header to obtain the user’s IP address.

X-Forwarded-For: 1.2.3.4

Cloud Phone widgets are executed in CloudMosa data centers. Requests made from Cloud Phone widgets originate from the following data center IP addresses:

• 45.33.128.0/20
• 107.178.32.0/20
• 203.116.120.0/24
• 203.116.121.0/24
• 203.116.134.0/24
• 203.116.135.0/24

Tools

Beacon API

Cloud Phone supports the Beacon API. Use navigator.sendBeacon to make POST requests with a small amount of data to send analytics back to your server.

const beaconData = JSON.stringify(analyticsData);
const didQueue = navigator.sendBeacon('/api/v1/beacon', beaconData);

if (!didQueue) {
  // Save data locally to send later
  localStorage.setItem('beaconData', beaconData);
}

The second data parameter is optional and accepts an ArrayBuffer, a TypedArray, a DataView, a Blob, a FormData, a URLSearchParams object, or a string literal or object.

Returns false

navigator.sendBeacon returns false if the data was not successfully queued for transfer. Up to 64KB of data can be queued for transfer at once. If this happens, you can either save data locally to be queued later, or call fetch with the keepalive property.

Check out Thomas Wang’s article, “You May Not Know Beacon”, for more details on navigator.sendBeacon.

Google Analytics

Set up Google Analytics for a Cloud Phone app using gtag.js, Google Tag Manager, or a third-party library like Minimal Analytics to integrate with Cloud Phone.

Replace GOOGLE_TAG_ID with your Property ID, i.e. G-XXXXXXXXXX.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GOOGLE_TAG_ID');
</script>

Considerations

Traffic comes from CloudMosa data centers in Singapore and South Africa.

The platform will show as “web” and the browser as “Puffin.”

Screen resolutions will primarily include QVGA (240x320) and QQVGA (128x160).

Curious about what data Google Analytics collects? See Dariusz Wieckiewicz’s technical specifications from Minimal Analytics for information on each dimension and its corresponding value.

Consent Mode

In certain regions like the European Economic Area (EEA), you may be required to collect user consent. Enable consent mode and ensure that consent decisions are logged to your Consent Management Platform (CMP).

Default consent to denied.

gtag('consent', 'default', {
  'ad_storage': 'denied',
  'ad_user_data': 'denied',
  'ad_personalization': 'denied',
  'analytics_storage': 'denied'
});

Update to granted when consent is given.

gtag('consent', 'update', {
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
  'ad_storage': 'granted',
  'analytics_storage': 'granted'
});

Cloudflare Analytics

Enable Cloudflate Analytics using the JavaScript beacon, or by proxying your website behind Cloudflare’s Content Delivery Network (CDN). Integrate the beacon by adding this snippet to your app’s <head> and replace your-cloudflare-token with your Cloudflare token, i.e. bb8a1866bd0e4b30af60c1be9ee36d51.

<script
  src='https://static.cloudflareinsights.com/beacon.min.js'
  data-cf-beacon='{"token": "your-cloudflare-token"}'
  defer></script>

Cloudflare Analytics does not use cookies or client-side storage, making it easier to adhere to stricter privacy requirements. Once integrated, you have access to analytics like bandwidth usage, request counts, and caching effectiveness.

Other Platforms

There are many web analytics platforms available. Tools below are untested but expected to work on Cloud Phone.

• Fathom
• Plausible
• Umami
• Open Web Analytics
• Heap
• Amplitude
• Mixpanel

Privacy Best Practices

When integrating analytics tools into your app, be sure to comply with regulations like GDPR and CCPA. Consider privacy principles and best practices.

• Data Minimization: Collect only the data you truly need
• Purpose Limitation: Data collected should only be for legitimate purposes like security and performance measurement
• Retention: Only retain data for as long as it’s necessary
• Consent: Obtain explicit user consent before enabling tracking scripts, and allow users to revoke consent at any time
• Confidentiality: Store data using industry standard encryption in transit and at rest

Conclusion

Integrate Google Analytics and Cloudflare Analytics to gain a holistic view of user behavior and app performance. However, privacy must remain a top priority. Follow privacy best practices when using third-party analytics tools and note the implications of Cloud Phone’s server-side rendering on traffic origination and geographic attribution.