Category: Google

  • Retrieving value of hidden input DOM element in Google Tag Manager (GTM)

    Retrieving value of hidden input DOM element in Google Tag Manager (GTM)

    When implementing event tracking of user comments using Google Tag Manager for WordPress I came across a pretty strange behavior when trying to retrieve the value of a hidden <input> field holding the current comment post id (comment_post_ID) that should serve as event label for Google (Universal) Analytics.

    WordPress Comment Form

    Below you find the WordPress comment form used by most templates today. Pay attention to line 11 that shows the hidden input field comment_post_ID. This field’s value should be used as event label.

    &lt;form id=&quot;commentform&quot; class=&quot;comment-form&quot; action=&quot;http://www.yourdomain.com/wp-comments-post.php&quot; method=&quot;post&quot; novalidate=&quot;&quot;&gt;
&lt;span id=&quot;email-notes&quot;&gt;Your email address will not be published.&lt;/span&gt; Required fields are marked &lt;span class=&quot;required&quot;&gt;*&lt;/span&gt; 
&lt;label for=&quot;author&quot;&gt;Name &lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt; 
&lt;input id=&quot;author&quot; name=&quot;author&quot; size=&quot;30&quot; type=&quot;text&quot; value=&quot;&quot; /&gt; 
&lt;label for=&quot;email&quot;&gt;Email &lt;span class=&quot;required&quot;&gt;*&lt;/span&gt;&lt;/label&gt; 
&lt;input id=&quot;email&quot; name=&quot;email&quot; size=&quot;30&quot; type=&quot;email&quot; value=&quot;&quot; /&gt; 
&lt;label for=&quot;url&quot;&gt;Website&lt;/label&gt; &lt;input id=&quot;url&quot; name=&quot;url&quot; size=&quot;30&quot; type=&quot;url&quot; value=&quot;&quot; /&gt; 
&lt;label for=&quot;comment&quot;&gt;Comment&lt;/label&gt; 
&lt;textarea id=&quot;comment&quot; cols=&quot;45&quot; name=&quot;comment&quot; rows=&quot;8&quot;&gt;&lt;/textarea&gt; 
&lt;input id=&quot;submit&quot; class=&quot;submit&quot; name=&quot;submit&quot; type=&quot;submit&quot; value=&quot;Send your comment&quot; /&gt; 
&lt;input id=&quot;comment_post_ID&quot; name=&quot;comment_post_ID&quot; type=&quot;hidden&quot; value=&quot;SOME_ID&quot; /&gt; 
&lt;input id=&quot;comment_parent&quot; name=&quot;comment_parent&quot; type=&quot;hidden&quot; value=&quot;0&quot; /&gt; 
&lt;input id=&quot;akismet_comment_nonce&quot; name=&quot;akismet_comment_nonce&quot; type=&quot;hidden&quot; value=&quot;SOME_HASH&quot; /&gt; 
&lt;input id=&quot;ak_js&quot; name=&quot;ak_js&quot; type=&quot;hidden&quot; value=&quot;SOME_HASH&quot; /&gt;
&lt;/form&gt;

    Retrieve value using Google Tag Manager

    Per definition, Google Tag Manager evaluates DOM element variables based on an Element ID and optionally on an Attribute value. In case no Attribute Name is specified the value attribute will be used by default:

    If the attribute name is set, the variable’s value will be that of the DOM element attribute; otherwise, the variable’s value will be the text of the DOM element.

    Unfortunately, this does not seem to (always) work for hidden input fields. Therefore, make sure to specify the Attribute Name value manually: Google Tag Manager DOM Element variable Although, you can also use Custom JavaScript variables to achieve the same DOM element variables are clearly the way to go here.