Data Collection & Frontend

ASAP Cloudflare Worker - Deploying updates

Objective: Update the tracking logic in the rs-proxy repository and deploy the changes live to the Cloudflare Worker.

1. Access and File Structure

• Repository: Locate the rs-proxy repository on GitHub and download/clone the code to your local machine.
• Key Files:
  • loader.js: The script that loads directly on the website.
  • iframe.js: The script that loads inside iframes.
  • loader.go.js: The minified version of the loader that is actually served to the public.

2. Making Code Changes

1. Open the project in VS Code.
2. Navigate to the relevant file (e.g., iframe.js) to apply your logic updates.
   • Example shown: Adding an additional subscription group to the subscription_group list within the event calculation function.
3. Save the file.

3. Minification (Crucial Step)

The live website loads loader.go.js, not the raw source files. You must update the minified file for changes to take effect.

1. Use a VS Code extension (such as “Minify”) or a similar plugin.
2. Run the minifier on your source file to overwrite/update loader.go.js.

4. Deployment

Important: Pushing changes to GitHub preserves the code history, but does not update the live website. You must deploy using Wrangler.

1. Open the terminal in VS Code.
2. Run the following command to deploy the Cloudflare Worker:

   npx wrangler deploy

   (Note: Ensure you type the command correctly; the video corrects a typo during demonstration).

5. Verification

• Wait for the terminal to confirm “Successfully uploaded.”
• The changes will propagate to the live website within approximately 5 seconds.

Google Tag Management (GTM) Preview & Debugging

Objective: Verify that tracking tags and events are firing correctly on your website using GTM’s Preview mode and browser developer tools.

1. Initiating Preview Mode

• Select Container: Navigate to Google Tag Manager and click on the container relevant to the website you are testing (e.g., bluecompassrv.com).
• Enter Preview: In the upper right corner of the workspace, click the Preview button.
• Connect to Site: This opens the “Tag Assistant” in a new tab. Enter the specific URL you wish to debug (e.g., the “New RVs for Sale” page) and click Connect.

2. Debugging Method A: Tag Assistant Interface

Once the website loads in a new window, the Tag Assistant tab will show a “Connected” status.

• Summary View: The main window displays a summary of all tags that have fired on the page.
• Drill Down: You can click on individual tags to inspect specific details, such as the variables associated with that tag event.

3. Debugging Method B: Browser Console

You can also verify events directly within the browser’s developer tools to see the raw data being logged.

• Open Inspector: Right-click on the webpage and select Inspect.
• View Console: Navigate to the Console tab within the developer tools.
• Verify Events: Look for logged event objects. For example, on a search results page, you might see a product list view event containing details like the brand or category of items displayed.

4. Verification Example: Form Submission

To ensure complex interactions are tracked, perform the action live on the site.

1. Submit Data: Fill out and submit a form (e.g., a “Get Low Price” form) on the connected webpage.
2. Check Console: In the browser console, you should see a form_submit event log immediately.
3. Check Tag Assistant: Switch back to the Tag Assistant tab. You should see a formSubmitComplete event in the timeline.
4. Confirm Tags: Click on that event to verify that the specific destination tags (e.g., “Sales Quote Form”) fired successfully.

Rudderstack Events Preview & Debugging

Overview The tutorial begins on the RudderStack dashboard (app.rudderstack.com), displaying Sources on the left (e.g., website events, mobile apps) and Destinations on the right (e.g., Databricks, Braze).

Step 1: Inspect Source Events

To verify data is being collected correctly from your source:

1. Select a Source: Click on a specific source, such as website_events, to view its details.
2. Review Recent History: The Events tab displays a graph and list of all events tracked over a specific period (e.g., the last 2 hours). This is useful for a general health check.
3. Monitor Real-Time Data:
   • Click the Live Events button in the top right corner.
   • Wait a few seconds for new events to appear in the feed.
4. Inspect Payloads: Click on a specific event (e.g., Product List Viewed) to open the payload view. Here you can diagnose the raw data, such as the URL origin or product details, to ensure it looks correct.

Step 2: Review Transformations

Before checking the final destination, inspect any transformations applied to the data:

1. Select a Destination: Go back to the Connections page and click on a destination, such as Braze Prod Events.
2. Check Active Transformations: Locate the Transformations section to see if scripts are modifying data before it reaches the destination.
   • Example: The video shows a script named “Website Event Enrichment” that filters events, formats phone numbers, and validates email addresses.
3. Monitor Transformation Logic:
   • Click Live Events within the transformation view.
   • This view allows you to see the Event (Before) and Event (After) side-by-side.
   • You can verify if specific events (like page views) are being intentionally dropped or if properties are being correctly modified.

Step 3: Verify Destination Delivery

Finally, ensure the data is successfully reaching the downstream tool:

1. Check Destination Live Events: Inside the destination settings (e.g., Braze), click Live Events again.
2. Analyze Structure: Notice that the event structure may look different here than at the source, as it has been formatted to meet the specific requirements of the destination platform.
3. Identify Errors: Look for error messages or dropped events.
   • Example: An identify event might show an error like “Duplicate user detected,” which indicates the user already exists in the system and the event was dropped intentionally.