Google Tag Manager (GTM) dataLayer implementation help needed!

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.

Hi DougS,

thank you for your response.

Any code sample could be really helpful :-)

I need to see how to connect the pieces.

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

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.

Sorry about the confusion. You should be able to add the Freemarker you need right in the hitbox component of your skin.  Here is an example of how you might look up those values:

<#if page.context.message??>
  <#function dateFormat dt >
    <#return dt?string("MM-dd-yyyy, HH:mm Z") />
  </#function>
  <#assign article = page.context.message.discussion.topicMessage />
  <#assign articleId = article.uid />
  <#assign author = article.author />
  <#assign authorId = author.uid />
  <#assign authorLogin = author.login />
  <#assign articlePostDate = dateFormat(article.postDate) />
  <#assign apiv2Article = rest("2.0", "/messages/" + articleId).data />
  <#assign articleLastEditDate = dateFormat(apiv2Article.conversation.last_post_time) />
  <#assign debug = false />
  <#if debug> 
    <div>
      <h3>HITBOX DEBUG</h3>
      <ul>
        <li>articleId: ${articleId}</li>
        <li>authorId: ${authorId}</li>
        <li>authorLogin: ${authorLogin}</li>
        <li>articlePostDate: ${articlePostDate}</li>
        <li>articleLastEditDate: ${articleLastEditDate}</li>
      </ul>
    </div>
  </#if>
</#if>

I didn't add all the values you are looking for,  but you should be able to find the rest by referencing the api v2 docs (or you can use api v1 and reference the api v1 docs).

-Doug

Hi DougS,

thank you for clarification.

I need to add those values to dataLayer js script to push, which I'm guessing should go bellow the code you've provided.

Can I add them to script code and what the format of those values should be?

Sample of dataLayer with missing values:

<script>   
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
    'event': 'dataLayer-loaded',
    'articlePostDate': '???',
    'articleUpdateDate': '???',
    'contributor': '???',
    'primaryAuthor': '???'
    });
</script>

Appreciate a lot.

You'll want to populate those values using freemarker variables you have created -- example:

<script>   
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
    'event': 'dataLayer-loaded',
    'articlePostDate': '${articlePostDate}',
    'articleUpdateDate': '${articleLastEditDate}',
    'contributor': '???',
    'primaryAuthor': '${authorLogin}'
    });
</script>

Hi DougS,

one more question :-)

I've coded to get all tags, labels and contributors from an article.

For example:

<#assign tagsQuery = "SELECT * FROM tags WHERE messages.id = '" + articleId + "'"/>
<#assign tags = rest(apiVersion, "/search?q=" + tagsQuery?url + "&restapi.response_style=view").data.items![] />

To show them in custom component, it's easy:

<#if tags?size gt 0>
<div>
    <strong>Tags:</strong>
    <#list tags as tag>
    <span> ${tag.text}</span>
    </#list>
</div>
<#else>
<div>
    <strong">Tags:</strong>
    <span> 0</span>
</div>
</#if>

However,

how to pass them as an object or pipe collection to dataLayer, so in dataLayer they look like in-line list or just simple an object of items.

The exact request I have :

"add in pipe delimited list if multiples"

Thank you.

You should be able to do something like this:

tags: '<#if tags?size gt 0><#list tags as tag>${tag}<#if tag_has_next>|</#if></#list</#if>',

Or, if you want to assign it to a variable:

<#if tags?size gt 0>
  <#assign pipeDelimitedTags = "" />
  <#list tags as tag>
    <#assign pipeDelimitedTags = pipeDelimitedTags + tag />
    <#if tag_has_next>
      <#assign pipeDelimitedTags = pipeDelimitedTags + "|" />
    </#if>
  </#list>
</#if>

 (note the has_next syntax, which is described on the freemarker docs page for list)

-Doug

Hi DougS,

thank you for your response.

- Just to make sure, so if I pass as a listed variable to dataLayer, dataLayer should show a list/or pipe of elements, right?

And from tags and labels I need 'tag.text' and 'label.text' as shown in my sample. Otherwise, it shows:

lithium.api.lion.InMemoryObjectInstanceTemplateModel@69faa81b

How to get text from the tags/labels and pass to a variable and to a dataLayer?

Listed part of the code in my sample is just for tasting purpose. I don't think it should go to HitBox, only as in debug mode, I guess..

- How to use 'debug' from the piece you've provided:

<#assign debug = false />
  <#if debug> 
......