On this part will focus on how to build back-end app to work as a server with gtm. We will use rest-api with flask for work as get request to run our service when calling it.

Step by step, you will understand what I mean.

before we start, we need

SendGrid:

Github:

First setup back-end app:

1git clone https://github.com/hsayed21/gtm-server.git

After clone repo open app.py file and goto send function and modify with your data. fromMail@gmail.com change to your email that you added to SendGrid | Single Sender Verification toMail@gmail.com change to your email for receive messages <sendGrid-APi-key> change to your SendGrid API Key | SendGrid API Key

 1def send(_json, _test=False):
 2    # using SendGrid's Python Library
 3    message = Mail(
 4        from_email='fromMail@gmail.com',
 5        to_emails='toMail@gmail.com',
 6        subject='Track Resume',
 7        html_content=send_template(_json, _test)
 8    )
 9    try:
10        sg = SendGridAPIClient("<sendGrid-APi-key>")
11        response = sg.send(message)
12        return json.dumps(True)
13    except Exception as e:
14        print(e.message)
15        return json.dumps(False)

After that go to update function and modify <github-token> change to your github token | Creating a personal access token - GitHub

In github create repo with name gtm-json then create file name data.json

1g = Github("<github-token>")
2repo = g.get_user().get_repo("gtm-json")
3file_content = repo.get_contents("data.json")
4clear_data_from_github = file_content.decoded_content.decode()
5data_json = json.loads(clear_data_from_github)

After modifying everything, deploy to heroku

  • Create account on Heroku
  • Install the Heroku CLI on your computer
  • Open the terminal and log in then follow the instructions
1heroku login
  • Create a project
1heroku create my-gtm-server-app
  • Push your app to Heroku
1git add .
2git commit -m "modify app"
3git push heroku master

Back to Custom HTML on Google Tag Manager from Part 1, we will continue

On this code from update function modify https://your-server.herokuapp.com change to your app that was deployed on heroku

1update("https://your-server.herokuapp.com/update?ip="+res+"&event=Resume Page View")
Google Tag Manager: Custom HTML Final Result
 1<script>
 2
 3// array of free api for get public ip
 4var urls = ['https://api.ipify.org/?format=json',
 5    'https://jsonip.com', 'https://ipapi.co/json/',
 6    'https://ident.me', 'https://ipinfo.io/json',
 7    'https://ifconfig.me/ip',
 8    'https://ipecho.net/json',
 9    'https://icanhazip.com/',
10    'https://wtfismyip.com/text',
11    'https://api.hostip.info/get_json.php',
12    'https://api.db-ip.com/v2/free/self'];
13
14//create instance
15var xhr = new XMLHttpRequest();
16//recursive function
17(function loop(i, length) {
18    /*
19    i => index
20    length => length of array
21    */
22    // check if reach to end of array | last element of array
23    if (i >= length) {
24        return; //go out of  function
25    }
26    // get item from array
27    var url = urls[i];
28    // ajax request to open url
29    xhr.open("GET", url);
30    xhr.onreadystatechange = function() {
31        // if request success
32        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
33            // save response
34            var res = xhr.responseText;
35            // check if respone is json data or string
36            // because of different data type
37            if (isJSON(res)) {
38                if ("ip" in JSON.parse(res))
39                    res = JSON.parse(res)['ip'];
40                else
41                    res = JSON.parse(res)['ipAddress'];
42            }
43
44            // after get ip send to back-end website
45            update("https://cors-proxy.herokuapp.com/https://my-gtm-server-app.herokuapp.com/update?ip=" + res + "&event=Resume Page View")
46            return;
47        }
48
49    }
50
51    // if happend error or failed request
52    // start again with different api (recursive)
53    xhr.onerror = function() {
54        loop(i + 1, length);
55    };
56
57    xhr.send();
58
59})(0, urls.length); // start with index 0 and length of urls array
60
61// update data
62function update(url) {
63    var xhr2 = new XMLHttpRequest();
64    xhr2.open("GET", url, true);
65    xhr2.send();
66    xhr2.onreadystatechange = function() {
67        if (xhr2.readyState === 4 && xhr2.status === 200) {
68            //var json2 = JSON.parse(xhr2.responseText);
69        }
70    }
71}
72
73// check data type
74function isJSON(str) {
75    try {
76        return (JSON.parse(str) && !!str);
77    } catch (e) {
78        return false;
79    }
80}
81
82</script>

Issues

After creating your CORS Proxy web add a web link before your gtm server in Custom HTML

update("https://your-cors-proxy.herokuapp.com/https://my-gtm-server-app.herokuapp.com/update?ip="+res+"&event=Resume Page View")
Sample Json Data
 1{
 2    "page_url": "https://your-resume-website.github.io/resume/",
 3    "page_view_count": 3,
 4    "last_seen": "2021-11-21 09:55:06 AM",
 5    "dataSet": [
 6        {
 7            "IP": "64.233.172.110",
 8            "event": "Resume Page View",
 9            "page_view_count": 1,
10            "timestamp": [
11                "2021-11-19 09:55:06 AM"
12            ],
13            "country": "United States of America",
14            "city": "Mountain View",
15            "region": "California",
16            "latitude": "37.405992",
17            "longitude": "-122.078515",
18            "isp": "Google LLC",
19            "hostname": "google-proxy-64-233-172-110.google.com",
20            "device": "unknown",
21            "os": "unknown",
22            "browser": "DefaultProperties"
23        }
24    ]
25}
API Testing
Free API
Reference