UGC Techdocs
  • Introduction
  • Guides
    • Analytics
      • Tracking UGC on Adobe Analytics
      • Tracking Widget interactions with Google Analytics
    • Direct Uploader
      • How to add Custom Data to Direct Uploader
      • How to capture Custom Data on Direct Uploader
      • How to automatically tag data on Direct Uploader
      • How to Customize error messages on Direct Uploader
      • How to Track Direct Uploader form submissions with Google Analytics (Universal & GA 4)
    • Data Templates
      • Creating a Data Template
    • Rights via Registration
      • Capture Custom Data on Rights by Registration Form
      • Styling Rights via Registration Form
    • REST API
      • Caching REST API results for optimization
      • Posting content into Nosto via Tile API
      • Posting images into Nosto via Tile API
    • Onsite Widgets (2.0)
      • Blank Canvas
        • How to Use the Blank Canvas to Create a Twitter Count Widget
        • Creating an Auto-Scrolling Carousel using Blank Canvas
        • Creating Gallery Widget by Using the Blank Canvas Widget
        • Creating a simple Hover effect using Blank Canvas
        • Creating a Word Cloud using Blank Canvas
        • Creating Your Widget by Using the Blank Canvas
      • Bind your own Events
      • Creating a Grid Widget from Waterfall
      • Create a Q&A Widget using Data Templates
      • Displaying a Widget in a Mobile App
      • Dynamically Specify Products to Display in Widget
      • Dynamically specify what Tile to display in a Widget
      • How to add a title / subtitle to a widget
      • How to localize the load more button on widgets
      • How to overlay existing Google Map with the UGC Map Widget
      • Styling cross-sellers on Grid and Carousel Widgets
      • How to Load External JS and CSS into Widgets
      • Profiling Widget Performance
      • Re-targeting with Widgets and Facebook Pixel
      • Render Widget filters dynamically
      • Styling Carousel Widget
      • Styling Grid Widget
      • Styling Masonry Widget
      • Styling Waterfall Widget
      • Styling Widget Expanded Tile
      • Styling Widget Shopspots
      • Using Web Fonts in Widgets
    • Digital Screens
      • Customizing Carousel Event Screen
      • Customizing Mosaic Event Screen
      • Customizing Scrollwall Event Screen
      • Customizing the Mosaic Event Screen to Have 9 Even Tiles
    • Email
      • Adding Location to an Email Tile
      • Styling the Email Widget
    • Integrations
      • DoubleClick
        • UGC Ads with Nosto and Google DoubleClick
      • Zapier
        • Consuming UGC Webhooks via Zapier
      • Mailchimp
        • Bring Social Content into a Mailchimp Campaign
    • Webhooks
      • Trigger notifications when content is in the moderation queue
  • Widgets
  • API Docs
    • JavaScript API
      • Widgets
        • Introduction
        • API Reference for Content Widgets
        • API Reference for Blank Canvas
        • API Reference for Map Widget
      • Digital Screens
        • Introduction
        • API Reference
    • Content API
      • Reference
    • REST API
      • Reference
        • Filters API
        • Moderation Views API
        • Tags API
        • Terms API
        • Tiles API
        • Users API
        • Widgets API
        • Automation Rules API
        • REST API Reference Widgets style and config
      • Best Practices
    • Webhooks
  • Enterprise Tools
    • Automation Rules
      • Triggers
      • Actions
      • Samples
    • Data Templates
    • User Access Control (UAC)
    • Single Sign On (SSO)
    • Enterprise Admin User Interface (EAUI)
    • Zapier
  • Commerce Tools
    • Product Feeds
    • Widget Implementation
    • Reporting
    • Integrations
      • Google Tag Manager
      • Magento
      • SalesForce Commerce Cloud
      • Shopify
      • Shopify Add To Cart
        • Global Variant Mapping for Add to Cart
        • Customise Add to Cart Widget Experience
  • Analytics
    • Google Analytics 4
      • Getting Started
      • Widgets Events
      • E-commerce Events
      • Email Events
  • Terms of Use
Powered by GitBook
On this page
  • STEP 1: Install Google Analytics 4 on your website
  • STEP 2: Install the UGC Commerce Script & Nosto tagging on your website
  • STEP 3: Connect the Google Analytics 4 Plugin
  • STEP 4: Embed your Email Campaigns

Was this helpful?

  1. Analytics
  2. Google Analytics 4

Getting Started

PreviousGoogle Analytics 4NextWidgets Events

Last updated 7 months ago

Was this helpful?

Nosto's UGC provides several ways to track the impact of your UGC initiatives within your Google Analytics instance. This article will instruct you on how to configure the Google Analytics 4 plugin for it.

STEP 1: Install Google Analytics 4 on your website

To use the Google Analytics 4 plugin, you will need Google Analytics installed on the pages you wish to track.

Please follow the instructions here to prepare your gtag tracking code:

The gtag is essential for the integration to work, as it is used to send events to Google Analytics 4.

For commerce customers, we can also attribute UGC to E-commerce transactions by utilizing the gtag on your website.

STEP 2: Install the UGC Commerce Script & Nosto tagging on your website

If your widgets are deployed via please skip step 2.

If your widgets are not deployed via , please follow the steps below to configure UGC Commerce tracking for your website.

Note: This step can also be completed after Step 3.

2.1 Install the UGC Commerce script

This script is utilized to attribute conversions to your UGC widgets by sending properties along with commerce events.

For example, if a user clicks on a product within a UGC widget, we will send the product information to Google Analytics 4 when the user clicks an add-to-cart event, product view event, or purchase event.

The script can be installed by adding the following code to the header of your website:

<script src="https://my.stackla.com/media/js/dist/ugc.bundle.js"></script>

2.2 Install Nosto Product Tagging

If you already have the Nosto Product tagging on your website via the Nosto Personalization solution please skip this step

For pages that relate to one product, for example, a product view page - we require the following:

  <div class="nosto_page_type" style="display:none">product</div>
  <div class="nosto_product" style="display:none"> 
    <span class="product_id">{{ product.id }}</span>
  </div>

Please note, that you will be required to add the product id to the product_id span.

This can be rendered using your backend, before the page loads. Or, if using an e-commerce system like Shopify, you can utilize a liquid variable to preload the product ID.

2.3. Install Nosto Cart Tagging

If you have the Nosto Cart tagging on your website already via the Nosto Personalization solution please skip this step

For all pages, we recommend the utilization of our cart tagging.

This will allow Nosto's UGC to track the products which are added to the cart and purchased, to increase the accuracy of UGC Commerce tracking for your organization.

<div class="nosto_cart" style="display:none">
    <div class="line_item">
        <span class="product_id"></span>
    </div>
</div>

The product ID span will need to be populated with the product ID of the product that is added to the cart.

For example, by using Shopify liquid this can be done with the following code:

<div class="nosto_cart" style="display:none">
    <div data-gb-custom-block data-tag="for">

    <div class="line_item">
        <span class="product_id">{{ item.product.id }}</span>
    </div>
    

</div>
</div>

Please paste this code into your code's main theme file so the UGC Commerce script can access it.

The body of the code is a good place to keep it.

STEP 3: Connect the Google Analytics 4 Plugin

To track UGC events in Google Analytics 4 you will need to configure the Google Analytics 4 plugin in the Nosto Admin Portal. Please follow the steps here: https://help.nosto.com/en/articles/7890296-google-analytics-4-authentication-configuration

If you want to track Email Campaigns you will also have to complete step 4.

STEP 4: Embed your Email Campaigns

Once you have completed the Google Analytics 4 plugin configuration and enabled the Email tracking, you will need to go to the Email campaigns and re-embed the Tiles via link or HTML. You will notice that both the link and HTML include a piece of tracking code that is used to track email events.

If you select to track Email Clicks, the embeds will also automatically include the link to the original social post.


Once all the steps above are completed, you will be able to track all Performance, Email, and Commerce events for your UGC initiatives within Google Analytics 4.

Please note the Google Analytics data provided through the Google Reporting API is not real-time so, it may take 24-48 hours (after an event is tracked) for data to appear in the Performance, Commerce, and Email Dashboards in the Nosto Admin Portal.

Learn more about Commerce Events Tracking .

Once the steps above are completed your Performance events will start tracking automatically. Learn more about Performance Event Tracking .

Learn more about how to embed Email Campaigns .

Learn more about Email Events Tracking .

https://developers.google.com/tag-platform/gtagjs/install
Nosto Placements
Nosto Placements
here
here
here
here
Back to Top