Forum Discussion

irach15's avatar
irach15
Maven
9 years ago

Google Tag Manager (GTM) dataLayer implementation help needed!

Did anyone implemented GTM dataLayer? We've added a dataLayer with custom parameters. I've done some search but was not able to find any additional info, except that is not much to pull from LITHIU...
  • irach15's avatar
    irach15
    9 years ago

    I put all code together for anyone who might struggle as I did :-)

    Some variables you can update to your naming, for example 'someRole'

    Put the code to your Studio hitbox,

    in my case also Google Tag Manager script has to be first before the code bellow

    .......

    <#assign userId = user.uid />
<#assign languageSelected = restadmin("/users/self/profiles/name/language").value />

<#if user.registered>
  <#assign someRole  = false />
  <#list restadmin("/users/id/${user.uid}/roles").roles.role as role>
    <#if role.name?? && (role.name == "someRole" || role.name == "Administrator")>
      <#assign someRole = true />
      <#break />
    </#if>
  </#list>
</#if>

<#if page.context.thread??>
  <#function dateFormat dt >
    <#return dt?string("MM-dd-yyyy, HH:mm Z") />
  </#function>

<#assign apiVersion = "2.0"/>
<#assign article = page.context.thread.topicMessage />
<#assign articleId = page.context.thread.topicMessage.uniqueId?c />
<#assign author = article.author />
<#assign authorId = author.uid />
<#assign primaryAuthor = author.login />

<#assign contributorApi = rest("/messages/id/" + articleId + "/tkb/contributors").users.user.login />
<#if contributorApi?size gt 0>
<#assign contributor = "" />
  <#list contributorApi as con>
    <#assign contributor = contributor + con />
    <#if con_has_next>
      <#assign contributor = contributor + " | " />
    </#if>
  </#list>
<#else>
    <#assign contributor = "0" />
</#if>

<#assign articlePostDate = dateFormat(article.postDate) />
<#assign apiv2Article = rest("2.0", "/messages/" + articleId).data />

<#assign articleUpdateDate = dateFormat(apiv2Article.current_revision.last_edit_time) />

<#assign articleImageQuery = "SELECT id FROM images WHERE messages.id = '" + articleId + "'"/>
<#assign apiv2articleImageCount = rest(apiVersion, "/search?q=" + articleImageQuery?url + "&restapi.response_style=view").data.items![] />
<#if apiv2articleImageCount?size gt 0>
    <#assign articleImageCount = apiv2articleImageCount?size />
    <#else>
        <#assign articleImageCount = "0" />
</#if>

<#assign articleHelpfulQuery = "SELECT * FROM tkb_helpfulness_ratings WHERE message.id = '" + articleId + "'"/>
<#assign apiv2articleHelpful = rest(apiVersion, "/search?q=" + articleHelpfulQuery?url + "&restapi.response_style=view").data.items![] />
<#if apiv2articleHelpful?size gt 0>
<#assign articleHelpful = apiv2articleHelpful?size />
<#else>
<#assign articleHelpful = "0" />
</#if>

<#assign labelsQuery = "SELECT * FROM labels WHERE messages.id = '" + articleId + "'"/>
<#assign labelsApi = rest(apiVersion, "/search?q=" + labelsQuery?url + "&restapi.response_style=view").data.items![] />
<#if labelsApi?size gt 0>
  <#assign labels = "" />
  <#list labelsApi as label>
    <#assign labels = labels + label.text />
    <#if label_has_next>
      <#assign labels = labels + " | " />
    </#if>
  </#list>
  <#else>
  <#assign labels = "0" />
</#if>

<#assign tagsQuery = "SELECT * FROM tags WHERE messages.id = '" + articleId + "'"/>
<#assign tagsApi = rest(apiVersion, "/search?q=" + tagsQuery?url + "&restapi.response_style=view").data.items![] />
<#if tagsApi?size gt 0>
  <#assign tags = "" />
  <#list tagsApi as tag>
    <#assign tags = tags + tag.text />
    <#if tag_has_next>
      <#assign tags = tags + " | " />
    </#if>
  </#list>
<#else>
  <#assign tags = "0" />
</#if>

<#assign thumbStatus = rest("/messages/id/" + articleId + "/kudos/count").value />

</#if>


<!--  Google Analytics Data Layer  --->
<script>
    if (typeof LITHIUM == 'undefined') 
        { var LITHIUM={}; };
    if (typeof LITHIUM.CommunityJsonObject == 'undefined') 
        { LITHIUM.CommunityJsonObject={}; };  
    if (typeof LITHIUM.CommunityJsonObject.Page.object.type == 'undefined') 
        { LITHIUM.CommunityJsonObject.Page.object.type == ''; };
    
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
    'event': 'dataLayer-loaded',
    'userLoggedIn': (!LITHIUM.CommunityJsonObject.User.isAnonymous),
    'region': '',
    'articleType': LITHIUM.CommunityJsonObject.Page.name,
    'pageType': LITHIUM.CommunityJsonObject.Page.object.type,
    'uniqueID': LITHIUM.CommunityJsonObject.User.id,
    'articleImageCount': '${articleImageCount!""}',
    'articlePostDate': '${articlePostDate!""}',
    'articleUpdateDate': '${articleUpdateDate!""}',
    'articleHelpful': '${articleHelpful!""}',
    'thumbStatus': '${thumbStatus!""}',
    'contributor': '${contributor!""}',
    'primaryAuthor': '${primaryAuthor!""}',
    'communityTeam': '${(someRole?c)!""}', 
    'labels': '${tags!""}', 
    'tags': '${labels!""}'
    });
</script>
DougS's avatar
DougS
Khoros Oracle
9 years ago

You can either use the hitbox component in your skin and insert freemarker values into <script> tags there, or you could add javascript to a custom components using the @liaAddScript directive and insert your freemarker values into the GTM script that way.

  • irach15's avatar
    irach15
    Maven
    9 years ago

    Hi DougS,

    thank you for your response.

    Any code sample could be really helpful :-)

    I need to see how to connect the pieces.

     

    • DougS's avatar
      DougS
      Khoros Oracle
      9 years ago

       

      You would add the snippit to the hitbox component of your skin (go to Community Style tab in studio, select your skin, go to the Components tab and paste this into the hitbox textarea (replace the bit that starts with <!-- Google Tag Manager --> with what is generated for you in the Tag Manager, which will have the correct container id) and save: 

       

      <script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'dataLayer-loaded',
  'userLoggedIn': (!LITHIUM.CommunityJsonObject.User.isAnonymous),
  'region': '<user region>',
  'articleType': LITHIUM.CommunityJsonObject.Page.name,
  'pageType': LITHIUM.CommunityJsonObject.Page.object.type,
  'articleImageCount': '<numerical amount of images in the article>',
  'articlePostDate': '<date the article was posted>',
  'articleUpdateDate': '<date the article was updated>',
  'articleHelpful': '<number of people who voted article helpful>',
  'thumbStatus': '<thumbs up number>',
  'contributor': '<article contributor name>',
  'primaryAuthor': '<primary author>',
  'labels': '<article label>',  // add in pipe delimited list if multiples
  'tags': '<article tags>' // add in pipe delimited list if multiples\
 });

      <!-- Google Tag Manager -->
      <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
      <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXX');</script>
      <!-- End Google Tag Manager -->
 </script>

       

      -Doug

      • irach15's avatar
        irach15
        Maven
        9 years ago

        DougS,

        thank you.

        That part I've already implemented :-)

        and I've mentioned it in my original post.

        You don't get any results from undefined variables.

        ..........................

        I was asking how to get the data outside of Lithium JSON object, using FreeMarker and pass it back to dataLayer.

        I'm having issues with How to get a custom component with the variables (I'm guessing FreeMarker + JS) I need and plug them to dataLayer.

        For example,

        {
'region': '<user region>',
'articleImageCount': '<numerical amount of images in the article>', 
'articlePostDate': '<date the article was posted>', 
'articleUpdateDate': '<date the article was updated>',
 'articleHelpful': '<number of people who voted article helpful>', 
'thumbStatus': '<thumbs up number>', 
'contributor': '<article contributor name>', 
'primaryAuthor': '<primary author>', 
'labels': '<article label>', // add in pipe delimited list if multiples 
'tags': '<article tags>' // add in pipe delimited list if multiples
}

        what is in '<>' undefined, and need to be updated to some sort of obj/variables to pull data via APIs.

        Where to place the final code and how to call Google Tag Manager, I know.

        ...............................

        Sorry for confusion.

        And thank you again.