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
  • Overview
  • Widgets
  • Embed Code
  • Trigger Setup
  • Tag Setup
  • Direct Uploader
  • Embed Code
  • Trigger Setup
  • Tag Setup

Was this helpful?

  1. Commerce Tools
  2. Integrations

Google Tag Manager

PreviousIntegrationsNextMagento

Was this helpful?

Overview

The Google Tag Manager (GTM) is one of the most popular Tag Management systems on the internet and is used to manage Javascript and HTML tag, primarily for the purposes of tracking or collecting analytics for a website.

Google Tag Manager can be used by clients as a way of implementing UGC Widgets and Direct Uploader Forms in Content Management Systems' (CMS) that limit users from injecting Javascript.

Detailed below are the step by step ways in which GTM can be used on your website.

Widgets

Leveraging Google Tag Manager (GTM) can be an effective way for brands to deploy Visual UGC Widgets across their digital properties, especially in Content Management Systems' (CMS) that limit users from injecting Javascript.

Outlined in this guide are the steps which can be taken to add the Javascript component of the Widget Embed code to your GTM container.

Embed Code

The Visual UGC Widget Embed code can be broken into two components, the first component (included below) is the DIV container which defines where the Visual UGC Widget should be rendered on a webpage, as well includes the various parameters which defines what Widget and what Content is loaded.

<div class="stackla-widget" data-ct="" data-hash="{{widget-hash}}" data-id="{{widget-id}}" data-title="{{widget-title}}" data-ttl="60" style="width: 100%; overflow: hidden;"></div>

The second component is the Widget Javascript. This is the part of the Embed code which is consistent for every Widgets and can be added to your GTM container.

<script type="text/javascript">
(function (d, id) {
    var t, el = d.scripts[d.scripts.length - 1].previousElementSibling;
    if (el) el.dataset.initTimestamp = (new Date()).getTime();
    if (d.getElementById(id)) return;
    t = d.createElement('script');
    t.src = '//assetscdn.stackla.com/media/js/widget/fluid-embed.js';
    t.id = id;
    (d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(t);
}(document, 'stackla-widget-js'));
</script>

Trigger Setup

The first step in the setup is to define our Trigger(s). Triggers are used by GTM to define when Tags are run.

To create a Trigger, select Triggers from the GTM menu and create a New Trigger. Next we name the Trigger and select Page View from the Trigger Configuration options.

From here we can define when we want to make the Widget Javascript available on a page.

If you plan on having a Visual UGC Widget on all Pages, you should pick All Page Views for when the trigger fires, otherwise you should define what Page(s) the Javascript loads.

Tag Setup

Final step in the process is to define our Tag. Tags is where we will store the Widget Javascript we identified earlier.

To create a Tag, select Tags from the GTM menu and create a New Tag.

We can now give it a name, and select Custom HTML from the Tag Configuration options.

From here we can add the Widget Javascript.

<script type="text/javascript">
(function (d, id) {
    var t, el = d.scripts[d.scripts.length - 1].previousElementSibling;
    if (el) el.dataset.initTimestamp = (new Date()).getTime();
    if (d.getElementById(id)) return;
    t = d.createElement('script');
    t.src = '//assetscdn.stackla.com/media/js/widget/fluid-embed.js';
    t.id = id;
    (d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(t);
}(document, 'stackla-widget-js'));
</script>

Final step is associating the Tag with the Trigger we created before.

Once created and Saved you can then Publish.

Direct Uploader

Leveraging Google Tag Manager (GTM) can be an effective way for brands to deploy GoConnect across their digital properties, especially in Content Management Systems' (CMS) that limit users from injecting Javascript.

Outlined in this guide are the steps which can be taken to add the Javascript component of the GoConnect Embed code to your GTM container.

Embed Code

The Visual UGC GoConnect Embed code can be broken into two components, the first component (included below) is the DIV container which defines where the Visual UGC GoConnect Form should be rendered on a webpage, as well includes the various parameters which defines what GoConnect Form is loaded.

<div id='stackla-goconnect-widget' data-widget-id="{{widget-id}}"></div>

The second component is the GoConnect Javascript. This is the part of the Embed code which is consistent for every GoConnect Form and can be added to your GTM container.

<script type='text/javascript'>
(function (d) {
    // embed.js CDN
    var cdn = window.StacklaGoConnectConfig ? window.StacklaGoConnectConfig.cdn : 'assetscdn.stackla.com';
    var t = d.createElement('script');
    t.type = 'text/javascript';
    t.src = 'https://' + cdn + '/media/js/common/plugin_goconnect_embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(t);
}(document));
</script>

Trigger Setup

The first step in the setup is to define our Trigger(s). Triggers are used by GTM to define when Tags are run.

To create a Trigger, select Triggers from the GTM menu and create a New Trigger. Next we name the Trigger and select Page View from the Trigger Configuration options.

From here we can define when we want to make the GoConnect Javascript available on a page.

If you plan on having a Visual UGC GoConnect Form on all Pages, you should pick All Page Views for when the trigger fires, otherwise you should define what Page(s) the Javascript loads.

Tag Setup

Final step in the process is to define our Tag. Tags is where we will store the Widget Javascript we identified earlier.

To create a Tag, select Tags from the GTM menu and create a New Tag.

We can now give it a name, and select Custom HTML from the Tag Configuration options.

From here we can add the GoConnect Javascript.

<script type='text/javascript'>
(function (d) {
    // embed.js CDN
    var cdn = window.StacklaGoConnectConfig ? window.StacklaGoConnectConfig.cdn : 'assetscdn.stackla.com';
    var t = d.createElement('script');
    t.type = 'text/javascript';
    t.src = 'https://' + cdn + '/media/js/common/plugin_goconnect_embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(t);
}(document));
</script>

Final step is associating the Tag with the Trigger we created before.

Once created and Saved you can then Publish.

Return to Top
Return to Top
Overview
Widgets
Direct Uploader