Google Tag Manager - Reusable page element created and added as a component to copy of page wrapper... but....

Sarah Kershaw:

Hello there one and all,


I've been having *fun* with this. 


I'm trying to set up Google Tag Manager and E-Commerce integration. I have made some headway based on this frankly excellent post in the community, however I seem to be missing something. 


My process:

1. Add Google Tag Manager tracking code to header or page - check
2. Add further Google Tag Manager code above the initial tracking code in stage 1 (this is data layer code) - check
3. Create a resuable page component, called reus_pagewrapper_tagmanager_ecommerce
4. Create a new version of my page wrapper code, integrate the component mentioned in step 3 by adding to meta tag section as follows [[S51:reus_pagewrapper_tagmanager_ecommerce]]

But when I preview it, it looks all weird and wrong. Nothing like the active (correct) version. 

So I'm stuck. 


Has anyone else had experiences like this?


 

 

<!-- Start: define dataLayer for Google Tag Manager -->
<script>
dataLayer = [{
 
<script>
// modify and set session variables
     // maps tracking code to order id
     // maps donation form name to Affiliation
    // corrects donation form $dollar amount and maps to transaction amount
    // maps pagename for API forms or donation form id (df_id) as the PRODUCT
     // maps source code to Category, if you don't use source code... you could do something donation campaign id?
dataLayer = [{
    'transactionId': 'Tracking Code',  // order ID - required
    'transactionAffiliation': 'dc:donationFormName', // donation form name, mapped to "affiliation"
    'transactionTotal': 'ift Amount', // total - required
    'transactionTax': '', // tax - you don't really need this as a non-profit, amirite?
    'transactionShipping':'', // shipping - you probably don't need this either
    'transactionProducts': [{
        'sku': 'dc:donationFormName', // donation form name
        'name': '',  // Page name in URL SKU/code required (populates with pagename or df_id, pagename if you use API forms)
        'category': '',   // source code, mapped to "category"
        'price': 'ift Amount',  // unit price - required
        'quantity': 1 // required
    }];
}];
</script>

</script>
<!-- End: define dataLayer for GTM -->

1. Remove the <script> tags from pagewrapper_tagmanager_ecommerce
2. Add a conditional to pagewrapper_tagmanager_ecommerce to only appear on Donation Thank You pages
   1. EX: ​[[?[[S8]]::donation=completed:: <!-- all the ecomm code -->:: <!-- do nothing-->::]]
3. Double check that a dataLayer is still created in the do nothing area. otherwise we're double calling dataLayer, within itself. oops.