[Resolved] AMP Story + Google Analytics

Home Forums Support AMP Story + Google Analytics

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1357926
    Marcelo.uy

    Hello Team,
    i am using AMP Story, and i am configuring Analytics, i did it well with a code from a blogger, but i want to use the Elements to do it instead the function.php

    But, when i try to do it using the Elements Analytics ┬┐dont work, if i use the code in the function it work.

    Look,this is the code that can use in the function.php file to add Analytics on AMP:

    function print_analytics_script() {
        if (is_singular('web-story')) {
        ?>
    <meta name="amp-google-client-id-api" content="googleanalytics">
    <?php
    }
    }
    add_action('web_stories_story_head', 'print_analytics_script');
    function print_body_analytics_script() {
        if (is_singular('web-story')) {
        ?>
    <amp-analytics type="gtag" data-credentials="include">
     <script type="application/json">
       {
         "vars": {
           "gtag_id": "UA-XXXXXXXXX-X",
           "config": {
             "UA-XXXXXXXXX-X": {
               "groups": "default"
             }
           }
         },
         "triggers": {
           "storyProgress": {
             "on": "story-page-visible",
             "vars": {
               "event_name": "custom",
               "event_action": "story_progress",
               "event_category": "${title}",
               "event_label": "${storyPageIndex}",
               "send_to": ["UA-XXXXXXXXX-X"]
             }
           },
           "storyEnd": {
             "on": "story-last-page-visible",
             "vars": {
               "event_name": "custom",
               "event_action": "story_complete",
               "event_category": "${title}",
               "event_label": "${storyPageCount}",
               "send_to": ["UA-XXXXXXXXX-X"]
             }
           }
         }
       }
     </script>
    </amp-analytics>
        <?php
    }
    }
    add_action('web_stories_print_analytics', 'print_body_analytics_script');

    If i want to use it with elements i take the next code and create an Elements that can be read in a Single Story page and put it in the head or the body:

    <amp-analytics type="gtag" data-credentials="include">
     <script type="application/json">
       {
         "vars": {
           "gtag_id": "YOUR_GOOGLE_ANALYTICS_ID",
           "config": {
             "YOUR_GOOGLE_ANALYTICS_ID": {
               "groups": "default"
             }
           }
         },
         "triggers": {
           "storyProgress": {
             "on": "story-page-visible",
             "vars": {
               "event_name": "custom",
               "event_action": "story_progress",
               "event_category": "${title}",
               "event_label": "${storyPageId}",
               "send_to": ["YOUR_GOOGLE_ANALYTICS_ID"]
             }
           },
           "storyEnd": {
             "on": "story-last-page-visible",
             "vars": {
               "event_name": "custom",
               "event_action": "story_complete",
               "event_category": "${title}",
               "send_to": ["YOUR_GOOGLE_ANALYTICS_ID"]
             }
           }
         }
       }
     </script>
    </amp-analytics>

    How can i put the first code on an elements that works?

    #1358065
    Marcelo.uy

    I am thinking, the Story Rule Position work well, can i debug it?

    #1358085
    David
    Staff
    Customer Support

    Hi there,

    your first script is using the web_stories_story_head hook:

    add_action('web_stories_story_head', 'print_analytics_script');

    in elements Hook List you can select Custom Hook – then you can paste in web_stories_story_head

    #1358112
    Marcelo.uy

    Still dont work, i use that hook and i insert this code with my Analytic ID:

    <meta name="amp-google-client-id-api" content="googleanalytics">
    
     <script type="application/json">
       {
         "vars": {
           "gtag_id": "UA-XXXXXXXXX-X",
           "config": {
             "UA-XXXXXXXXX-X": {
               "groups": "default"
             }
           }
         },
         "triggers": {
           "storyProgress": {
             "on": "story-page-visible",
             "vars": {
               "event_name": "custom",
               "event_action": "story_progress",
               "event_category": "${title}",
               "event_label": "${storyPageIndex}",
               "send_to": ["UA-XXXXXXXXX-X"]
             }
           },
           "storyEnd": {
             "on": "story-last-page-visible",
             "vars": {
               "event_name": "custom",
               "event_action": "story_complete",
               "event_category": "${title}",
               "event_label": "${storyPageCount}",
               "send_to": ["UA-XXXXXXXXX-X"]
             }
           }
         }
       }
     </script>
    </amp-analytics>
    
    #1358133
    David
    Staff
    Customer Support

    There two functions hooks.

    Hook #1

    Hook Content:
    <meta name="amp-google-client-id-api" content="googleanalytics">
    Hook name:
    web_stories_story_head
    Display Rules: web-story

    Hook #2

    Hook Content:

    <amp-analytics type="gtag" data-credentials="include">
     <script type="application/json">
       {
         "vars": {
           "gtag_id": "UA-XXXXXXXXX-X",
           "config": {
             "UA-XXXXXXXXX-X": {
               "groups": "default"
             }
           }
         },
         "triggers": {
           "storyProgress": {
             "on": "story-page-visible",
             "vars": {
               "event_name": "custom",
               "event_action": "story_progress",
               "event_category": "${title}",
               "event_label": "${storyPageIndex}",
               "send_to": ["UA-XXXXXXXXX-X"]
             }
           },
           "storyEnd": {
             "on": "story-last-page-visible",
             "vars": {
               "event_name": "custom",
               "event_action": "story_complete",
               "event_category": "${title}",
               "event_label": "${storyPageCount}",
               "send_to": ["UA-XXXXXXXXX-X"]
             }
           }
         }
       }
     </script>
    </amp-analytics>

    Hook name: web_stories_print_analytics
    Display Rules: web-story

    #1358178
    Marcelo.uy

    Nice, with only one hook, the second and it work.
    Thank you!

    #1358742
    David
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.