Story Widget keeps tracks of widget’s usage events and they can be seen in Statistics page. Also you can monitor those events in your Google Analytics dashboard and use all reporting features of Google Analytics brings. In this article, we will tell you how to enable this feature step by step.
See: All the events that Story Widget pushes to Google Analytics
1. Enable “Push events to Google Analytics” feature
a. Open widget in editor (which you want to track on Google Analytics)
b. Select “Google Analytics” tab from top menu
c. Check the “Push events to Google Analytics” checkbox
d. Select “Google Tag Manager” option
e. Save your changes.
If you are using Google Analytics, not the Google Tag Manager javascript as primary data provider, please follow our Tracking Story Widget events with Google Analytics article for setup phase.
2. Login your Google Tag Manager Dashboard
a. Login via https://tagmanager.google.com
b. Select your account that manages your website
3. Define a Trigger
a. Choose “Trigger” from left-side menu, and click “New” button
b. Name your trigger as “Story Widget” and click “Trigger Configuration”
c. Choose trigger type “Custom Event“
d. On Trigger Configuration set “Event Name” to “^sw-s ” and check “Use regex matching” checkbox
4. Create Variable Names
a. Choose “Variables” on left-side menu, click “New” button
b. Name variable as “sw-category“, then click “Variable Configuration” area
c. Choose variable type as “Data Layer Variable” from list
d. In Variable Configuration view, set “Data Layer Variable Name” as “sw-category“, click “Save” button
e. Repeat b,c and d steps for “sw-label“
f. Repeat b,c and d steps for “sw-value“
g. Choose “Variables” menu from left-side menu. You should see “sw-category“, “sw-label” and “sw-value” variables with Type “Data Layer Variable” under the “User-Defined Variables” list.
5. Create a Tag
a. Choose “Tags” on left-side menu, click “New” button
b. Name your tag as “GA Events – Story Widget“, then click “Tag Configuration” area
c. Choose tag type as “Google Analytics: Universal Analytics” from list
d. For “Track Type” select “Event“. For each “Event Tracking Parameters” you should select previously defined variables
e. Set “Category” as “{{sw-category}}“, “Action” as “{{Event}}“, “Label” as “{{sw-label}}“, “Value” as “{{sw-value}}“, Select “Non-Interactive Hit” as “False”, click “Save” button.
f. For Google Analytics setting, you should select which account to push data, GA Account ID (Tracking ID) / or define new one if you didn’t before. Check this page to learn how to find your Tracking ID
g. Click “Triggering” area (seen in step b) , Select previously defined trigger “Story Widget” from list.
h. Your Tag should seen like below, now click “Save”
6. Create Tag & Trigger for “Story Widget Load”
We have only one Non-Interaction Event, “sw-widget-loaded“, so in order to track this event, it needs separate Tag & Trigger.
a. Create a new Trigger following STEP 3 above, except name it as “Story Widget Load“, and set “Event Name” to “^sw-w ” and check “Use regex matching” checkbox
b. Create a new Tag following STEP 5 above, except name it as “GA Events – Story Widget Load“, and in sub-step 5.e set “Category” as “{{sw-category}}“, “Action” as “{{Event}}“, “Label” as “{{sw-label}}“, “Value” as “{{sw-value}}“, Select “Non-Interactive Hit” as “True”.
For Triggering, select newly created “Story Widget Load”, click “Save” button.
7. Preview and Publish your changes
a. On “Tags” page, you will see “Preview” and “Submit” buttons. Click “Preview” button to test your changes.
b. Go to your webpage that contains both Google Tag Manager code and Story Widget. Play with Story Widget and you will see events that pushed. (You can also use Developers Tool without preview step, detailed in Troubleshooting part below)
c. Click “Leave Preview Mode” and click “Submit” button. Define “Version Name” and click “Publish” button on “Submit Changes” screen.
8. Check Google Analytics Dashboard
Congratulations š
Events will be monitored on Google Analytics dashboard, under de āBehaviourā > āEventsā menu, displayed with “StoryWidget-ID:{your_widget_id}” category.
Sample Usage
You can check our Analyzing Story Widget usage in Google Analytics article to learn about how you can use Story Widget pushed events and create segments with them.
Troubleshooting
How to check if Story Widget pushing data to Google Analytics?
a. Open your one of page that uses Story Widget in Google Chrome
b. Open Developer Tools via Click Customize and control Google Chrome and then select More Tools > Developer Tools
c. Click on “Network” tab, clear all logs, write “collect” in filter input
d. Click on Story Widget and let them play, click left & right and watch some stories. On the right side you should see network requests of sending data to Google Analytics.
If you cannot see those network request:
- Be sure that you are using Google Tag Manager js in your page
- Be sure that you are not in “Preview Mode“
- Be sure that you are deployed changes
- Try publish your changes again
- If everything seems correct but still not seeing Event push requests in network tab, use “Support” button (placed in every page of Story Widget dashboard’s top menu) to reach out us. We will investigate the situation as soon as possible.
If network request are ok but you can not see data under your Google Analytics dashboard’s āBehaviourā > āEventsā menu
Give some time to Google Analytics, on first setup sometimes it takes time to show events, especially if your site is getting low traffic. Open your website and play with Story Widget to create some data, then come to Google Analytics Events page, change Date filter. Your data will be shown soon.