關於 GTM variable 的一些重點

先了解一下整個程序: GTM 根據容器內定義的所有 triggers 得出需要產生哪些 listeners ，這些 listeners 會將其對應的 events，當它們發生時放進 datalayer，當 event 訊息 push 進 datalayer 時會event 輔助函式觸發對應此 event 的 trigger ，之後 trigger 擊發對應的所有 tags。

• 在 GTM 中 variable 是用來取值的輔助函式: In Google Tag Manager, the term variable is used to denote a helper function that your tags, triggers, and other variables can invoke to retrieve values from. Thus, the idea is very similar to the broader concept of computing variables explored in the previous paragraph. 
• 呼叫一變數函式的語法: {{variable name}}
• 執行此 {{variable name}}  語句時，GTM 將執行 variable 同名函式，然後回傳函式執行結果放置在此呼叫執行語句之處(可能在 tag, trigger, 或其它變數之內)
• For you to be able to invoke a GTM variable, you need to be working in a script context, or the template field needs to support variable references.A supported template field can be uncovered by looking for the little variable symbol next to a field:
  
  
  
• variable 常用在
1. Triggers: specify a variable as the target of the trigger condition. In fact, the condition builder is created so that you can’t possibly not choose a variable. It’s obligatory! 
   
   
   
2. Custom HTML tags
3. Custom JavaScript variables: you can call variables from the scripts within and will need to manually type the call, using the correct syntax and the correct (case-sensitive) variable name:

<!-- Sample Variable call in a Custom HTML Tag -->

<script>

  (function() {

    alert({{custom alert string}});

  })();

</script>

•  One cool thing that GTM does for you is this: when you change a variable name, all references to the variable are automatically updated. Even the ones you’ve typed in manually into Custom HTML tags and Custom JavaScript variables.
• 變數需要 resolved 得出結果(呼叫變數函式)的時機:
• If the variable is not attached to a trigger or a tag, the variable is never resolved (unless, of course, the variable is referenced from some other variable that is resolved).
• If the variable is referenced in a trigger that is not attached to any tags, the variable is never resolved.
• If the variable is referenced in a trigger that is attached to a tag, the variable is resolved every single time an event key is pushed into dataLayer.
• If the variable is referenced in a tag, the variable is resolved every single time the tag fires.
• trigger 擊發 tag 時，variable 的處理方式:
1. Variable calls are transformed into the actual function calls (google_tag_manager['containerId'].macro('gtm10')) : a variable is actually a method of the google_tag_manager object. The parameter that is given to the macro() method is basically ‘gtm’ plus a unique sequential number. This means that it’s very difficult to identify which macro() parameter is associated with which variable, which is why debugging has become an all-important tool in understanding how variables work.
2. The tag code is injected on the site
3. The tag code is executed, and all variable functions within are resolved
•  The other, common case of variable resolution has to do with trigger conditions. When an ‘event’ key is pushed into dataLayer, every single trigger that is attached to a tag in your container is evaluated for the ‘event’ condition. In addition to checking the event value, all variables referenced in the trigger are evaluated, too
• Custom JavaScript variable 儲存 Javascript 碼來執行之:  The Custom JavaScript variable is surely the most versatile variable in the set. You can use it to run arbitrary JavaScript on the page. It creates a script context, meaning you can also call other variables from within using the appropriate syntax. The Custom JavaScript variable needs to follow two simple rules.
1. the script must be wrapped in an anonymous function block (function() { ... }).
2. the function must have a return statement (return somevalue;).
3. unwritten rule is that the function should only return a value. You shouldn’t use a Custom JavaScript variable to modify the global namescape by pushing values to dataLayer for example. 
• Datalayer variable 由 data layer 取值:  When you create a Data Layer variable, you specify the Data Layer key whose value you want to retrieve. 
• You can use dot notation to access both Data Layer variable keys which have a dot in their name (e.g. gtm.element), or to access properties of DOM element objects (e.g. gtm.element.dataset.name). 
• You can use dot notation to access Array members as well. Square notation won’t work, so replace the square notation with dots: products[0].name becomes products.0.name.
• JAVASCRIPT variable: The JavaScript variable returns the value stored in the global JavaScript variable you specify. 與 Custom JavaScript Note, this is NOT the same as the Custom JavaScript variable, which is a function declaration.
• Undefined Value is to return the JavaScript undefined value. So it’s essentially the same as a Custom JavaScript variable with: function() {  return; }
• AUTO-EVENT variable are used to access the target element of an auto-event action (e.g. Click, Error, Form Submit). When you create a new Auto-Event variable, you need to specify just which component of the target element you want to access.
• Element - Accesses the DOM Element itself that was the target of the auto-event action.
• Element Classes - Returns the value of the class attribute of the auto-event element.
• Element ID - Returns the value of the id attribute of the auto-event element.
• Element Target - Returns the value of the target attribute of the auto-event element.
• Element Text - Returns the value of either the textContent or innerText property of the auto-event element.
• Element URL - Returns the value of either the href or the action attribute of the auto-event element.
• History New URL Fragment - Returns the new URL fragment set with a browser history event.
• History Old URL Fragment - Returns the old URL fragment replaced in the browser history event.
• History New State - Returns the new state object set with a browser history event. 
• History Old State - Returns the old state object replaced in the browser history event.
• History Change Source - Returns a string denoting the event that triggered the history change event (popstate, pushState, replaceState, or polling).
• DOM Element variable to retrieve the text content of any given DOM Element.
• Element Visibility variable lets you know if any particular element was visible in the browser viewport when the trigger fired. Visibility requires that the element be positioned above the fold of the page in the active browser tab. In other words, the element must actually be in sight of the user. 
• Constant variable: If you have any string of characters that you need to use often, or which you might need to update in the future, it’s best to store it as a Constant variable instead. 
• Google Analytics Settings variable returns a set of Universal Analytics tag settings. 
• Lookup Table variable performs any number of lookups that you specify, returning the value of the first match. The Input variable specifies the variable which will be used as the input in the lookups. On each row that you add to the table, you give an output value to be returned by the variable, if the input variable is matched with the Input field value of the row. You can chain Lookup Tables together, creating a powerful, efficient, and flexible value lookup for your tags and variables.
• RegEx Table variable lets you create a pattern-matching table. It functions similarly to the Lookup Table, with the obvious difference that lookups are exact match only, whereas regular expressions are far more flexible in what you can match against. 
• Random Number variable returns a random number between 0 and 2147483647. 
• CONTAINER ID variable:  The public ID (GTM-XXXXXX) of the Container.
• Container Version Number returns the version number of the container that is implemented on the site, or QUICK_PREVIEW if you are previewing the workspace draf.
• Debug Mode variable returns true if the user is viewing the container in Preview mode, and false if not