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 LITHIUM.CommunityJsonObject....Code snippet:<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});</script>..................................as you can see, I'm able to pull very little data from LITHIUM.CommunityJsonObject :-(I can get most of this data if I'm creating a custom component and use FreeMarker via APIs inside community...But How Can I pass that data to those dataLayer variables???I'm not a big JS Developer to create my own logic and functionality.I'm able to understand others' code and do adjustments.I'm the only Dev in my team and if I can't do that means we don't have it................................Any help and code snippets appreciated much.I'm calling for help!

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>  <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>

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 LITHIUM.CommunityJsonObject....

Code snippet:
<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
});
</script>

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

as you can see, I'm able to pull very little data from LITHIUM.CommunityJsonObject :-(

I can get most of this data if I'm creating a custom component and use FreeMarker via APIs inside community...

But How Can I pass that data to those dataLayer variables???

I'm not a big JS Developer to create my own logic and functionality.

I'm able to understand others' code and do adjustments.

I'm the only Dev in my team and if I can't do that means we don't have it...

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

Any help and code snippets appreciated much.

I'm calling for help!

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

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

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

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  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

Forum Discussion

Google Tag Manager (GTM) dataLayer implementation help needed!

Related Content

Database and backend implementation

Implement custom pagination

how to make implement endpoint with ajax?

Community Managers and Mental Health: Managing Crisis Moments

How to implement country bans

Recent Discussions

Connecting Khoros data to CRM (Salesforce)

API v1 docs gone since Atlas migration to Aurora

Does anyone know how to change the display title of Custom Fields in Aurora?

Can someone walk me through authenticating and using Postman with Aurora?

Seeking Advice on Restricting Access to a posts to those who have the permalink.