Google跟踪代码管理器：使用GTM商家代码中html页上定义的Javascript变量？

Question

I am trying to integrate Google Merchant Code via GTM on a product checkout/thankyou page. The Google Merchant code is :

<script>
 window.renderOptIn = function() {
  window.gapi.load('surveyoptin', function() {
    window.gapi.surveyoptin.render(
    {
      "merchant_id": 12345678,
      "order_id": "ORDER_ID",
      "email": "CUSTOMER_EMAIL",
      "delivery_country": "COUNTRY_CODE",
      "estimated_delivery_date": "YYYY-MM-DD"
     });
   });
 }
</script>

The code need some variables (order_id, email, delivery_country, estimated_delivery_date). But these variables values can only be retrieved by Magento/Php code as: var gmorderid = "loadByIncrementId($this->getOrderId())->getId(); ?>";

var gmcemail = "<?php echo Mage::getModel('sales/order')->loadByIncrementId($this->getOrderId())->getCustomerEmail(); ?>";

var gmcountry = "<?php echo Mage::getModel('sales/order')->loadByIncrementId($this->getOrderId())->getBillingAddress()->getCountry(); ?>";

var gmdate = "<?php echo date('Y-m-d',  strtotime('+5 days',Mage::getModel('core/date')->timestamp())); ?>";
</script>

I have tried putting these variables in GTM code by php echo statement as shown above. But the php code is converted into plan text when the GTM tag is fired. As a solution I defined variables in the page html andtried inserting these variables in the GTM code like:

"order_id": gmorderid, //doesnot work. Variable shown as plan text when the code is executed
 "order_id'":'+ gmorderid +'"', // also doesnot work, Variable shown as plan text when the code is executed
"order_id'":'+ {{gmorderid}} +'"', // GTM variable format, this also doesnot work

How can I use these variables values in the GTM google merchant code above so that the GTM code gets all values needed when the page is opened?

Answer 1

You should save the values in global JavaScript variables or in dataLayer and then retrieve these values using GTM JavaScript variables or dataLayer variables.

For example, using your backend you create global JavaScript variable order_number and assign a value 12345 to it.

Then in GTM you create a new variable with JavaScript variable type. This variable should get value from order_number global JS variable. Let's say you name this GTM variable CJS - order_number.

Now you create custom HTML tag and use just created GTM JS variable in it to pass required value from order_number global JS variable. You do this using double curly braces notation like {{CJS - order_number}}. This notation is for inner GTM variables only.

Answer 2

In Magento (add js after GTM snippet)

dataLayer.push({
  'order_id': '<?php echo $this->getOrderId(); ?>',
  'email': '<?php echo Mage::getModel('sales/order')->loadByIncrementId($this->getOrderId())->getCustomerEmail(); ?>',
  'delivery_country': '<?php echo Mage::getModel('sales/order')->loadByIncrementId($this->getOrderId())->getBillingAddress()->getCountry(); ?>',
  'estimated_delivery_date': '<?php echo date('Y-m-d',  strtotime('+5 days',Mage::getModel('core/date')->timestamp())); ?>'
});

In Google Tag Manager:

1. Add 4 Variables with type "dataLayer"
2. set variable names to order_id, email etc.
3. use variable in your Tags as {{order_id}} etc.