Analytics

Buzzy Analytics Integration Guide

Overview

Buzzy supports analytics integrations that help you monitor user interactions, optimize user experience, and gather insights on application performance. This guide provides steps to integrate Google Analytics and other REST API-compatible analytics platforms with Buzzy.

Goole Analytics Integrations

1. Integrating Buzzy with Google Analytics using custom header JS

Google Analytics can be seamlessly integrated into your Buzzy web applications to track user activity and monitor engagement. Follow these steps to implement Google Analytics with Buzzy:

Step-by-Step Guide

  1. Access Google Analytics Tracking Code:

    • Set up a Google Analytics account and create a new property for your Buzzy application if you haven’t already.

    • Retrieve the tracking code snippet provided by Google Analytics for your property.

  2. Add Google Analytics Code to Buzzy:

    • Log into your Buzzy Workspace.

    • Go to the specific Buzzy App -> Settings -> Advanced and add your custom analytics code.

  3. Add your custom JavaScript in the header

    Note this is ONLY available to admin users on your CUSTOM Buzzy deployment, it will NOT be available on generic servers like app.buzzy.buzz

  • Insert your Google Analytics tracking script here. This code will be injected into all pages, allowing Google Analytics to track user interactions across your app.

  • Example code (you should get this from Google or :

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

  1. Verify Integration:

    • Use Google Analytics’ real-time reports to confirm that your Buzzy app’s user interactions are being captured.

    • For additional details on setting up and verifying Google Analytics, see this video guide.

2. Using Buzzy's Figma Plugin to set Google Analytics events

See this example using the Buzzy Figma plugin to send custom event data to Google Analytics

2. Using Buzzy Datatables Rules to Make API Calls to Analytics Services

Buzzy’s Datatables Rules allow for advanced configuration and API interactions. You can set up rules to make API calls to any analytics service with a REST API, enabling you to push user data to external analytics platforms.

Configuration Steps

  1. Set Up Analytics Service API:

    • Ensure your chosen analytics service (e.g., Mixpanel, Segment.io) provides a REST API for data collection.

    • Obtain the necessary API key and endpoint details from your analytics service documentation.

  2. Define Datatables Rules in Buzzy:

    • In the Buzzy dashboard, navigate to the Datatables section and choose the table where you want to track or store analytics data.

    • Set up rules within the Datatable that can trigger API calls upon certain conditions (e.g., a new user sign-up or a completed purchase).

    • Configure the API request with the necessary HTTP method, headers (including your API key), and data payload. Use placeholder variables to dynamically populate data fields based on the user's interaction.

  3. Confirm API Connectivity:

    • Test the setup to verify that API calls are successfully being sent to your analytics service. Review logs and monitor responses to ensure data is accurately recorded.

  4. Additional Resources:

    • For more information on setting up Buzzy Datatables and making API calls, refer to the Buzzy documentation.

3. Adding Custom JavaScript for Analytics in Web Applications

For more advanced tracking, such as custom events, you may add JavaScript code directly to the header of your web application. This functionality is restricted to admins on their own Buzzy deployments.

Instructions

  1. Access Web App Settings in Buzzy:

    • As an admin, go to the “Web App Settings” in your Buzzy deployment dashboard.

  2. Insert Custom JavaScript:

    • Under the “Custom Header Scripts” section, insert any additional JavaScript code needed for analytics.

    • This can include custom Google Analytics events, Mixpanel tracking code, or scripts from other analytics platforms.

  3. Configure Events and Triggers:

    • Write custom JavaScript to capture specific events (e.g., button clicks, form submissions).

    • These events can then be sent to your analytics service using the appropriate JavaScript API or REST endpoint.

  4. Testing and Verification:

    • Ensure all custom scripts are correctly firing by using browser developer tools and testing tools provided by your analytics service.

Additional Notes

  • Data Privacy and Compliance: Ensure that all data collection adheres to relevant data protection laws, such as GDPR or CCPA. Include user consent options if required.

  • Error Handling: Implement error logging for API calls in case of connectivity or authorization issues.

PreviousTroubleshootingNextExamples

Last updated