[ GTM ] google TagManager

0. Installation

1. Create Google tagManager account + container
Go to https://tagmanager.google.com

Typically, you set up one container per web domain. However, if the user experience and tags on a website span more than one domain, it’s best to set up a single container that serves all the domains involved. Here are a few considerations.

1.1 Configuration (rules, triggers, and variables) can’t easily be shared across containers without using container exporting and importing, or by using the API. If the tags and firing logic is similar across domains, it makes sense to use a single container, because maintaining multiple similar configurations is time-consuming and error-prone.

1.2 When someone publishes a container, all changes go live, regardless of domain. If you need to apply changes to one domain without affecting other domains, use a different container for each domain.

2. Copy container code to website

NOTE : Replacing `GTM-XXXX` with your container ID.

Website

<head>
...
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
...
</head>
<body>
...
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
...
</body>

ref : https://support.google.com/tagmanager

AMP page

Place the <script> portion of the JavaScript snippet just above the closing </head> tag.

<amp-analytic> section immediately after the opening <body>

 

If all of your tags fire as pages are loading, and these pages can be identified by their URLs, a basic container implementation may be sufficient for your needs.

  • If your tag firing scenarios are more complex, you may want to implement a more customized container implementation. These custom solutions often implement a data layer, which is code that helps Google Tag Manager pass data from your site or app to your tags. You can learn about why and how you would use a data layer in our solutions guide, and how to set up a data layer on our developer site.

Trobleshooting Container

Preview Mode : https://support.google.com/tagmanager/answer/6107056

Tag Assistant Chrome Extension : https://support.google.com/tagassistant#topic=6000196

 

1. Create a tag

1. Begin by identifying all of the tags you have deployed on your site and where they are deployed (e.g. in global headers or footers, on landing pages, confirmation pages, in response to button clicks, etc.)

2. Create new tag

  • Trigger ( of new tag ) that we are going to add tag : i.e. when the page is loaded
  • Variable : String, HTML Node element, cookies, random number, custom javascript code
  • dataLayer : If the data you want to collect is not visible on the page, refer to the developer documentation for information on how to pass additional data to tags.

(for example, you can tell GTM to fire a remarketing tag when the purchase_total > $100)

Rather than referencing variables, transaction information, page categories, and other important signals scattered throughout your page, Google Tag Manager is designed to easily reference information that you include in this data layer.

&amp;amp;lt;script&amp;amp;gt;
 // dataLayer
 // Example : put the dataLayer when the page is view
 // then fire the google analytic event tag when detected to track data
 dataLayer = [{'destination': 'Hawaii',
 'travelType': 'vacation'
 }];
&amp;amp;lt;/script&amp;amp;gt;

ref : https://developers.google.com/tag-manager/devguide#datalayer

3. Publish

 

Troubleshoot : https://developers.google.com/tag-manager/troubleshooting

 

Advertisements

[ selenium ] with TestNG and WebDriver

1) TestNG Eclipse Plugin Installation

  1. In eclipse, Help > Install New Software …
  2. Add Repository http://beust.com/eclipse and install

ref : http://toolsqa.com/selenium-webdriver/install-testng/

2) Create TestNG Class

  1. Right click at package, TestNG > create TestNG class
  2. Fill-in classname, we can also check the @BeforeMethod, @AfterMethod annotation
  3. Run : Run As > TestNG Test

ref : http://toolsqa.com/selenium-webdriver/testng-testcase/

3) Add Selenium-java and testNG to Library

selenium-java-testng.png

NOTE : All JARs inside Selenium-java.zip need to be added, otherwise we will got below error.

FAILED CONFIGURATION: @BeforeClass setUpFAILED CONFIGURATION: @BeforeClass setUpjava.lang.NoClassDefFoundError: com/google/common/base/Function at my.my.test.NewTest.setUp(NewTest.java:28)

 

Common Run Error

java.lang.UnsupportedClassVersionError: org/openqa/selenium/NoAlertPresentException : Unsupported major.minor version 52.0

Root Cause

The version of Selenium you have requires Java 8.
You are not running this on Java 8.

ref : https://www.reddit.com/r/learnjava/comments/5jzbjx/javalangunsupportedclassversionerror/

ChromeDriver common error

The path to the driver executable must be set by the webdriver.chrome.driver system property

Solution 

System.setProperty("webdriver.chrome.driver", "C:/Users/phongsathorn.e/Downloads/chromedriver_win32/chromedriver.exe");

driver = new ChromeDriver();

ref : https://stackoverflow.com/questions/44476647/getting-the-path-to-the-driver-executable-must-be-set-by-the-webdriver-chrome-d

Download ChromeDriver.exe at https://sites.google.com/a/chromium.org/chromedriver/downloads

Ref : Download previous version of selenium

http://selenium-release.storage.googleapis.com/index.html

 

[ rails ] ActiveMailer send email to Gmail using SMTP and TLS

Mailer

class UserMailer < ApplicationMailer
helper :application

def generate(recipients:, params2:)
attachments["#{Date.yesterday}.csv"] = "x,y,z"
mail(
to: recipients,
subject: "#{name}--#{Date.today}",
body: 'Report is attached'
)
end

end

 

Send email

UserMailer.generate(
param1: 'whatever',
param2: 'whatever'
).deliver_now!

NOTE*** : the ! after deliver_now will force rails to throw error.

 

SMTP setting

config/environment.rb

ActionMailer::Base.smtp_settings = {
user_name: 'phong.ek@gmail.com',
password: 'whatever',
domain: 'gmail.com',
address: 'smtp.gmail.com',
port: 587,
authentication: :plain,
enable_starttls_auto: true
}

 

Common error and solution

Error#1

EOFError: end of file reached
from /home/pong/.rvm/rubies/ruby-2.1.2/lib/ruby/2.1.0/net/protocol.rb:153:in `read_nonblock'

Root cause#1

One of the root cause is using SSL port 465 with TLS.

NOTE : According to https://support.google.com/a/answer/176600?hl=en, port 587 must be TLS, port 465 should be SSL.

 

Error#2

Username and Password are not accepted

Root cause#2

See https://dsin.wordpress.com/2017/09/28/gmail-unable-to-send-email/

 

Useful params in config/development.rb

The above script log the error even the environment configuration is below.

config.action_mailer.raise_delivery_errors = false
config.action_mailer.perform_deliveries = false

 

Mail Catcher
Another interesting rails mail server is https://mailcatcher.me/.

[ rails ] AbstractController callback

order

prepend_around_action
prepend_before_action
before_action
append_before_action
around_action
append_around_action

Rendered layouts/application.html.erb (0.5ms)
Rendered home/index.html.erb (0.5ms)

append_after_action
after_action
prepend_after_action

ref : http://hollandaiseparty.com/order-of-abstractcontrollercallbacks/

[ firefox ] Selenium IDE

Installation

https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/

or link from http://www.seleniumhq.org/download/

Feature

  • Record and playback.
  • Export to selenium WebDriver

* JUnit 4 / WebDriver Backed
* Java / TestNG / WebDriver
* Java / JUnit 4 / WebDriver Backed
* Java / JUnit 4 / Remote Control
* Java / JUnit 3 / Remote Control
* Java / TestNG / Remote Control

* C# / NUnit / WebDriver

* C# / NUnit / Remote Control

* Python 2 / unittest / WebDriver

* Python 2 / unittest / Remote Control

* Ruby / RSpec / WebDriver

* Ruby / Test::Unit / WebDriver

* Ruby / RSpec / Remote Control

* Ruby / Test::Unit / Remote Control

How to use if-else in IDE

Command |Target | value
store | true | var1
if | storedVars.var1
echo | I am in the if
else
echo | I am in the else
endIf

ref : https://stackoverflow.com/questions/36883304/how-to-use-if-else-statement-in-selenium-ide