How to embed Story Widget script via Google Tag Manager

In this document we will guide you to embed Story Widget’s given embed js to your website by the help of Google Tag Manager.

1. Add New Tag

Click “Add a new tag” button, when you are on your workspace’s “Overview”

2. Tag Configuration

Name your tag, then click tag configuration area

then choose tag type “Custom HTML“

paste given code (don’t forget to replace your widget-id), click “Save“

<script>
    (function () {
        var targetDiv = document.body;   
        var script = document.createElement('script');
        script.setAttribute('id', 'sw-script');
        script.setAttribute('data-swid', 'enter-your-widget-id');
        script.async = true;
        script.src = 'https://js.storywidget.com/story.js';
        targetDiv.prepend(script);
    }())
</script>

3. Add Trigger

Click “Triggering” area, Choose trigger type “Dom Ready“, save the tag.

4. Deploy

In order to see changes on your website, do not forget “Submit” the new tag.

Notes

Given code prepend the script on “body”. If you have unique div-id to show stories in it, you can use this code:

<script>
    (function () {
        var targetDiv = document.getElementById('your-div-id');    
        var script = document.createElement('script');
        script.setAttribute('id', 'sw-script');
        script.setAttribute('data-swid', 'enter-your-widget-id');
        script.async = true;
        script.src = 'https://js.storywidget.com/story.js';
        targetDiv.append(script);
    }())
</script>

You can also decide where to show Story Widget in Editor’s “Widget” -> “Placement” -> “Mobile” or “Desktop”

If you choose “Inline” stories will show up where you exactly pasted the script. You can use “Select from your website” button, preview your website live and then choose desired place.