.png%3Falt%3Dmedia%26token%3D6deff902-b475-4b95-bffc-b313f43260b5)
.png%3Falt%3Dmedia%26token%3D6deff902-b475-4b95-bffc-b313f43260b5)
Getting Started
Visual UGC provides a number of ways to track the impact of your UGC initiatives within your Google Analytics instance. This article will instruct you how configure the Google Analytics 4 plugin for it.
In-order 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: https://developers.google.com/tag-platform/gtagjs/install
The gtag is essential for the integration to work, as it is used to send events to Google Analytics.
For commerce customers, we can also attribute Visual UGC to Ecommerce transactions by utilising the gtag on your website.
If your widgets are not deployed via Nosto Placements, please follow the steps below to configure UGC Commerce tracking for your website.
Note: This step can also be completed after Step 3.
This script is utilised to attribute conversions to your Visual UGC widgets by sending properties along with commerce events.
For example, if a user clicks on a product within a Visual UGC widget, we will send the product information to Google Analytics 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>
If you already have the Nosto Product tagging on your website via the Nosto Personalization solution please skip this step
For pages which 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, 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 ecommerce system like Shopify, you can utilise a liquid variable to preload the product id.
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 utilisation of our cart tagging.
This will allow Visual UGC to track the products which are added to the cart, and purchased, to increase the accuracy of UGC Commerce tracking for your organisation.
<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 which 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.
In-order to track UGC events in Google Analytics would will need to configure the Google Analytcs 4 plugin in the Visual UGC Admin Portal. Please follow the steps here: https://help.nosto.com/en/articles/7890296-google-analytics-4-authentication-configuration
Once the steps above are completed your Performance events will start tracking automatically. Learn more about Performance Event Tracking here.
If you want to track Email Campaigns you will also have to complete step 4.
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 it's used to track email events.
If you selected 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 initiatves 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 Visual UGC Admin Portal.
Last modified 2mo ago