How to restart utag.js when we refresh a part of page using javaScript ?

ABK
Bronze Contributor
Bronze Contributor ABK

Hello, 

 

We have a problème : 

1- When we click in our vidèo playlist, only a part of the web page is refreshed using JavaScript 
2- On that click, we try to send a hit with a refreshed  data layer

3- We didn't get any hit and the data_layer is still the same.

 

We tried to call utag.view() but it not working, any help please ? 

 

Thank you 

3 REPLIES 3

How to restart utag.js when we refresh a part of page using javaScript ?

Tealium Expert
Tealium Expert

Hello @ABK

 

1) can you share the URL you're trying to track?  So that we may try and help by testing the page ourselves.

2) can you try the debug instructions at this link:

https://community.tealiumiq.com/t5/JavaScript-utag-js/Debugging-utag-view-and-utag-link/ta-p/13695

 

Looking forward to your reply - 

How to restart utag.js when we refresh a part of page using javaScript ?

Tealium Employee

Hi @ABK

 

Here is what I tried:

 

Your page

<html>

<head>

    <!-- your header content -->

    <!-- Tealium bit  -->

    <script>
        var utag_data = {
            "refresh_property": "original_value"
        };

        
        (function(a, b, c, d) {
            a = '//tags.tiqcdn.com/utag/{{your account}}/{{your profile}}/{{your environment}}/utag.js';
            b = document;
            c = 'script';
            d = b.createElement(c);
            d.src=a;
            d.type = 'text/java' + c;
            d.async = true;
            a = b.getElementsByTagName(c)[0];
            a.parentNode.insertBefore(d, a)
        })();

        // this function will fire tealium when called
        function fireTealium(data) {

            // update you data layer
            utag_data.refresh_property = "property_refreshed" + data;

            utag.view(utag_data);

        }

    </script>

</head>

<body>


    <!-- your page content  -->


    <!-- your video play list?  -->
    <a href="#" onclick="return fireTealium(1);">Load my content dynamically 1</a>
    <br>
    <a href="#" onclick="return fireTealium(2);">Load my content dynamically 2</a>
    <br>
    <a href="#" onclick="return fireTealium(3);">Load my content dynamically 3</a>
    <br>
    <a href="#" onclick="return fireTealium(4);">Load my content dynamically 4</a>
    <br>
    <a href="#" onclick="return fireTealium(5);">Load my content dynamically 5</a>

</body>

</html>

 

 

This screen shots shows when the page is first loaded and displyed to the user. It is visible a tag firing with a query string containing my original value from the data layer.

 

 

localhost_3000_IqTester_page2_html_.png

 

When I click on the buttons available, each button call the function and send a random number. The function updates the data layer property and sends a "Tealium restart". It is then possible to see the browser firing the tag again with the new/refreshed values.

 

localhost_3000_IqTester_page2_html_.png

 

Hope this helps.

 

 

 

 

 

 

How to restart utag.js when we refresh a part of page using javaScript ?

Tealium Expert
Tealium Expert

Hello @ABK,

 

I would suggest to have appropriate attributes to assign the value when user click on button to track. Here is the link to refer various Video tracking references to have a detailed elucidation,

 

https://community.tealiumiq.com/t5/forums/searchpage/tab/message?advanced=false&allow_punctuation=tr...

 

Hope it helps!!!