GTM Event on Content

Question

I can't see to find an answer to this one anywhere. I'm trying to setup a trigger and event tag in Google Tag Manager to fire whenever content is present. Essentially, I am creating a simple event in Google Analytics for Product Views. The developer for this site is expensive, so I'd like to handle it purely in GTM.

One piece of content that only exists on product pages is the submit on the cart button.

Can anyone recommend a method to inject some code with GTM to fire when content exists so I can trigger a tag off it?

Here is the html in and around the cart button. I'm thinking that I can fire something when class="clsAddCartRight" exists or the submit - either one:

    <div id="variationGroup" class="clsViewItemVariationGroup clsOverflow" style="clear:both;">
    <div class="clsViewItemVariationList clsOverflow" style="width:200px;margin:0 auto;">
        <select name="item_variations" id="item_variations_496" onchange="getDetails()">
            <option value="1606" selected="selected">Medium</option>
            <option value="1607">Large</option>
        </select>
    </div>
    <div class="clsItemSaleDetailBlockBottom">
        <form name="purchaseItemFrm" id="purchaseItemFrm" action="http://www.runwaycrush.com/marketplace/cart.html" method="post">
            <input type="hidden" name="item_id" id="item_id" value="1602">
            <input type="hidden" name="c_action" id="c_action" value="add">
            <input type="hidden" name="item_ref" id="item_ref" value="kanduclothing">
            <input type="hidden" name="item_matrix_id" id="item_matrix_id" value="4721">  
                <div class="clsItemCartBlock clsFloatRight" id="addCartButton" style="margin:20px auto 0px; width:318px;">                    
                    <div class="clsAddCartLeft">
                        <div class="clsAddCartRight">
                            <input type="submit" name="add_to_cart" id="add_to_cart" value="ADD TO CART">
                        </div>
                    </div>                    
                </div>
        </form>
    </div>        
</div>

Answer 1

You can use a DOM type variable in GTM and use the "CSS Selector" option to select the element by classname (if the same class is there multiple times it will pick the first occurence). If you set the attribute name field to "class" the value for that variable will be the value of the class attribute.

Actually I think it would be better if you use the button itself and look for the "id" attribute with the value of "add_to_cart", because ids are unique per page (or should be).

However you also need an event to trigger a tag.

The value will be available only after the DOM has rendered. So the easiest way would be to set up a pageview and set the trigger type to "DOM Ready" and have if only fire when the value of your DOM variable matches the classname (or id respectively) of the button.

However if your product page urls follow any recognizable pattern it would be a lot better to use a url filter in a pageview trigger. That way you could have your tags trigger on pageload, which for many tags is much preferable.