In this guide, we’ll be experimenting how to send event via a javascript SDK to a Data Warehouse and another Downstream application like Google Analytics 4.

Prerequisites:

• A website hosted with a Domain name
• A RudderStack free trial account
• A Google Cloud Platform (GCP) account
• A Google analytics account

The first pipeline we’ll set up is going to be an Event Stream pipeline, this type of pipeline enables us to use the RudderStack SDK to send events from a website, web app or mobile app to either a Cloud warehouse or a downstream application, while optionally applying transformations.

Step 1: Create a Source from the RudderStack dashboard:

• Once you login to rudderstack.com, sign in with your company email you will start seeing the RudderStack homepage.
• Note the Sources, Destinations and Data plane details in the top right corner of the page. The Data Plane URL is something you will be using it in later steps, it should look something like this https://yourcompanyname.dataplane.rudderstack.com

• Click on “+ Add Source” next to Sources, you can either search for Javascript in the search field, or select the Javascript source from the Popular section.
• Name your source, make sure to use meaningful names with proper naming conventions that describe the environment like prod/dev, especially if you plan to add more javascript sources later on.
• Once that is created, a page will appear with all your source details and how to setup the SDK in your website.

Step 2: Installing the RudderStack Javascript SDK:

Now that we have set up our source in RudderStack, we’ll have to add the piece of code to our website that lets us create a connection to RudderStack and also start sending events to our destinations.

• In the Setup tab (see above screenshot) we'll see a code snippet with the write key and Data plane URL already within it, copy the snippet, then paste it into the head node of your .html code in your website. The non-minified version of the snippet is the following:

JAVASCRIPT
Copy
<script>
  rudderanalytics = window.rudderanalytics = [];
  var methods = [
    "load",
    "page",
    "track",
    "identify",
    "alias",
    "group",
    "ready",
    "reset",
    "getAnonymousId",
    "setAnonymousId",
  ];
  for (var i = 0; i < methods.length; i++) {
    var method = methods[i];
    rudderanalytics[method] = (function (methodName) {
      return function () {
        rudderanalytics.push(
          [methodName].concat(Array.prototype.slice.call(arguments))
        );
      };
    })(method);
  }

  rudderanalytics.load(<WRITE_KEY>, <DATA_PLANE_URL>);
  rudderanalytics.page();
</script>

<script src="https://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js"></script>

b. Notice here the two types of methods that are being called:

1. The load() method will set up and establish a connection to the Source you’ve configured in RudderStack earlier.
2. The page() method will capture page details, you have the option of removing this or adding other methods to capture different types of user information.

Note: You may also want to run track() calls to capture user behaviour and identify() calls to identify users, associate them with a userId and some traits, here are some examples on how to do so.

Step 3. Verifying your Source connection:

Now that we have set up our connection, we want to verify that RudderStack is able to receive events.

• Go back to the RudderStack dashboard, on the same page that our Source details, click on “Live Events” in the upper right corner of the page.
• Open up a different tab on your browser, navigate to your website’s URL and refresh the page.
• In you RudderStack Live Events page, you should start seeing events coming in. Since we only made a page call, we should see an event called Page along with the contents of the event or the Payload on the right. This will have all the information capture by the RudderStack page call from your website.

Step 4. Setting up the destination:

1. Cloud Data Warehouse (Google BigQuery):

Now that we set up our source and verified that we can receive events, we need to set up our destination that we want the events to be sent to. The first destination we’ll set up is to a Cloud Warehouse which will be Google BigQuery for this tutorial.

1. In the same Source page that we created, click on “Add Destination” within the blue button, then select create new destination.
2. Choose BigQuery from the list of destinations, then click continue.
3. Name your destination
4. Follow the steps in this doc to set up your BigQuery destination , you will need to setup a GCP bucket as a staging area and add the necessary permission in GCP for RudderStack to be able to access it.
5. After creating the BigQuery destination, similarly you should be able to select the destination from the Destinations tab in RudderStack and from there check the “Live Events” to see if the stream has been successful.
6. Head to your BigQuery instance in GCP and take a look at the tables. You should be able to see a new dataset was created with the same name of the Source, or whatever name you specified for your Namespace in the Destination settings.
7. Expand the dataset and you should be able to see a table called pages, which will have all the page view data captured by the RudderStack SDK from your website, now you can start running queries to extract insights from your data streams.

2. Google Analytics 4

Now that we have seen how to send the data to a Cloud Warehouse to visualize the data into table, run queries on the data and create customer profiles, let’s look at how we can stream data into different tool like GA4 to extract key marketing insights:

It's important here to distinguish with the two connection modes that the Google Analytics 4 destination in RudderStack now supports:

• Cloud mode: with the cloud mode, we are making HTTP calls to the Measurement protocol, this is useful in scenarios when we want to enable interaction from any source, including offline sources. However, this type of connection doesn't support all features like capturing geolocation.
• Device mode: This is loading the gtag.js directly on our website, here we get real time data reporting as well as the full range of capabilities that GA4 has.

• In your browser, enter analytics.google.com and sign in with your work account.
• In the bottom left corner, you’ll find a gear symbol, click there to open up the admin portal.

• If you haven’t already created an account, create one now.
• If you have created an account, click on “+ Click Property”. Name your property, select your time zone then answer questions about your business. When done, click on “Create”

• Now that the property is created, within the Property column you’ll see a setting for Data streams, click on that.
• Now click on “Add stream”, select Web from the list of options.
• To Set up your web Stream, add your website URL and provide a name for your Data stream.
• Once done, click on “Create Stream”.
• Once your stream is created, you’ll get a Measurement ID, make note of that since you will be using it to set up your destination connection in RudderStack

• 10. You will also need the Measurement Protocol API secret to use later with cloud mode, make sure to keep note of that too.

• Switch back to RudderStack in your browser. On the Destinations tab on the left select the GA4 option, and name your destination (tip: add a suffix to help you identify cloud mode vs device destinations, example "GA4 Destination - device mode")

Device mode:

• In the Destination configuration settings, you’ll need to enter a few things:
  • Your Measurement ID.
  • Whether you are using gtag.js or Firebase, if you are using a web client it is likely that will be gtag.js

• Under Web SDK Settings, make sure to toggle on the "Use device-mode to send events". This is what creates this integration as a device mode connection.

• Go back to Google Analytics 4, Click on "Reports" under home in the menu on the left. You can view an overall Reports snapshot of the events being captured from your site.
• Click on Real time under Reports snapshot. Here, you should start seeing the page events coming in along with any events GA4 will capture.

Cloud mode:

• In the Destination configuration settings, you’ll need to enter a few things:
  • Your Measurement ID.
  • Whether you are using gtag.js or Firebase, if you are using a web client it is likely that wll be gtag.js
  • API Secret: which is what you would have gotten in step 10. That's all you need to set things up in cloud mode, with cloud mode you can check the live events viewer to make sure the events are being sent to the Measurement protocol API and to your GA4 Dashboard. (note: Live events viewer is not available in device mode)