Support » Plugin: AMP » Google Analytics with AMP

  • I’ve already tried two methods to get Analytics to work and it doesn’t seem to work.

    1st method, with js:

    //AMP Analytics
    add_action( 'amp_post_template_head', 'hf_amp_post_template_head' );
    function hf_amp_post_template_head() {
    	if ( !current_user_can('manage_options') ) {
    		?>
    		<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    		<?php
    	}
    }
    add_action( 'amp_post_template_footer', 'hf_amp_post_template_footer' );
    function hf_amp_post_template_footer($amp_template) {
    	if ( !current_user_can('manage_options') ) {
    		?>
    		<amp-analytics type="googleanalytics" id="analytics1">
    			<script type="application/json">
    				{
    					"vars": {
    						"account": "UA-xxxxxx-xxx"  // Replace with your property ID. - I have replaced it, but removed to post on WordPress.org
    					},
    					"triggers": {
    						"trackPageview": {  // Trigger names can be any string. trackPageview is not a required name.
    							"on": "visible",
    							"request": "pageview"
    						}
    					}
    				}
    			</script>
    		</amp-analytics>
    		<?php
    	}
    }

    2nd method, with the pixel:

    //AMP Analytics
    add_action( 'amp_post_template_footer', 'hf_amp_post_template_footer' );
    function hf_amp_post_template_footer($amp_template) {
    	if ( !current_user_can('manage_options') ) {
    		?>
    		<amp-pixel src="https://www.google-analytics.com/collect?v=1&t=pageview&z=<?php echo rand(0,1000); ?>&dt=<?php echo urlencode(get_the_title()); ?>&dl=<?php echo urlencode(get_permalink()); ?>&tid=UA-xxxxxx-xx" />
    		<?php
    	}
    }

    Any ideas on how to correctly setup Google Analytics with AMP?

    https://wordpress.org/plugins/amp/

Viewing 12 replies - 1 through 12 (of 12 total)
  • What specifically is not working?

    It’s not tracking 🙂

    I’m opening several pages and I can’t see the pageviews on Analytics Real time report, so i’m assuming the request it’s not getting to Google.

    Here’s an example url: http://musicfest.pt/o-que-vai-de-mim-para-ti-bons-sons-15-de-agosto-22274/amp/

    Both JS and pixel methods are currently active.

    The error on the page is: amp-analytics-0.1.max.js:243 AmpAnalytics analytics1 Analytics config could not be parsed. Is it in a valid JSON format? SyntaxError: Unexpected token /

    You need to remove the comments like // Trigger names can be any string. trackPageview is not a required name.

    OK!

    It’s now working perfectly.

    Removing the comments did the trick.

    BTW, what tool are you using to check out the errors?

    Hi, assuming you might have used the first code. Where did you put this Code? i mean in which template?

    In “amp/includes/amp-helper-functions.php” add (bold text):

    <?php

    function amp_get_permalink( $post_id ) {
    if ( ” != get_option( ‘permalink_structure’ ) ) {
    $amp_url = trailingslashit( get_permalink( $post_id ) ) . user_trailingslashit( AMP_QUERY_VAR, ‘single_amp’ );
    } else {
    $amp_url = add_query_arg( AMP_QUERY_VAR, 1, get_permalink( $post_id ) );
    }

    return apply_filters( ‘amp_get_permalink’, $amp_url, $post_id );
    }
    //*Amp Analytics
    function isa_amp_scripts( $data ) {
    $data[‘amp_component_scripts’] = array(
    ‘amp-analytics’ => ‘https://cdn.ampproject.org/v0/amp-analytics-0.1.js’
    );
    return $data;
    }
    add_filter( ‘amp_post_template_data’, ‘isa_amp_scripts’ );
    //*End amp analytics

    function post_supports_amp( $post ) {
    // Because add_rewrite_endpoint doesn’t let us target specific post_types 🙁
    if ( ! post_type_supports( $post->post_type, AMP_QUERY_VAR ) ) {
    return false;
    }

    And… in “amp/templates/single.php” add (bold text):

    <div class=”amp-wp-content”>
    <h1 class=”amp-wp-title”><?php echo esc_html( $this->get( ‘post_title’ ) ); ?></h1>
    <ul class=”amp-wp-meta”>
    <?php $this->load_parts( apply_filters( ‘amp_post_template_meta_parts’, array( ‘meta-author’, ‘meta-time’, ‘meta-taxonomy’ ) ) ); ?>

    </amp-ad>

    <?php echo $this->get( ‘post_amp_content’ ); // amphtml content; no kses ?>

    </amp-ad>

    </div>

    <?php do_action( ‘amp_post_template_footer’, $this ); ?>

    <amp-analytics type=”googleanalytics” id=”analytics1″>
    <script type=”application/json”>
    {
    “vars”: {
    “account”: “UA-YOU-CODE-ANALYTICS”
    },
    “triggers”: {
    “trackPageview”: {
    “on”: “visible”,
    “request”: “pageview”
    }
    }
    }
    </script>
    </amp-analytics>

    </body>
    </html>

    Webdados: to view errors, go to any AMP page, open your browser’s javascript console (usually right-click > “Inspect Element” > “Console” tab). Add #development=1 to the end of the URL and then refresh the page. Any AMP errors will show up in the Javascript console.

    ppsthane and Rooibos: please do not edit the plugin files directly. Please see this section on where to put code: https://github.com/Automattic/amp-wp/blob/master/readme.md#where-do-i-put-my-code

    Mohammad Jangda: Thanks. I found that in the meanwhile.

    Rooibos: Big no!

    ppsthane: I’ve used my child theme’s functions.php file

    First we need to add the script to the head (I’m also using the same filter to change my site icon):

    //AMP Site Icon
    add_filter( 'amp_post_template_data', 'hf_amp_post_template_data' );
    function hf_amp_post_template_data($data) {
    	$data[ 'site_icon_url' ] = get_stylesheet_directory_uri() . '/images/icons/icon-32x32.png';
    	if ( !current_user_can('manage_options') ) { //No Analytics for admin
    		//Google Analytics
    		if ( !isset($data['amp_component_scripts']) ) {
    			$data['amp_component_scripts'] = array();
    		}
    		$data['amp_component_scripts']['amp-analytics']='https://cdn.ampproject.org/v0/amp-analytics-0.1.js';
    	}
    	return $data;
    }

    Then we need to add the Google Analytics element to the footer:

    //AMP Analytics
    add_action( 'amp_post_template_footer', 'hf_amp_post_template_footer' );
    function hf_amp_post_template_footer($amp_template) {
    	if ( !current_user_can('manage_options') ) { //No Analytics for admin
    		?>
    		<amp-analytics type="googleanalytics" id="analytics1">
    			<script type="application/json">
    				<?php
    				echo json_encode( array(
    					'vars'	=>	array(
    						'account'	=>	'UA-xxxxxx-xx',
    					),
    					'triggers'	=>	array(
    						'trackPageview'	=>	array(
    							'on'	=> 'visible',
    							'request'	=> 'pageview',
    						)
    					),
    				) );
    				?>
    			</script>
    		</amp-analytics>
    		<?php
    	}
    }
Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Google Analytics with AMP’ is closed to new replies.